Leaflet geojson 不稳定的图层顺序

Question

我遇到了 Leaflet 的情况，我想在地图上显示不同的图层并使用图层控制器在它们之间切换。

我的问题是其中一个图层是 geojson，我需要按特定顺序显示该 geojson 的图层。

我在 geojson 层上使用 bringToFront 和 bringToback 函数。

但是当我使用控制器在不同层之间切换时，顺序丢失了。

这里 fiddle 显示了问题。切换图层，三角形会改变颜色。

问题：有没有办法在切换时保持图层顺序稳定？

Answer 1

您只需在您的 geojson 中重新排序您的功能，即可获得所需的结果，而无需使用 Leaflet 的 bringToBack() 方法。

项目在 geojson.features 数组中的较高位置将导致较高的显示（较高的功能具有较低的位置）。

以下函数会相应地更改顺序。

const moveLayersToBottom = (geojson, featureName) => {
  geojson.features.sort((x, y) => (
    x.properties.name === featureName ? -1 : y.properties.name === featureName ? 1 : 0
  ))
}

moveLayersToBottom(myGeojson, 'zone_1');

这是您的 fiddle，已编辑（我注释掉了您的 fiddle 不必要的代码）：https://jsfiddle.net/br0g962p/

Leaflet geojson 不稳定的图层顺序

Leaflet geojson unstable layer order

leaflet