[英]Style GeoJSON in react leaflet map library
我已经在我的反应项目https://react-leaflet.js.org/en/ 中实现了传单地图库,并实现了如下所示的 geojson 地图组件
class MapContainer extends React.Component {
state = {
greenIcon: {
lat: 8.3114,
lng: 80.4037
},
zoom: 8
};
grenIcon = L.icon({
iconUrl: leafGreen,
iconSize: [24, 24], // size of the icon
//iconAnchor: [22, 94], // point of the icon which will correspond to marker's location
popupAnchor: [-3, -16]
});
render() {
const positionGreenIcon = [
this.state.greenIcon.lat,
this.state.greenIcon.lng
];
return (
<div className="mapdata-container">
<Map className="map" style={{height:'100%',width:'100%'}} center={positionGreenIcon} zoom={this.state.zoom}>
<GeoJSON data={geo}/>
<Marker position={positionGreenIcon} icon={this.grenIcon}>
<Popup>I am a green leaf</Popup>
</Marker>
</Map>
</div>
);
}
}
export default MapContainer;
看起来像这样
我想用不同的颜色为每个省着色,并且在如何做到这一点的文档中没有很多。
这是我使用的 geojson 文件。 https://raw.githubusercontent.com/thejeshgn/srilanka/master/electoral_districts_map/LKA_electrol_districts.geojson
我如何用不同的颜色fill
每个省。
您可以在 GeoJSON 包装器上使用style
prop 轻松实现这一点。 创建一个接受特征作为参数的样式方法。 然后在 fillColor 属性中使用属性:{electoralDistrict} 来标识该地区并返回所需的颜色:这是一个示例:
class MapContainer extends React.Component {
state = {
greenIcon: {
lat: 8.3114,
lng: 80.4037
},
zoom: 8
};
grenIcon = L.icon({
iconSize: [24, 24], // size of the icon
//iconAnchor: [22, 94], // point of the icon which will correspond to marker's location
popupAnchor: [-3, -16],
iconUrl: leafGreen
});
giveColor = district => {
switch (district) {
case "Matara":
return "red";
case "Polonnaruwa":
return "brown";
case "Ampara":
return "purple";
default:
return "white";
}
};
style = feature => {
const {
properties: { electoralDistrict }
} = feature;
return {
fillColor: this.giveColor(electoralDistrict),
weight: 0.3,
opacity: 1,
color: "purple",
dashArray: "3",
fillOpacity: 0.5
};
};
render() {
const positionGreenIcon = [
this.state.greenIcon.lat,
this.state.greenIcon.lng
];
return (
<div className='mapdata-container'>
<Map
className='map'
style={{ height: "100vh", width: "100%" }}
center={positionGreenIcon}
zoom={this.state.zoom}
>
<GeoJSON data={geo} style={this.style} />
<Marker position={positionGreenIcon} icon={this.grenIcon}>
<Popup>I am a green leaf</Popup>
</Marker>
</Map>
</div>
);
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.