Openlayers 3：从多个特征中获取数据

Question

我从docs 中获取示例并添加了另一个功能。单击后，特征数据将显示在弹出窗口中。 我添加了另一个具有不同数据的功能。如果我单击系列中的功能，它将显示我单击的第一个功能的数据。如果我单击一个功能，请单击其他位置，然后单击另一个功能：它按预期工作。

我创建了一个 jsfiddle 来显示这个问题。 （在我的 Firefox 中，只有当我单击地址栏左上角的“盾牌”图标并选择“禁用此页面上的保护”时，地图才会显示。请参阅this question）

使用此示例代码似乎没有采用正确的功能：

// display popup on click
map.on('click', function(evt) {
  var feature = map.forEachFeatureAtPixel(evt.pixel,
      function(feature, layer) {
        return feature;
      });
  if (feature) {
    var geometry = feature.getGeometry();
    var coord = geometry.getCoordinates();
    popup.setPosition(coord);
    $(element).popover({
      'placement': 'top',
      'html': true,
      'content': feature.get('name')
    });
    $(element).popover('show');
  } else {
    $(element).popover('destroy');
  }
});

我的目标是直接一一点击特征，得到正确的数据显示。

编辑： 似乎这不是 OpenLayers 的问题，而是弹出框的问题。当我插入时：

console.log(feature.get('name'));

它会提供正确的数据。

Answer 1

您添加两个相邻的点。彼此如此接近，因此您无法在视觉上掩盖它们。 将您的功能声明更改为：

var iconFeature = new ol.Feature({
  geometry: new ol.geom.Point([0, 0]),
  name: 'Null Island',
  population: 4000,
  rainfall: 500
});

var iconFeature2 = new ol.Feature({
  geometry: new ol.geom.Point([100000, 100000]),//here is the change
  name: 'Null Null Island',
  population: 200,
  rainfall: 100
});

另请注意，地图的默认投影是 EPSG:3857。您尝试传递的坐标似乎在 4326 上。

为了正确起见，您还声明了两次iconStyle，这没有任何区别

更新

您的主要问题来自引导程序popover。要克服这个问题，您需要做一些肮脏的工作，并在每次点击时动态更新内容。使用这段代码来实现它

  $(element).data("bs.popover").options.content= feature.get('name');
  $(element).popover("show");

还有一把小提琴here