我有以下问题，帮助将不胜感激。单击某个功能后，如何在回调函数“function（e）”之外的“featuresArray”中访问“img_src”对象？我需要将它传递给另一个javascript文件进行渲染！这是https://jsfiddle.net/5fpc7otg/非常感谢
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://openlayers.org/en/v4.6.4/css/ol.css" type="text/css">
<script src="https://openlayers.org/en/v4.6.4/build/ol.js" type="text/javascript"></script>
<!--JQuery-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js" type="text/javascript"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css")>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js")></script>
<div id="map"></div>
<div id="element"></div>
</head>
<body>
<script>
var openStreetMap = new ol.layer.Tile({
source:new ol.source.OSM(),
visible:true,
name:"openstreetmap"
})
var map = new ol.Map({
layers:[openStreetMap],
target:"map",
view: new ol.View({
center: ol.proj.fromLonLat([80,36]),
zoom:4
})
})
var featuresArray = [];
var feature1 = new ol.Feature
({
geometry:new ol.geom.Point(ol.proj.transform([81,36],'EPSG:4326', 'EPSG:3857') ),
name:"Feature1",
img_src:"images/img_1.jpg",
});
var feature2 = new ol.Feature
({
geometry:new ol.geom.Point(ol.proj.transform([85,39],'EPSG:4326', 'EPSG:3857') ),
name:"Feature2",
img_src:"images/img_2.jpg",
});
featuresArray.push(feature1);
featuresArray.push(feature2);
//style and icon
var style = new ol.style.Style
({
image:new ol.style.Icon
({
anchor:[0.5, 5],
src:'https://openlayers.org/en/v4.6.5/examples/data/icon.png',
anchorXUnits: 'fraction',
anchorYUnits: 'pixels',
opacity: 0.75,
scale:1
})
});
var pointSource = new ol.source.Vector
({
features:featuresArray
});
var pointMarker = new ol.layer.Vector
({
source:pointSource,
style:style
});
map.addLayer(pointMarker)
var popup = new ol.Overlay({
element:element,
positioning:'bottom-center',
stopEvent:false
});
map.addOverlay(popup);
// Actions to be taken when clicked on the point
map.on("click",function(e){
var feature = map.forEachFeatureAtPixel(e.pixel,function(feature, layer){
return feature;
});
if(feature){
popup.setPosition(e.coordinate);
$(element).attr('data-placement', 'top');
$(element).attr('data-html', true);
$(element).attr('data-original-title', 'This is title');
$(element).attr('data-content', feature.get('name'));
$(element).popover('show');
}
else{
$(element).popover('destroy');
}
});
*****// I need to access this img_source here, sth like var x = feature.get('img_source')** and pass this variable x to another javascript file!***
</script>
</body>
</html>
答案 0 :(得分：-1)
实际上，您可以在地图点击事件之外声明一个变量，然后在点击事件发生后分配其值。
var img_src = '';
// Actions to be taken when clicked on the point
map.on("click", function(e) {
var feature = map.forEachFeatureAtPixel(e.pixel, function(feature, layer) {
return feature;
});
if (feature) {
popup.setPosition(e.coordinate);
$(element).attr('data-placement', 'top');
$(element).attr('data-html', true);
$(element).attr('data-original-title', 'This is title');
$(element).attr('data-content', feature.get('name'));
$(element).popover('show');
img_src = feature.get('img_src')
console.log(img_src) //you access this variable outside the function containingimg_src
} else {
$(element).popover('destroy');
}
});