React Leaflet GeoJSON Tooltip：如何禁用点击/拖拽时的黑色边框？

问题场景 #

用Leaflet渲染大量JSON数据生成的区域边界，给GeoJSON绑定Tooltip显示区域名称，但点击或拖拽GeoJSON元素时，其周围会出现黑色边框。

原代码实现 #

<MapContainer
        key={key}
        zoomControl={false}
        dragging={true}
        center={mapCenter}
        zoom={mapZoom}
        scrollWheelZoom={true}
        style={{ height: "100%", flex: 1 }}
      >
        <TileLayer
          minZoom={4}
          maxZoom={9}
          attribution=""
          url="http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
        />

{data.map((subRegion) => (
              <GeoJSON
                style={{
                  color: "transparent",
                  fillColor: "#228B22",
                }}
                eventHandlers={{
                  mouseover: function () {
                    this.setStyle({
                      color: "#0fa80f",
                      opacity: 1,
                    });
                  },
                  mouseout: function () {
                    this.setStyle({
                      opacity: 0,
                    });
                  },
                  click: function (el) {
                    setSubRegion(subRegion.name);
                    handleChangeMap(el);
                  },
                }}
                key={subRegion.properties.NAME_1}
                data={subRegion.geometry}
              >
                <Tooltip sticky>
                  {subRegion.name}
                </Tooltip>
              </GeoJSON>
            ))}

</MapContainer>

解决方法 #

这个黑色边框是Leaflet默认的焦点样式（用于无障碍访问），可通过以下方式处理：

方法1：给GeoJSON配置自定义样式移除焦点轮廓 #

直接在GeoJSON的style或focusStyle属性里设置outline: 'none'：

<GeoJSON
  style={{
    color: "transparent",
    fillColor: "#228B22",
    outline: "none" // 移除焦点边框
  }}
  // 或者单独设置focusStyle，优先级更高
  focusStyle={{
    outline: 'none'
  }}
  eventHandlers={/* 原有事件处理逻辑 */}
  key={subRegion.properties.NAME_1}
  data={subRegion.geometry}
>
  <Tooltip sticky>
    {subRegion.name}
  </Tooltip>
</GeoJSON>

方法2：全局CSS批量移除 #

如果所有Leaflet交互元素都不需要这个边框，可添加全局CSS：

.leaflet-interactive:focus {
  outline: none !important;
}

额外优化建议 #

• 原代码中mouseout事件只重置了opacity，建议补充重置color为transparent，避免鼠标移出后边框残留：

mouseout: function () {
  this.setStyle({
    opacity: 0,
    color: "transparent" // 补充这行
  });
}

• 若不想完全移除边框，可通过focusStyle自定义样式，比如：

focusStyle={{
  outline: '2px solid #0fa80f',
  outlineOffset: '2px'
}}

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