如何在 react-leaflet 中更改具体国家的 color/borderColor

Question

我有一张带有伦敦标记的地图。我怎样才能改变英国 color/borders?

<MapContainer 
    center={[51.505, -0.09]}
    zoom={5}
    scrollWheelZoom={true}
    style={{width:"100%", height:"100%"}}
    fullscreenControl={true}
    
>
    <TileLayer
        attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
        url={`https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png`}
    />
    
    <Marker position={[51.505, -0.09]}/>

</MapContainer>

Answer 1

首先你需要一个只显示你想要的国家而不是全世界国家的geojson。你可以找到一个 GBR geojson here.

现在要更改边框颜色，可以通过将 fillColor 定义为 transparent 并在 GeoJSON 的样式属性上指定您想要的 color 来轻松实现组件。

function style(feature) {
    return {
      fillColor: "transparent",
      weight: 2,
      opacity: 1,
      color: "red", //Outline color
      fillOpacity: 1
    };
  }

{geoJSON && <GeoJSON data={geoJSON} style={style} />}

Demo

如何在 react-leaflet 中更改具体国家的 color/borderColor

How to change color/borderColor of concrete country in react-leaflet

leaflet

reactjs

react-leaflet