如何设置Leaflet GeoJSON要素图层的选中填充色与边框色？

你当前的Angular项目中，Leaflet GeoJSON图层默认选中状态为蓝色填充、黄色边框，以下是自定义这些颜色的具体方法，以及相关配置说明：

一、自定义选中样式的实现方式 #

1. 针对单个图层绑定点击事件切换样式 #

在你的onEachFeature方法中，给每个GeoJSON图层绑定点击事件，手动设置选中时的自定义样式，同时保留原始样式用于取消选中时恢复：

private onEachFeature(feature: any, layer: L.Layer) {
  // 保存图层的原始默认样式
  const originalStyle = (layer as L.Path).options.style;

  // 绑定点击事件处理选中状态切换
  layer.on('click', () => {
    // 可选：清除其他图层的选中状态（实现单选效果）
    map.eachLayer((l) => {
      if (l instanceof L.Path && l !== layer) {
        l.setStyle(originalStyle);
      }
    });

    // 设置自定义的选中样式
    (layer as L.Path).setStyle({
      weight: 3, // 边框粗细可按需调整
      color: '#ffcc00', // 自定义选中时的边框色
      fillColor: '#6699ff', // 自定义选中时的填充色
      fillOpacity: 0.7 // 填充透明度可按需调整
    });
  });
}

2. 全局覆盖默认选中样式（影响所有路径图层） #

如果希望所有Leaflet路径类图层（包括GeoJSON、多边形、折线等）都使用统一的自定义选中样式，可以在地图初始化前修改全局配置：

// 全局设置默认高亮/选中样式
L.Path.prototype.options.highlightStyle = {
  color: '#your-custom-border-color',
  fillColor: '#your-custom-fill-color',
  weight: 3,
  fillOpacity: 0.8
};

二、Leaflet相关配置参考 #

Leaflet的样式配置核心参考以下内容：

• L.GeoJSON的style选项：用于定义图层的初始默认样式，支持weight、color、fillColor、fillOpacity等属性，就是你当前代码中已使用的配置项。
• L.Path的setStyle方法：用于动态修改图层样式，选中状态切换的核心就是通过这个方法实现样式替换。
• 图层事件：通过click、mouseover等事件触发样式切换逻辑，实现交互性的选中效果。

所有配置细节可在Leaflet官方文档的L.GeoJSON和L.Path章节中查询。

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