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

一,需求背景

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


二,遇到问题

由下图可知航线图层所在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;
}
相关推荐
Modify_QmQ12 天前
leaflet【十一】地图瓦片路径可视化
gis·vue3·leaflet·leafletmapblock
kongxx2 个月前
在Angular中使用Leaflet构建地图应用
leaflet
Jinuss2 个月前
源码分析之Leaflet中Marker
前端·leaflet
Jinuss2 个月前
源码分析之Leaflet中的LayerGroup
前端·leaflet
Jinuss3 个月前
源码分析之Leaflet中control模块Zoom类实现原理
前端·leaflet
Jinuss3 个月前
源码分析之Leaflet图层控制控件Control.Layers实现原理
源码·leaflet
Jinuss4 个月前
源码分析之Leaflet核心模块core中的Util工具方法
前端·leaflet
小金子J5 个月前
实现 Leaflet 多类型点位标记与聚合功能的实战经验分享
前端开发·leaflet·地理信息系统(gis)·地图聚合·地图标记
diygwcom5 个月前
leaflet手绘地图实现原理-可视化工具设计手绘地图
leaflet·手绘地图·自定义地图瓦片
duansamve8 个月前
WebGIS地图框架有哪些?
javascript·gis·openlayers·cesium·mapbox·leaflet·webgis