本文主要是介绍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;
}
这篇关于leaflet知识点:地图窗格panes的应用的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!