更新氯pleth教程到React -传单v3与功能React组件

Question

我想知道是否有人知道如何更新本教程(https://leafletjs.com/examples/choropleth/)与react-传单v3以及react功能组件的工作。我不能工作的部分是重置GeoJSON风格，当你鼠标离开一个层，以及缩放到图层，每当你点击它。这是我现在的代码(我现在不太担心教程的实际着色部分)。此外，我不太擅长react或JS，所以如果你看到任何不好的做法，请指出给我!谢谢!

import '../App.css';
import caMapData from '../data/caProvince.json'
import mxMapData from '../data/mxStates.json'
import usMapData from '../data/usStates.json'
import {MapContainer, TileLayer, Marker, Popup, GeoJSON} from 'react-leaflet'
function MainMap() {
const geoStyleCA = {
fillColor: 'white',
weight: 2,
opacity: 1,
color: 'red',
dashArray: '3',
fillOpacity: 0.5
}
const geoStyleUS = {
fillColor: 'white',
weight: 2,
opacity: 1,
color: 'blue',
dashArray: '3',
fillOpacity: 0.5
}
const geoStyleMX = {
fillColor: 'white',
weight: 2,
opacity: 1,
color: 'green',
dashArray: '3',
fillOpacity: 0.5
}
const onEachFeature = ((feature, layer) => {
layer.on({
mouseover: highlightFeature,
mouseout: resetHighlight,
click: zoomToFeature
});
})
const highlightFeature = ((e) => {
e.target.bringToFront();
e.target.setStyle({
weight: 5,
color: '#666',
dashArray: '',
fillOpacity: 0.7
});
})
const resetHighlight = ((e) => {
// update this to work with react-leaflet 3 and functional react components
e.target.resetStyle();
})
const zoomToFeature = ((e) => {
// update this to work with react-leaflet 3 and functional react components
e.fitBounds(e.target.getBounds());
})
return(
<MapContainer
center={[44.967243, -103.771556]}
zoom={4}
scrollWheelZoom={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={[44.967243, -103.771556]}>
<Popup>
Middle of US.
</Popup>
</Marker>
<GeoJSON data={caMapData.features} style={geoStyleCA}/>
<GeoJSON data={usMapData.features} style={geoStyleUS} onEachFeature={onEachFeature}/>
<GeoJSON data={mxMapData.features} style={geoStyleMX}/>
</MapContainer>
);
}
export default MainMap;

Answer 1

fitBounds应该在传单地图上调用，而不是在目标上调用:

import { ... useMap } from 'react-leaflet';
const map = useMap();
const zoomToFeature = ((e) => {
// update this to work with react-leaflet 3 and functional react components
map.fitBounds(e.target.getBounds());
})

resetStyle意味着在GeoJSON对象上调用:

const onEachFeature = ((feature, layer) => {
layer.on({
mouseover: highlightFeature,
mouseout: () => resetHighlight(layer),
click: zoomToFeature
});
})
const resetHighlight = ((layer) => {
// update this to work with react-leaflet 3 and functional react components
layer.resetStyle();
})

总的来说，你的代码对于JS新手来说是非常干净的。做得很好。

Answer 2

这是用校正的resetStyle()重写的Chloropleth。注意，要使用resetStyle()，必须使用useRef()并将其传递给事件。

import { useRef } from "react";

注意它在使用GeoJSON:

时的用法

const geoJson = useRef();
return (
<GeoJSON
data={states}
onEachFeature={(feature, layer) =>
onEachFeature(geoJson, feature, layer)
}
ref={geoJson}
style={applyStyle}
/>
);

然后在事件函数中:

const onEachFeature = (geoJson, feature, layer) => {
layer.on({
mouseover: () => highlightFeature(feature, layer),
mouseout: () => resetHighlight(geoJson, layer),
});
};

然后注意使用ref来调用resetStyle():

const resetHighlight = (geoJson, layer) => {
geoJson.current.resetStyle(layer);
};
const highlightFeature = (feature, layer) => {
layer.setStyle({
weight: 5,
color: "#666",
dashArray: "",
fillOpacity: 0.7,
});
layer.bringToFront();
};