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

谁能告诉我如何在openlayers 3地图中显示所有标记的弹出窗口。我搜索了许多网站，但没有得到任何答案。请任何人知道这一点，然后帮助我

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

}

var-map=新的ol.map({
图层：[
新ol.layer.Tile({
来源：new ol.source.TileJSON({
网址：'https://api.tiles.mapbox.com/v3/mapbox.geography-class.json?secure',
交叉源：“匿名”
})
})
],
套印格式：[套印格式]，
目标：“地图”，
视图：新ol.view({
中心：Lonlat的其他项目（[0,50]），
缩放：2
})
});
var vectorSource=新的ol.source.Vector({
特点：[
新ol.功能({
几何：新的ol.geom.Point（LONLAT（[16.37,48.2]），ol.proj，
姓名：“伦敦”
}),
新ol.功能({
几何：新的ol.geom.Point（LONLAT（[-0.13,51.51]），ol.proj，
姓名：“纽约”
}),
新ol.功能({
几何：新的ol.geom.Point（LONLAT（[30.69,55.21]），ol.proj，
名字：“巴黎”
})
]
});
var markers=新的ol.layer.Vector({
来源：矢量源，
风格：新的ol风格({
图片：新ol.style.Icon({
src:'//openlayers.org/en/v3.12.1/examples/data/icon.png'，
主播：[0.5,1]
})
})
});
添加图层（标记）；
函数showpopup（）{
//用于在地图上显示弹出窗口
var arrayData=[1]；
showInfoOnMap（地图，arrayData，1）；
函数showInfoOnMap（地图、阵列数据、标志）{
var标志='show'；
var extent=map.getView（）.calculateExtent（map.getSize（））；
var-id=0；
var元素=document.getElementById（'popup'）；
var popup=新ol.Overlay({
元素：元素，
定位：“中心”
});
map.addOverlay（弹出窗口）；
如果（arrayData！=null&&arrayData.length>0）{
forEach（函数（矢量源）{
/*日志消息（'vectorSource>>'+vectorSource）*/
如果（vectorSource！=null&&markers.getSource（）.getFeatures（）！=null&&markers.getSource（）.getFeatures（）.length>0）{
markers.getSource（）.ForEachFeatureInEvent（范围、函数（特征））{
/*logMessage（'vectorSource功能>>'+功能）*/
log（“vectorSource功能>>”+markers.getSource（）.getFeatures（））；
如果（标志=='show'）{
var geometry=feature.getGeometry（）；
var coord=geometry.getCoordinates（）；
弹出设置位置（坐标）；
/*var-prop；
var vyprop=“”*/
$（元素）.popover({
“位置”：“中心”，
“位置”：“顶部”，
“模板”：“，
“html”：是，
“内容”：函数（）{
var字符串=[]；
var st=功能单元名称；
如果（st！=null&&st.length>0）{
var arrayLength=1；
字符串=”；
字符串+=''+st+''；
}
返回字符串；
}
});
$（元素）.popover（'show'）；
}否则{
$（元素）.popover（'destroy'）；
} 
});
} 
});
}
};
}

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

---

我不确定您要在弹出窗口中显示什么，但我可能会尝试这种方法。这扩展了

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

---

现在，当您单击地图上的任何位置时，它应该调用

togglepoover

方法，并在单个元素上切换poover。

您能提供一些有关您尝试执行的操作的详细信息吗？我已经编写了代码，但它不起作用，代码在上面：@TimhI想在单击一个按钮时显示所有标记弹出窗口。它是显示在标记点击标记弹出，但我想在一个按钮点击所有弹出窗口。

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