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

Question

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

我使用这个函数来创建包含所有功能的外部 map 菜单:

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

然后当用户点击这些选项中的任何一个时，调用此函数:

        function showMenuPopup(xx, yy, theID){
            var myPixel = map.getPixelFromCoordinate([xx, yy]);
            var elNombre = "";
            var laDescripcion = "";
            map.forEachFeatureAtPixel(myPixel, function(feature, layer) {
                if (feature.get('ID') == theID){
                    elNombre = feature.get('name');
                    laDescripcion = feature.get('description');
                }
            });

            popupTitle.innerHTML = elNombre;
            popupContent.innerHTML = laDescripcion;
            overlay.setPosition([xx,yy]);
        }

这在某些情况下有效，但是，当所选要素在当前 map View 之外时， map 重新定位成功(overlay.setPosition([xx,yy]);)，弹出窗口显示，但是弹出窗口为空。如果当用户从左侧菜单中单击时该功能可见，则弹出窗口会正确显示。

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

我尝试使用“moveend (ol.MapEvent)”来解决此问题，因此在 map 重新定位后加载了弹出窗口，但它对我不起作用。 moveend 事件是在 map 开始使用 overlay.setPosition([xx,yy]) 移动之前调用的，我一直没能找到其他一些我可以使用的“重定位后”事件。

我已经为此苦苦挣扎了很多天，所以非常感谢任何帮助。

问候!!

Answer 1

问题是当前 map View 之外的要素不是“AtPixel”，因此您无法使用 map.forEachFeatureAtPixel 捕获它们。

我建议您避免将坐标传递给 showMenuPopup:您只需要功能 ID，然后就可以在 showMenuPopup 中检索功能的坐标。

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