从URL向传单地图添加数据 [英] Adding data from URL to a leaflet map
问题描述
我正在尝试将URL中的covid数据添加到传单地图中.问题是我的地图在数据完全加载之前正在加载和绘制.我有一个称为statesData的JSON数据文件.然后,我使用p5.js loadJSON()函数从URL中获取共影数据,并使用另一个函数对该数据进行格式化.
I am trying to add covid Data from a URL to a leaflet map. The issue is that my map is loading and drawing before the data has fully loaded. I have a file of JSON data which I call statesData. Then, I use the p5.js loadJSON() function to grab covid data from a URL and another function to format that data.
// 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;
}
}
}
};
这是当我检查页面并将其打印到控制台时数据外观的示例:
Here's an example of what the data looks like when I inspect the page and print it to the console:
这是我添加颜色图层的方式:
Here is how I'm adding the color layers:
// 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是一个随机数字,我只是为了确保样式代码能够正常工作):
I know it isn't an issue with the code, because this (5000 being a random num I used just to be sure my style code was working) :
statesData.features[0].properties.casesPerOneMillion = 5000;
它确实可以那样工作.问题是我的地图在数据下载完成之前/已经通过格式化它的getData()函数加载.我认为显而易见的解决方案是将 L.geoJson(statesData,{style:style}).addTo(map);
放入异步函数中,但是我想传单不允许您去做?我总是收到错误"t.addLayer()".当我尝试时不是函数...任何人都知道如何异步向传单地图添加数据吗?我熟悉javaScript,但是回到异步函数,回调等方面还是一个新手.
and it does work that way.
The problem is that my map is loading before the data has finished downloading/has gone through the gotData() function that formats it. I thought the obvious solution would be to throw the L.geoJson(statesData, {style: style}).addTo(map);
into an async function, but I guess leaflet doesn't allow you to do that? I always get the error "t.addLayer()" isn't a function when I try... Anyone know how to asynchronously add data to a leaflet map? I'm familiar with javaScript but am a novice when it comes back to async functions, callbacks, etc
推荐答案
您不需要将async/await用于异步代码.默认设置仍然是使用现在有点老派的回调树.因此,只需将您的 L.geoJson
调用放入 gotData
回调中即可.
You don't need to use async/await for asynchronous code. The default is still to use the, now somewhat old-school, callback tree. So just put your L.geoJson
call inside the gotData
callback.
这应该有效.我已经允许自己将 getColor
if-then-else怪物替换为一个查找表.仅用于样式点:-)
This should work. I've allowed myself to replace the getColor
if-then-else monster into a lookup table. Just for style points :-)
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
.我改变了.
Update: As Falke Design points out, there was another bug in gotData: data
needed to be statesData
. I changed that.
这篇关于从URL向传单地图添加数据的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!