如何在反应传单中更改具体国家的颜色/边界颜色

问题描述

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

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

解决方法

首先，您需要一个只显示您想要的国家而不是整个世界国家的 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