TileLayer、Geojson 之间的自定义窗格中的 Leaflet zIndex

Question

我正在用一个允许顺序决定的界面来组织多个层。例如我有 3 层：

WMS 图层，顺序：3
Geojson 层：顺序 2
WMS 图层，顺序：1

我可以使用 zIndex 属性订购 WMS 图层。然而，Geojson 层也无法适应它们。

Leaflet.Pane 概念 + 自定义窗格是我尝试过的东西，这有助于将自定义层移动到可以说的一切之上。但是在这个自定义窗格中，我无法为这个 Geojson (svg) 层分配订单。

在此示例中，tileLayers 和 geoJSON 位于同一自定义窗格中。在此窗格内，我想根据属性（例如 zIndex）切换图层的顺序。但是我找不到如何使用 TileLayer <> Geojson 组合来做到这一点。

https://codesandbox.io/s/leaflet-custom-pane-fw0ue

Answer 1

您的问题是您试图在图层上设置 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);

Working codesandbox

这在 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>
  );
};

TileLayer、Geojson 之间的自定义窗格中的 Leaflet zIndex

Leaflet zIndex in custom pane between TileLayer, Geojson

leaflet

react-leaflet

react-leaflet-v3

Working codesandbox

Working codesandbox