Leaflet如何实现鼠标悬停图例时高亮相同属性的要素

实现步骤 #

字符串类型的属性匹配逻辑比数值型更简单，无需做区间判断，直接做全等匹配即可，完整实现如下：

1. 先添加高亮样式

在你的CSS文件中加入多边形高亮的自定义样式：

.highlighted-polygon {
  stroke: #ffeb3b !important; /* 高亮边框色可自定义 */
  weight: 3 !important;
  fillOpacity: 0.7 !important;
}

2. 构建分类图层索引

加载GeoJSON时提前按BROAD_CATEGORY分类存储所有多边形图层，避免每次悬停遍历全量图层提升性能：

// 全局存储按分类索引的图层集合
const layersByCategory = {};

// 加载GeoJSON的逻辑
const geoJsonLayer = L.geoJSON(你的GeoJSON数据变量, {
  // 你原来的样式配置保留
  style: function(feature) {
    return {
      fillColor: getColor(feature.properties.BROAD_CATEGORY),
      // 其他原有样式配置
    }
  },
  onEachFeature: function(feature, layer) {
    const cate = feature.properties.BROAD_CATEGORY;
    // 把当前图层存入对应分类的数组
    if (!layersByCategory[cate]) layersByCategory[cate] = [];
    layersByCategory[cate].push(layer);
    // 你原来的其他onEachFeature逻辑保留即可
  }
}).addTo(map);

3. 修改图例代码，绑定悬停事件

修改原有图例生成逻辑，给每个分类项绑定鼠标悬停、移出事件：

const legend = L.control({position: 'bottomright'});
legend.onAdd = function (map) {
  const div = L.DomUtil.create('div', 'info legend');
  const categories = ['Aboriginal clan','Action','Body part','Colour','Function of place','Historic event or place','Industry','Local estate','Nature','Other local places','Person','Place outside Australia','Portmanteau','Ship','Unknown'];
  
  // 先加标题
  div.innerHTML = '<strong>Language(s) of Origin</strong><br>';

  // 生成每个图例项
  categories.forEach(cate => {
    const item = L.DomUtil.create('div', 'legend-item', div);
    // 阻止图例上的鼠标事件冒泡到地图
    L.DomEvent.disableClickPropagation(item);
    L.DomEvent.disableScrollPropagation(item);
    
    // 拼接图例项内容
    item.innerHTML = `<i class="circle" style="background:${getColor(cate)}"></i> ${cate}`;

    // 绑定悬停高亮事件
    L.DomEvent.on(item, 'mouseover', () => {
      // 匹配对应分类的所有图层加高亮
      layersByCategory[cate]?.forEach(layer => {
        layer._path?.classList.add('highlighted-polygon');
      })
    })

    // 绑定移出取消高亮事件
    L.DomEvent.on(item, 'mouseout', () => {
      layersByCategory[cate]?.forEach(layer => {
        layer._path?.classList.remove('highlighted-polygon');
      })
    })
  })
  return div;
};
legend.addTo(map);

如果你的Leaflet版本不支持直接操作_path的class，也可以用setStyle方法实现高亮，替换事件里的逻辑即可：

// mouseover逻辑替换为
layersByCategory[cate]?.forEach(layer => {
  layer.setStyle({
    stroke: '#ffeb3b',
    weight: 3,
    fillOpacity: 0.7
  })
})

// mouseout逻辑替换为
layersByCategory[cate]?.forEach(layer => {
  // 重置为原有样式
  layer.setStyle({
    stroke: '#3388ff', // 你原来的边框色
    weight: 1,
    fillOpacity: 0.5,
    fillColor: getColor(cate)
  })
})

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