我的图书馆传单有问题。我有很大的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>
1条答案
按热度按时间pqwbnv8z1#
传单提供css中的大纲样式,而焦点(拖动或点击),你只需要在你的代码中实现这一点: