Create a variable outside Choro
component.
let savedGeojson = {};
Inside useEffect make it equal with the L.choropleth
instance. If it exists remove the geojson from the map else save the new one by replacing the last saved.
useEffect(() => {
if (Object.keys(props.geojson).length > 0) {
if (savedGeojson) map.removeLayer(savedGeojson);
savedGeojson = L.choropleth(props.geojson, {
valueProperty: "DIFF", // which property in the features to use
scale: ["white", "red"], // chroma.js scale - include as many as you like
steps: 5, // number of breaks or steps in range
mode: "q", // q for quantile, e for equidistant, k for k-means
//style,
onEachFeature: function (feature, layer) {
layer.bindPopup(
"Total " + feature.properties.DIFF + "<br>" //+
// feature.properties.incidents.toLocaleString() +
// " incidents"
);
}
}).addTo(map);
}
}, [props.geojson]);
return null;
}
Demo
与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…