Openlayers-Popover_Openlayers_Popover_Markers

Openlayers-Popover

openlayers

Openlayers-Popover,openlayers,popover,markers,Openlayers,Popover,Markers,我有以下问题，将不胜感激。单击某个功能后，如何访问回调函数“function（e）”外部的“featuresArray”中的“img_src”对象？我需要将其传递到另一个javascript文件进行渲染！这是感谢信，非常感谢 <!DOCTYPE html> <html> <head> <link rel="stylesheet" href="https://openlayers.org/en/v4.6.4/css

我有以下问题，将不胜感激。单击某个功能后，如何访问回调函数“function（e）”外部的“featuresArray”中的“img_src”对象？我需要将其传递到另一个javascript文件进行渲染！这是感谢信，非常感谢

    <!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>


var openStreetMap=新建ol.layer.Tile({
source:new ol.source.OSM（），
可见：对，
名称：“openstreetmap”
})
var map=新ol.map({
图层：[openStreetMap]，
目标：“地图”，
视图：新ol.view({
中心：Lonlat的其他项目（[80,36]），
缩放：4
})
})
var featuresArray=[]；
变量特性1=新的ol.特性
({
几何：新的ol.geom.Point（ol.proj.transform（[81,36]，'EPSG:4326'，'EPSG:3857'）），
名称：“功能1”，
img_src：“images/img_1.jpg”，
});
变量特性2=新的ol.特性
({
几何：新的ol.geom.Point（ol.proj.transform（[85,39]，'EPSG:4326'，'EPSG:3857'）），
名称：“功能2”，
img_src：“images/img_2.jpg”，
});
功能ray.push（功能1）；
功能ray.push（功能2）；
//样式和图标
var style=新的ol.style.style
({
图片：新ol.style.Icon
({
锚定：[0.5,5]，
src:'https://openlayers.org/en/v4.6.5/examples/data/icon.png',
主播：“分数”，
anchorYUnits:'像素'，
不透明度：0.75，
比例：1
})
});
var pointSource=新的ol.source.Vector
({
特色：特色Sarray
});
var pointMarker=新ol.layer.Vector
({
来源：pointSource，
风格：风格
});
map.addLayer（点标记）
var popup=新ol.Overlay({
元素：元素，
定位：'底部-中心'，
stopEvent:false
});
map.addOverlay（弹出窗口）；
//单击该点时要采取的操作
地图上（“点击”，功能（e）{
var feature=map.forEachFeatureAtPixel（例如，像素，函数（特征，层）{
返回特性；
});
如果（功能）{
弹出。设置位置（e坐标）；
$（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'））；
$（元素）.popover（'show'）；
}
否则{
$（元素）.popover（'destroy'）；
}
});
*****//我需要在这里访问这个img_源，比如var x=feature.get（'img_源'）**并将这个变量x传递给另一个javascript文件！***

实际上，您可以在map click事件之外声明一个变量，然后在click事件发生后分配其值

      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');
        }
      });

请添加更多详细信息。从你对我的回答（删除）的评论中，我显然没有给你预期的答案。那么，你想要实现什么？这是js fiddle var feature1=new ol.Feature（{geometry:new ol.geom.Point（ol.proj.transform（[81,36]，'EPSG:4326'，'EPSG:3857'）），名称：“feature1”，img_src:“images/img_1.jpg”，}）；假设我需要访问img_src：“images/img_1.jpg”，在我单击一个功能之后，我如何在功能之外访问它？我需要将它传递到另一个javascript文件@Zevs：现在还不清楚，你到底想在代码中做什么？@bhumisah在回调函数中（e）我可以调用method feature.get（'img_src'）来获取密钥，但我需要将该密钥传递给另一个javascript文件。如果我在功能之外执行此操作，则无法访问它。如何访问此img_src？