我正在使用允许订单决策的界面组织几个层。例如我有 3 层：
我可以使用 zIndex 属性订购 WMS 图层。然而，Geojson 层也无法适应这些。
Leaflet.Pane 概念 + 自定义窗格是我尝试过的，这有助于将自定义图层移动到让我们说一切。但是在这个自定义窗格中，我无法为这个 Geojson (svg) 图层分配订单。
在此示例中，tileLayers 和 geoJSON 在同一个自定义窗格中。在此窗格中，我想根据属性（例如 zIndex）切换图层的顺序。但我找不到如何使用 TileLayer <> Geojson 组合来做到这一点。
您的问题是您试图在图层上设置 zIndex，而不是它们所属的窗格。您需要在窗格本身上设置 zIndex。在香草传单中：
map.createPane("top");
map.getPane("top").style.zIndex = "380";
map.createPane("middle");
map.getPane("middle").style.zIndex = "360";
map.createPane("bottom");
map.getPane("bottom").style.zIndex = "340";
var positron = L.tileLayer(
"https://{s}.basemaps.cartocdn.com/light_nolabels/{z}/{x}/{y}.png",
{
pane: "bottom",
}
).addTo(map);
var geojson = L.geoJson(euCountries, { pane: "middle"}).addTo(map);
var positronLabels = L.tileLayer(
"https://{s}.basemaps.cartocdn.com/light_only_labels/{z}/{x}/{y}.png",
{
pane: "top"
}
).addTo(map);
这在 react-leaflet 中更优雅一些，您可以在其中将各个层包装在Pane组件中：
const Map = (props) => {
return (
<MapContainer
doubleClickZoom={false}
id="mapId"
zoom={4}
center={[47.040182144806664, 9.667968750000002]}
>
<Pane name="top" style={{ zIndex: 380 }}>
<TileLayer
url="https://{s}.basemaps.cartocdn.com/light_only_labels/{z}/{x}/{y}.png"
/>
</Pane>
<Pane name="middle" style={{ zIndex: 360 }}>
<GeoJSON data={countries} />
</Pane>
<Pane name="bottom" style={{ zIndex: 340 }}>
<TileLayer
url="https://{s}.basemaps.cartocdn.com/light_nolabels/{z}/{x}/{y}.png"
/>
</Pane>
</MapContainer>
);
};