Question

任何人都可以告诉我如何在openlayers 3 map中显示所有标记的弹出窗口。我搜索了很多网站，但无法得到任何答案，请有人知道，然后帮助我

var map = new ol.Map({
  layers: [
    new ol.layer.Tile({
      source: new ol.source.TileJSON({
        url: 'https://api.tiles.mapbox.com/v3/mapbox.geography-class.json?secure',
        crossOrigin: 'anonymous'
      })
    })
  ],
  overlays: [overlay],
  target: 'map',
  view: new ol.View({
    center: ol.proj.fromLonLat([0, 50]),
    zoom: 2
  })
});

var vectorSource = new ol.source.Vector({
    features: [
               new ol.Feature({
                 geometry: new ol.geom.Point(ol.proj.fromLonLat([16.37, 48.2])),
                 name: 'London'
               }),
               new ol.Feature({
                 geometry: new ol.geom.Point(ol.proj.fromLonLat([-0.13, 51.51])),
                 name: 'NY'
               }),
               new ol.Feature({
                   geometry: new ol.geom.Point(ol.proj.fromLonLat([30.69, 55.21])),
                   name: 'Paris'
                 })
             ]
           });

var markers = new ol.layer.Vector({
  source: vectorSource,
  style: new ol.style.Style({
    image: new ol.style.Icon({
      src: '//openlayers.org/en/v3.12.1/examples/data/icon.png',
      anchor: [0.5, 1]
    })
  })
});
map.addLayer(markers);

function showpopup(){

     // For showing popups on Map

     var arrayData = [1];
     showInfoOnMap(map,arrayData,1);

     function showInfoOnMap(map, arrayData, flag) {
         var flag = 'show';
      var extent = map.getView().calculateExtent(map.getSize());
      var id = 0;
      var element = document.getElementById('popup');
      var popup = new ol.Overlay({
          element: element,
          positioning: 'center'
         });

      map.addOverlay(popup);
      if (arrayData != null && arrayData.length > 0) {
       arrayData.forEach(function(vectorSource) {
        /* logMessage('vectorSource >> ' + vectorSource); */
        if (vectorSource != null && markers.getSource().getFeatures() != null && markers.getSource().getFeatures().length > 0) { 
            markers.getSource().forEachFeatureInExtent(extent, function(feature) {
         /*  logMessage('vectorSource feature >> ' + feature); */
         console.log("vectorSource feature >> " + markers.getSource().getFeatures());
            if (flag == 'show') { 
           var geometry = feature.getGeometry();
           var coord = geometry.getCoordinates();
           popup.setPosition(coord);
           /* var prop;
           var vyprop = ""; */
           $(element).popover({
            'position': 'center',
            'placement': 'top',
            'template':'<div class="popover"><div class="popover-content"></div></div>',
            'html': true,
            'content': function() {
                var string = [];

                var st = feature.U.name;
                if (st != null && st.length > 0) {

                 var arrayLength = 1;
                 string = "<table>";

                   string += '<tr><td>' + st + "</table>";
                }
                return string;
               }
           });
           $(element).popover('show');
           } else {
           $(element).popover('destroy'); 
           } 
         });
         } 
       });
      }
     };

}

我在我的文件中使用了这段代码，但它只显示所有标记上的一个弹出窗口，请有人告诉我如何同时显示所有标记弹出窗口。

Answer 1

我不确定你想要在弹出窗口中显示什么，但我可能会尝试这种方法。这扩展了ol.Overlay类，允许您获取地图对象并附加一个侦听器，您可以使用该侦听器来抓取单击的功能。这是你想要完成的吗？

function PopupOverlay() {
    var element = document.createElement('div');
  $(element).popover({
    template: '<div class="popover"><div class="popover-content"></div></div>',
    placement: 'top',
    position: 'center',
    html: true
  });

  ol.Overlay.call(this, {
    element: element
  });
}
ol.inherits(PopupOverlay, ol.Overlay);

PopupOverlay.prototype.setMap = function (map) {
  var self = this;
  map.on('singleclick', function (e) {
    map.forEachFeatureAtPixel(e.pixel, function (feature, layer) {
      ol.Overlay.prototype.setPosition.call(self, feature.getGeometry().getCoordinates());
      var el = self.getElement();
      $(el).data('bs.popover').options.content = function () {

        // EDIT THE POPOVER CONTENT
        return feature.get('name');
      };
      $(el).popover('show');
    });
  });
  ol.Overlay.prototype.setMap.call(this, map);
};

Check out this example

所以在你的评论之后，我看到你现在要做的事情。我想说你想采用相同的基本方法，创建一个覆盖ol.Overlay的类，但这次只是遍历所有功能，为每个功能创建一个叠加层。

This Updated Example

function PopoverOverlay(feature, map) {
    this.feature = feature;

    var element = document.createElement('div');
    $(element).popover({
        template: '<div class="popover"><div class="popover-content"></div></div>',
        placement: 'top',
        position: 'center',
        html: true
    });

    ol.Overlay.call(this, {
        element: element,
        map: map
    });
};
ol.inherits(PopoverOverlay, ol.Overlay);

PopoverOverlay.prototype.togglePopover = function () {
    ol.Overlay.prototype.setPosition.call(this, this.feature.getGeometry().getCoordinates());
    var self = this;
    var el = this.getElement();
    $(el).data('bs.popover').options.content = function () {

        // EDIT THE POPOVER CONTENT
        return self.feature.get('name');
    };
    $(el).popover('toggle');
};

// create overlays for each feature
var overlays = (function createOverlays () {
    var popupOverlays = [];
    vectorSource.getFeatures().forEach(function (feature) {
        var overlay = new PopoverOverlay(feature, map);
        popupOverlays.push(overlay);
        map.addOverlay(overlay);
    });
    return popupOverlays;
})();

// on click, toggle the popovers
map.on('singleclick', function () {
    for(var i in overlays) {
        overlays[i].togglePopover();
    }
});

现在，当您点击地图上的任意位置时，它应调用togglePopover方法并切换单个元素上的弹出窗口。

如何在openlayers 3 map中动态显示多个弹出窗口

1 个答案: