代码之家  ›  专栏  ›  技术社区  ›  Sergio

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

  •  1
  • Sergio  · 技术社区  · 6 年前

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

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

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

    但是,在某些情况下,当选定的要素位于当前地图视图之外时,地图会成功重新定位(覆盖.设置位置([xx,yy]);),弹出窗口显示, 但弹出窗口为空 . 如果用户单击左侧菜单时该功能可见,则弹出窗口将正确显示。

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

    我试图使用“moveend(ol.MapEvent)”来修复此问题,因此在重新定位地图后加载了弹出窗口,但它对我不起作用。在地图开始使用覆盖移动之前,调用moveend事件。setPosition([xx,yy]),我还没有找到其他可以使用的“重新定位后”事件。

    我已经为此挣扎了很多天了,所以任何帮助都将不胜感激。

    当做

    1 回复  |  直到 6 年前
        1
  •  2
  •   fradal83    6 年前

    问题是,当前地图视图之外的要素不是“AtPixel”,因此您无法通过地图捕捉到它们。forEachFeatureAtPixel。

    我建议您避免将坐标传递给ShowMenupOpp:您只需要特性id,就可以在ShowMenupOpp中检索特性的坐标。

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