Leaflet中重叠多边形弹窗仅显示大多边形名称的解决咨询

问题原因 #

叠加的小多边形被底层大多边形覆盖，Leaflet默认的点击事件会被先捕获到的底层图层响应，导致上层小多边形的弹窗无法触发。

解决方案 #

1. 先验证小多边形的属性完整性

首先确认小多边形的GeoJSON数据中name属性是否存在且有效，可通过打印日志排查：

function onEachFeature(feature, layer) {
  // 控制台打印所有多边形的name属性，检查小多边形数据是否正常
  console.log('多边形name:', feature.properties.name);
  layer.bindPopup(feature.properties.name);
}

2. 调整图层层级，让小多边形优先响应点击

通过bringToFront()方法将小多边形图层移至最上层，确保点击时优先触发它的事件。可以根据多边形的特定属性（如面积、标记字段）判断是否为小多边形：

function onEachFeature(feature, layer) {
  layer.bindPopup(feature.properties.name);
  
  // 示例：根据自定义属性isSmall判断是否为小多边形，或根据几何坐标数量估算面积
  if (feature.properties.isSmall || feature.geometry.coordinates[0].length < 8) {
    layer.bringToFront();
  }
}

3. 手动处理地图点击事件，获取所有叠加图层

如果需要保留所有多边形的交互能力，可监听地图的点击事件，获取点击位置的所有图层，主动触发最上层的弹窗：

// 先给所有多边形绑定弹窗
function onEachFeature(feature, layer) {
  layer.bindPopup(feature.properties.name);
}

// 监听地图点击事件
map.on('click', function(e) {
  // 获取点击位置的所有图层
  const layersAtPoint = map.layersAt(e.latlng);
  if (layersAtPoint.length > 0) {
    // 取最上层的图层（数组最后一个元素通常是最上层）
    const topLayer = layersAtPoint[layersAtPoint.length - 1];
    // 在点击位置打开弹窗
    topLayer.openPopup(e.latlng);
  }
});

4. 可选：禁用底层多边形的交互（仅需小多边形弹窗时用）

如果不需要大多边形响应点击，可在加载GeoJSON时给大多边形设置interactive: false：

L.geoJSON(yourGeoJsonData, {
  onEachFeature: onEachFeature,
  style: function(feature) {
    // 给大多边形禁用交互
    if (!feature.properties.isSmall) {
      return { interactive: false };
    }
    return {};
  }
}).addTo(map);

内容的提问来源于stack exchange，提问作者wonk