Angular Leaflet - GeoJson 在图层更改时隐藏

Question

我有一张 2 层的传单地图

第一层

layers: {
    baselayers: {
        osm: {
            name: 'OpenStreetMap',
            url: 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
            type: 'xyz',
            visible : false,
            layerParams: {
                showOnSelector: true
            }
        },
        vplan: {
            name: 'vplan',
            type: 'imageOverlay',
            url: 'img/map.png',
            visible : false,
            bounds: [[config.bottomLeftLat, config.bottomLeftLong], [config.topRightLat, config.topRightLong]],
            layerParams: {
                showOnSelector: true,
                noWrap: false,
                opacity : 0.6
            }
        },
    }
}

如你所见，OSM是openstreetmap，另一个是PNG图片。两个图层都在图层选择器中可用 - OK

我每秒都会发出一个 Http 请求来检索 geoJson 数据。

$scope.geojson = $http.get(...);

当登陆带有地图的页面时，geoJson 显示在打开的街道地图上 - OK

我的问题是，当切换到另一层（PNG 图像）时，geoJson 不再位于该层之上，而是位于后面。设置opacity为0.6后，可以看到后面的geoJson

如何始终将 geoJson 放在每一层的顶部？

Answer 1

如果您使用的是 Leaflet 版本 0.7.7（或更低版本），则所有矢量图层（通常来自 GeoJSON 数据，点除外）都分组在一个 SVG 容器中。

该 SVG 容器是 Overlay Pane 中的图像叠加层（PNG 图像）的兄弟。每当您使用图层控件显示图像叠加层时，它都会附加在该窗格的末尾，因此它出现在 SVG 容器上方上方，因此位于 GeoJSON 数据中的所有矢量图层上方.

要强制它在 SVG 容器后面，可以使用 bringToBack() 方法。

要在使用图层控件时触发该方法，您可以在地图 "baselayerchange" 事件上添加侦听器。

如果您使用的是 Leaflet 1.0，您可以为您的图像叠加层（或您的矢量图层）指定您自己的自定义窗格，并通过 zIndex.

指定它们的堆叠顺序

Angular Leaflet - GeoJson 在图层更改时隐藏

Angular Leaflet - GeoJson hidden on layer change

javascript

angularjs

leaflet

angular-leaflet-directive