leaflet知识点：地图窗格panes的应用

news2024/11/23 1:10:39

一，需求背景

地图中存在无人机，停机坪，航线三个图层，需要实现无人机图层显示在最上面，停机坪图层显示在最下面，航线图层显示在中间。

在这里插入图片描述

二，遇到问题

由下图可知航线图层所在overlayPane窗格的z-index层级是低于无人机和停机坪所在markerPane窗格的z-index层级，通过设置Marker标记的zIndexOffset，只能让无人机图层显示在最上面，而航线图层始终会被遮住。

在这里插入图片描述

三，解决方法

通过自定义窗格可以解决这个问题，新建一个名称为plane-stop窗格，将停机坪图层放到这个窗格中，设置这个自定义窗格的css样式z-index值在200和400之间，不能低于200，低于200会被瓦片遮住。

// js
const latlngs = [
  [31.59111111, 120.29],
  [31.59222222, 120.28],
  [31.59333333, 120.29],
];
L.polyline(latlngs, { color: "red" }).addTo(map);
const planeIcon = L.icon({
  iconUrl: planeImg,
  iconSize: [48, 48],
  iconAnchor: [24, 24],
});
L.marker([31.59111111, 120.29], {
  icon: planeIcon,
  zIndexOffset: 1000,
}).addTo(map);

const planeStopPane = map.createPane("plane-stop");
const planeStopIcon = L.icon({
  iconUrl: planeStopImg,
  iconSize: [48, 48],
  iconAnchor: [24, 24],
});
L.marker([31.59111111, 120.29], {
  icon: planeStopIcon,
  pane: planeStopPane,
}).addTo(map);

// css
.leaflet-plane-stop-pane {
  z-index: 300;
}

在这里插入图片描述