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;
}
相关推荐
Jinuss12 天前
源码分析之Leaflet核心模块core中的Util工具方法
前端·leaflet
小金子J1 个月前
实现 Leaflet 多类型点位标记与聚合功能的实战经验分享
前端开发·leaflet·地理信息系统(gis)·地图聚合·地图标记
diygwcom2 个月前
leaflet手绘地图实现原理-可视化工具设计手绘地图
leaflet·手绘地图·自定义地图瓦片
duansamve4 个月前
WebGIS地图框架有哪些?
javascript·gis·openlayers·cesium·mapbox·leaflet·webgis
羊子雄起5 个月前
leaflet矢量瓦片vetorgrid显示聚合和图标裁剪显示不全的问题
javascript·leaflet·vectorgrid·显示不全
ikgade6 个月前
Leaflet 接入天地图服务
javascript·html·leaflet·天地图
Q行天下6 个月前
leaflet加载GeoServer的WMS地图服务.md
wms·geoserver·leaflet
Modify_QmQ7 个月前
leaflet【十】实时增加轨迹点轨迹回放效果实现
vue3·leaflet·轨迹回放·实时增加轨迹
小纯洁w9 个月前
Uniapp 使用 Leaflet
uni-app·leaflet
Modify_QmQ9 个月前
Leaflet【六】绘制交互图形、测量、经纬度展示
gis·vue3·leaflet·地图交互·距离测量、面积测量