javascript - 将数据从 URL 添加到传单地图
问题描述
我正在尝试将来自 URL 的 covid 数据添加到传单地图。问题是我的地图在数据完全加载之前正在加载和绘制。我有一个 JSON 数据文件,我称之为 statesData。然后,我使用 p5.js loadJSON() 函数从 URL 中获取 covid 数据,并使用另一个函数来格式化该数据。
// GET THE COVID DATA
function setup(){
loadJSON("https://disease.sh/v3/covid-19/states",gotData);
}
function gotData(data){
covid = data;
statesData.features[1].properties.casesPerOneMillion = covid[1].casesPerOneMillion;
// add covid cases to states data
for (let i = 0; i < statesData.features.length; i++) {
for (let j = 0; j < statesData.features.length; j++) {
if (statesData.features[i].properties.name === covid[j].state) {
statesData.features[i].properties.casesPerOneMillion = covid[j].casesPerOneMillion;
}
}
}
};
这是我添加颜色层的方法:
// GET CHLORO COLORS BASED ON CASES PER MIL NUM
function getColor(d) {
return d > 30000 ? '#800026' :
d > 25000 ? '#BD0026' :
d > 20000 ? '#E31A1C' :
d > 15000 ? '#FC4E2A' :
d > 5000 ? '#FD8D3C' :
d > 2000 ? '#FEB24C' :
d > 1000 ? '#FED976' :
'#FFEDA0';
}
// CREATE FUNCTION TO STYLE AND APPLY GET COLOR
function style(feature) {
return {
// apply get color
fillColor: getColor(feature.properties.casesPerOneMillion),
weight: 2,
opacity: 1,
color: 'white',
dashArray: '3',
fillOpacity: 0.7
}
}
// doesn't work
L.geoJson(statesData, {style: style}).addTo(map);
我知道这不是代码的问题,因为这(5000 是我用来确保我的样式代码正常工作的随机数字):
statesData.features[0].properties.casesPerOneMillion = 5000;
它确实是这样工作的。问题是我的地图在数据完成下载/通过格式化它的 gotData() 函数之前加载。我认为显而易见的解决方案是将其L.geoJson(statesData, {style: style}).addTo(map);
放入异步函数中,但我猜传单不允许你这样做?当我尝试时,我总是收到错误“t.addLayer()”不是一个函数......有人知道如何将数据异步添加到传单地图吗?我对 javaScript 很熟悉,但在谈到异步函数、回调等时我还是个新手
解决方案
您不需要对异步代码使用 async/await。默认仍然使用现在有点老派的回调树。所以只要把你的L.geoJson
电话放在gotData
回调里面。
这应该有效。我允许自己将getColor
if-then-else 怪物替换为查找表。只是为了风格点:-)
const colorMap = {
30000: '#800026',
25000: '#BD0026',
20000: '#E31A1C',
15000: '#FC4E2A',
5000: '#FD8D3C',
2000: '#FEB24C',
1000: '#FED976',
};
// GET CHLORO COLORS BASED ON CASES PER MIL NUM
const getColor = (d) => colorMap(d) || '#FFEDA0';
// CREATE FUNCTION TO STYLE AND APPLY GET COLOR
function style(feature) {
return {
// apply get color
fillColor: getColor(feature.properties.casesPerOneMillion),
weight: 2,
opacity: 1,
color: 'white',
dashArray: '3',
fillOpacity: 0.7
}
}
// GET THE COVID DATA
function setup(){
loadJSON("https://disease.sh/v3/covid-19/states", gotData);
}
function gotData(statesData){
covid = statesData;
statesData.features[1].properties.casesPerOneMillion = covid[1].casesPerOneMillion;
// add covid cases to states data
for (let i = 0; i < statesData.features.length; i++) {
for (let j = 0; j < statesData.features.length; j++) {
if (statesData.features[i].properties.name === covid[j].state) {
statesData.features[i].properties.casesPerOneMillion = covid[j].casesPerOneMillion;
}
}
}
// now it should work
L.geoJson(statesData, {style: style});
};
更新:正如 Falke Design 指出的那样,gotData 中还有另一个错误:data
需要statesData
. 我改变了那个。
推荐阅读
- typescript - 如何在 TypeScript 中灵活地组合类?
- vue.js - flatmap 需要额外的加载器
- c# - azure function app 如何处理并行请求
- javascript - 使用 setState 过滤和替换数组状态不起作用
- elixir - 如何在 Phoenix 实时视图中获取静态路由?
- javascript - 带有 lastCol 和 lastRow 的 copyTo 行为异常
- x86 - 在什么情况下会触发基于 L1 IP 的跨步预取器?
- c++ - 下面的多线程堆栈中是否需要延迟删除对象?
- javascript - JavaScript中array.copyWithin的实现是什么
- python - 带有 numpy 数组的交互式 3D 绘图