javascript - Angular Leaflet - GeoJson 隐藏在图层更改上

Question

我有一个 2 层的传单 map

第一层

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 图像。两个图层都可以在图层选择器中使用 - 确定

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

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

当登陆带有 map 的页面时，geoJson 显示在开放的街道 map 上 - 确定

我的问题是，当切换到另一层(PNG 图像)时，geoJson 不再位于该层上方，而是位于后面。将不透明度设置为0.6后，我可以看到后面的geoJson。

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

Answer 1

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

该 SVG 容器是 Overlay Pane 中的图像叠加(PNG 图像)的同级容器。 。每当您使用图层控件显示图像叠加时，它都会附加到该 Pane 的末尾，因此它出现在 SVG 容器的上方，因此位于 GeoJSON 数据的所有矢量图层之上。

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

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

如果您使用的是 Leaflet 1.0，您可以为图像叠加(或矢量图层)指定您自己的自定义 Pane ，并通过 zIndex 指定它们的堆叠顺序。