我正在尝试在获取新数据以映射时清除反应中的传单映射,但我不确定如何处理。我看到了这篇文章,但不确定如何应用。
现在,我有一个函数可以提取已加载的2个geojson中的1个。
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
在初始加载后单击,则传单将新的geojson映射到顶部。如何清除映射信息,以便新映射新的geojson?
我在这里有一个代码沙盒:
https://codesandbox.io/s/leaflet-test-forked-8hm3i?file=/src/Leaf.js:550-573
在Choro
组件外部创建变量。
let savedGeojson = {};
在useEffect内部使其与L.choropleth
实例相等。如果存在,则从地图中删除geojson,否则通过替换上一个保存的来保存新的。
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;
}
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句