将数据从 URL 添加到 leaflet map

Question

我正在尝试将来自 URL 的 covid 数据添加到 leaflet map。 问题是我的 map 在数据完全加载之前正在加载和绘制。 我有一个 JSON 数据文件，我称之为 statesData。 然后，我使用 p5.js loadJSON() function 从 URL 和另一个 function 中获取 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;

它确实是这样工作的。 问题是我的 map 在数据下载完成/通过 gotData() function 格式化它之前加载。 我认为显而易见的解决方案是抛出L.geoJson(statesData, {style: style}).addTo(map); 进入异步 function，但我猜 leaflet 不允许你这样做？ 当我尝试时，我总是收到错误“t.addLayer()”不是 function...有人知道如何将数据异步添加到 leaflet Z1D78DC8ED51214E518B5114AE24490？ 我熟悉 javaScript 但在谈到异步函数、回调等时我是新手

Answer 1

您不需要对异步代码使用 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 。 我改变了那个。

Answer 2

您的 function gotData将不起作用，因为您从不循环data ，您循环两次statesData.features.length

您可以通过两种方式做到这一点。

1.加载数据后定义L.geoJSON

function gotData(data) {
    var covid = data;
    // add covid cases to states data
    for (let j = 0; j < data.length; j++) {
        for (let i = 0; i < statesData.features.length; i++) {
            if (statesData.features[i].properties.name === covid[j].state) {
                statesData.features[i].properties.casesPerOneMillion = covid[j].casesPerOneMillion;
                break; // break the loop and go to the next state (outer loop), because you have already found the correct state entry
            }
        }
    }

    L.geoJSON(statesData, {
        style: style
    }).addTo(map);
};

2.之前定义L.geoJSON，只添加加载的数据

var geo = L.geoJSON(null, {
    style: style
}).addTo(map);

function gotData(data) {
    var covid = data;
    // add covid cases to states data
    for (let i = 0; i < data.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;
                break; // break the loop and go to the next state (outer loop), because you have already found the correct state entry
            }
        }
    }

    geo.addData(statesData);
};

Answer 3

在上述答案的帮助下，我确定我最初的问题是我试图定义地理并将其同时添加到 map。 需要定义 geo 并将其添加到 gotData() function 之外的 map。 在 gotData() function 内部，addData() function 解决了这个问题。

 geo = L.geoJson(statesData, {
        style: style,
        onEachFeature: onEachFeature,

    });

// *** GET THE COVID DATA *** //
function setup(){
    loadJSON("https://disease.sh/v3/covid-19/states",gotData);
}

// *** FORMAT THE DATA *** //
// adds casesPerMillion from queried data to states data
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) {
                // add cases per million to statesData
                statesData.features[i].properties.casesPerOneMillion = covid[j].casesPerOneMillion;
                // add tests per million to statesData
                statesData.features[i].properties.testsPerOneMillion = covid[j].testsPerOneMillion;
                break;
            }
        }
    }
    geo.addData(statesData); // another part of the solution - addData function

};

geo.addTo(map);