React Leaflet Geojson 工具提示。如何禁用单击或拖动时的黑色边框？

Question

我对图书馆传单有疑问。我有大量 JSON 数据，可以渲染并显示不同地区的边界。

我在 GeoJSon 中添加了一个工具提示，它显示了该地区的名称。但是，当我单击此 GeoJson 元素或

interact(dragging)

时，它会在它们周围显示黑色边框。请看照片。

<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>

Answer 1

Leaflet 提供了 CSS 中的轮廓样式，同时获得焦点（拖动或单击），您只需在代码中实现即可：

 g:focus {
  outline: none;
}

path:focus {
  outline: none;
}

Answer 2

使用这个CSS代码

path.leaflet-interactive{
  outline: none;
}

Answer 3

这里的贡献因素是工具提示元素。如果你使用 Popup 就不会出现这个问题。解决方法是上面写的 css ^^ 或删除/替换 Tooltip