Openlayers - 弹出框答案

【问题标题】：Openlayers - PopoverOpenlayers - 弹出框
【发布时间】：2018-11-22 02:09:39
【问题描述】：

我遇到以下问题，我们将不胜感激。单击功能后，如何在回调函数“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>

【问题讨论】：

请添加更多详细信息。我显然没有从您对我的回答的评论中给您预期的答案（已删除）。那么，你想达到什么目标？目前还不清楚，无法进一步帮助您。
这里是 js fiddle jsfiddle.net/5fpc7otg 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：目前还不清楚，你到底想在你的代码中做什么？
@BhumiShah 在回调函数(e) 内部，我可以调用方法 feature.get('img_src') 来获取密钥，但我需要将此密钥传递给另一个 javascript 文件。如果我在函数之外执行它，我将无法访问它。如何访问这个 img_src？

标签： openlayers popover markers

【解决方案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');
        }
      });

【讨论】：