Leaflet自定义标注与点位图层的层级管理与交互优化

1. Leaflet自定义标注与点位图层的层级管理基础

在地图应用开发中，标注和点位的层级管理是个看似简单却容易踩坑的问题。我去年接手一个智慧城市项目时，就遇到过标注文字和图标互相"打架"的情况——要么文字把图标盖住导致点击失效，要么图标压住文字影响阅读。经过反复调试，总结出这套层级管理方案。

Leaflet的图层层级本质上是通过CSS的z-index和内置的zIndexOffset共同控制的。这里有个关键点：所有Marker默认会被包裹在leaflet-marker-pane容器内，这个容器的z-index值是600。而自定义标注如果使用DivIcon，实际上是在和整个marker pane竞争层级关系。

实际操作中，我推荐这样初始化基础地图：

javascript复制const map = L.map('map', {
  preferCanvas: true // 对大量标注性能更优
});

对于单个标注的控制，最直接的方案是使用zIndexOffset参数。比如要让文字显示在图标上方：

javascript复制L.marker([28.47, 119.95], {
  icon: L.divIcon({
    html: '<div class="label">丽水市</div>',
    className: 'text-label'
  }),
  zIndexOffset: 1000 // 确保在普通图标上层
}).addTo(map);

对应的CSS需要这样写：

css复制.text-label {
  z-index: 1001 !important; /* 需大于父容器 */
  pointer-events: none; /* 允许点击穿透 */
}

2. 多图层场景下的深度控制策略

当面对几十个甚至上百个标注点时，单纯靠zIndexOffset就力不从心了。去年做省级行政区划项目时，我通过LayerGroup + 动态zIndex的方案解决了这个问题。这里分享两个实用技巧：

技巧一：按数据类型分组管理

javascript复制const cityGroup = L.layerGroup();
const townGroup = L.layerGr