Как очистить карту листовки в реакции, чтобы я мог отображать свежие данные?
Я пытаюсь очистить карту листовки в ответ при получении новых данных для карты, и я не знаю, как к этому подойти. Я видел этот пост, но не знаю, как именно его применить.
Прямо сейчас у меня есть функция, которая извлекает 1 из 2 загруженных геоджсонов.
App.js
//SWAP FILES AS EXAMPLE
fetchData = () => {
//MAP SHOULD CLEAR EVERYTIME NEW DATA IS FETCHED
if (this.state.loaded === 1) {
fetch(
"https://raw.githack.com/datafaust/raw/main/cruise-prototype/hh_2020112300_2020120623_Saturday_02.geojson"
)
.then((response) => response.json())
.then((geojson) => {
this.setState({ geojson, loaded: 2 });
});
} else {
fetch(
"https://raw.githack.com/datafaust/raw/main/cruise-prototype/hh_2020112300_2020120623_Saturday_03.geojson"
)
.then((response) => response.json())
.then((geojson) => {
this.setState({ geojson, loaded: 1 });
});
}
};
Это просто тест для снижения функциональности. Прямо сейчас, если я нажму fetch data button после начальной загрузки, листовка отобразит новый геоджсон сверху. Как мне очистить отображенную информацию, чтобы новый геоджсон отображался свежим?
У меня есть песочница кода здесь:
https://codesandbox.io/s/leaflet-test-forked-8hm3i?file=/src/Leaf.js:550-573
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Создайте переменную вне компонента Choro.
let savedGeojson = {};
Внутри useEffect сделайте его равным экземпляру L.choropleth. Если он существует, удалите геоджсон с карты, иначе сохраните новый, заменив последний сохраненный.
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;
}
Звучит правильно. Честно говоря, для этого конкретного примера я не думал, что этот компонент будет использоваться более одного раза, но в случае, если это будет, хорошо иметь это в виду, поэтому спасибо за указание на это.
Примечание: с одной переменной в области файлов вне компонента React она будет нормально работать только для 1 экземпляра этого компонента. Если его нужно создать более одного раза, вместо этого следует использовать состояние, чтобы у каждого экземпляра была своя собственная ссылка.