reactjs - 如何在 react 传单中更改具体国家/地区的颜色/边框颜色

Question

我有一张带有伦敦标记的 map 。如何更改英国的颜色/边框？

<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 并在样式上指定所需的 color 来轻松实现GeoJSON 组件的属性。

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

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

Demo