Leaflet自定义图标出现次数统计及图例实现技术问询

步骤1：建立图标与统计信息的映射 #

先把你定义的图标和对应的名称、统计数关联起来，方便后续统计：

// 定义图标统计映射，关联图标对象、显示名称和计数
const iconStats = {
  blue: { icon: blueIcon, label: 'Blue', count: 0 },
  green: { icon: greenIcon, label: 'Green', count: 0 },
  yellow: { icon: yellowIcon, label: 'Yellow', count: 0 },
  orange: { icon: orangeIcon, label: 'Orange', count: 0 },
  red: { icon: redIcon, label: 'Red', count: 0 }
};

步骤2：监听Overlay图层的切换事件 #

Leaflet地图会在overlay图层添加/移除时触发overlayadd和overlayremove事件，我们在这两个事件触发时重新统计：

// 监听overlay图层切换事件，触发统计更新
map.on('overlayadd overlayremove', updateIconCountAndLegend);

步骤3：实现统计函数 #

遍历当前所有可见的标记点，匹配图标并统计数量：

function updateIconCountAndLegend() {
  // 重置所有计数为0
  Object.values(iconStats).forEach(item => item.count = 0);

  // 遍历地图上所有可见的Marker
  map.eachLayer(layer => {
    // 判断当前图层是Marker且处于可见状态
    if (layer instanceof L.Marker && layer.options.icon && map.hasLayer(layer)) {
      // 匹配对应的图标统计项
      const matchedStat = Object.values(iconStats).find(item => item.icon === layer.options.icon);
      if (matchedStat) {
        matchedStat.count++;
      }
    }
  });

  // 更新图例内容
  updateLegend();
}

步骤4：创建并更新图例 #

用Leaflet自定义控件创建图例，或者直接在页面中添加容器展示统计结果：

// 创建图例控件
const legend = L.control({ position: 'bottomright' });

legend.onAdd = function(map) {
  const div = L.DomUtil.create('div', 'legend');
  div.id = 'icon-count-legend';
  div.innerHTML = '<h4>施工状态统计</h4>';
  return div;
};

// 添加图例到地图
legend.addTo(map);

// 更新图例内容的函数
function updateLegend() {
  const legendDiv = document.getElementById('icon-count-legend');
  // 生成指定格式的统计文本
  const countText = Object.values(iconStats)
    .map(item => `${item.label} ${item.count}次`)
    .join('、');
  
  // 更新图例内容
  legendDiv.innerHTML = `<h4>施工状态统计</h4><p>${countText}</p>`;
}

优化与样式补充 #

• 如果标记点都属于特定overlay图层，可优化统计逻辑：在overlayadd时统计当前图层内的标记，overlayremove时减去对应数量，提升性能。
• 给图例添加CSS样式优化显示：

.legend {
  background: white;
  padding: 10px;
  border-radius: 5px;
  box-shadow: 0 1px 5px rgba(0,0,0,0.4);
}
.legend h4 {
  margin: 0 0 5px 0;
  font-size: 14px;
}
.legend p {
  margin: 0;
  font-size: 13px;
}

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