Openlayers - Popover - PullRequest
Новая
       19

Openlayers - Popover

0 голосов
/ 12 июня 2018

У меня возникла следующая проблема, помощь будет оценена.Как получить доступ к объекту «img_src» в «featuresArray» вне функции обратного вызова «function (e)» после нажатия на функцию?Мне нужно передать его в другой файл 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>

1 Ответ

0 голосов
/ 13 июня 2018

На самом деле вы можете объявить переменную вне события щелчка на карте, а затем присвоить ее значение, когда событие щелчка произойдет. 

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