Javascript 在openlayers 4中使用外部超链接正确显示弹出窗口

我有一个openlayers地图，它加载了几个kml文件，每个文件包含大约120个多边形位置标记。由于它们太多，无法显示每个功能的弹出窗口，因此我必须创建一个外部地图菜单，以便用户可以单击其中任何一个功能并查看其信息/位置

我使用此功能创建外部地图菜单，其中包含所有功能：

        vEnergeticos.getSource().on('change', function(evt){
            var source = evt.target;
            if (source.getState() === 'ready') {
                var energeticos = source.getFeatures();
                for (var i in energeticos) {
                    var figura = energeticos[i].getGeometry().getExtent();
                    var myCenter = ol.extent.getCenter(figura);
                    $("#containerLeft").append("<a href=javascript:showMenuPopup(" + myCenter + "," + energeticos[i].get('ID') + ")>" + energeticos[i].get('name') + "</a><br>");
                }
            }
        });

这在某些情况下有效，但是，当所选功能位于当前地图视图之外时，地图成功重新定位（overlay.setPosition（[xx，yy]），弹出窗口显示，但弹出窗口为空。如果用户从左侧菜单单击时该功能可见，则正确显示弹出窗口

为了清楚起见，假设您看到的是一张地图，您可以看到欧洲的一部分，然后单击位于加拿大的某个项目（使用地图外菜单），您将看到地图在加拿大重新定位，但显示的弹出窗口为空。如果再次单击同一地图外链接或在该位置/缩放视图可见的任何其他功能，则弹出窗口将正确显示

我试图使用“moveend（ol.MapEvent）”来解决这个问题，所以在重新定位地图后加载了弹出窗口，但它对我不起作用。使用overlay.setPosition（[xx，yy]）在映射开始移动之前调用moveend事件，我还没有找到其他可以使用的“重新定位后”事件

我已经为此挣扎了很多天了，所以任何帮助都将非常感激

---

问候

问题在于当前地图视图之外的功能不是“AtPixel”，因此您无法使用map.forEachFeatureAtPixel捕捉它们

我建议您避免将坐标传递给ShowMenuOpup：您只需要特性id，就可以在ShowMenuOpup中检索特性的坐标

$("#containerLeft").append("<a href=javascript:showMenuPopup('" + energeticos[i].getId() + "')>" + energeticos[i].get('name') + "</a><br>");

---

这完全有道理！！由于我的文件被删除，我没有提前回复，4周的编码时间已经过去了。实际上，我正在尝试恢复我的文件，以便测试您所说的内容，否则，我将不得不从scracth开始，我最终肯定会达到这一点。我已经开发了18年，这是我第一次丢失文件（一些病毒攻击了我的计算机）。我有3周前的备份，无论如何，非常感谢你的回答，我会尽快测试！！我的问题是Energetics[i].getId（）返回“未定义”。这些ID是自动生成的吗？还是应该在kml文件中添加ID标记？get（'ID'）还返回“undefined”。（我实际上已经在kml文件中添加了一个ID标记，但是feature.get（'ID'）没有得到它。feature.getId（）应该返回一个由openlayers（请参阅）自动生成的“功能的稳定标识符”，而feature.get（'ID'））应该返回从kml文件读取的ID属性。使用这两种方法，我根本没有获得任何ID，并且在kml文件的每个placemark上都有一个someNumber标记。我所做的是在placemark标记中添加ID，如下所示：so now feature.getId（）返回一个ID，但它是kml文件中指定的ID，所以我对这些ID的行为有点困惑。无论如何，它现在工作得很好，非常感谢！！

$("#containerLeft").append("<a href=javascript:showMenuPopup('" + energeticos[i].getId() + "')>" + energeticos[i].get('name') + "</a><br>");

function showMenuPopup(featureId){
    var feature = vEnergeticos.getSource().getFeatureById(featureId);
    var elNombre = feature.get('name');
    var laDescripcion = feature.get('description');
    var figura = feature.getGeometry().getExtent();
    var myCenter = ol.extent.getCenter(figura);

    popupTitle.innerHTML = elNombre;
    popupContent.innerHTML = laDescripcion;
    overlay.setPosition(myCenter);
}