使用 API 将数据添加到传单地图

Question

我正在学习 javascript，并尝试使用 Leaflet 地图制作 covid 世界地图。我关注了这篇文章和下面的代码。

Adding data from URL to a leaflet map

我更改了 API URL 和变量以获取国家/地区 geojson 的数据。我可以在大多数国家/地区添加颜色，但由于某种原因，对于 geojson 上第 230 个国家/地区之后的某些国家/地区，它不起作用。

您能否建议我应该如何为所有国家/地区添加颜色？

我在下面使用这个地理国家 JSON。如果我使用整个国家/地区的数据，地图上不会添加颜色，但如果我删除乍得到津巴布韦之后的国家（它是 JSON fil 上的最后 34 个国家），地图上添加的颜色会正确。

https://datahub.io/core/geo-countries

var map = L.map('map').setView([40, 0], 2);
    L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', {
        maxZoom: 18,
        attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, ' +
            '<a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
            'Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
        id: 'mapbox/light-v9',
        tileSize: 512,
        zoomOffset: -1
      //  layers: [geo,geojson]
    }).addTo(map);
    //"https://corona.lmao.ninja/v3/covid-19/states"

    //  GET THE COVID DATA
    var geojson = L.geoJson(statesData).addTo(map);

    let covid;

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

    // SOLUTION TO LONG TERM PROBLEM
    // this was the solution that allowed me to add the data from URL to the map.
    // The whole time, the problem was trying to do this without assigning it to a variable
    let geo = L.geoJson(statesData, {style: style}).addTo(map);


    function gotData(data){
        covid = data;
        statesData.features[0].properties.cases = covid[0].cases;

        // 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.ADMIN === covid[j].country) {
                    statesData.features[i].properties.cases = covid[j].cases;
                    break;
                }
            }
        }

        geo.addData(statesData); // another part of the solution - addData function

    };


   function getColor(d) {
       return d > 10000000 ? '#800026' :
               d > 5000000 ? '#BD0026' :
               d > 1000000 ? '#E31A1C' :
               d > 70000 ? '#FC4E2A' :
               d > 50000 ? '#FD8D3C' :
               d > 30000 ? '#FEB24C' :
               d > 10000 ? '#FED976' :
                           '#FFEDA0';
     }

    // CREATE FUNCTION TO STYLE AND APPLY GET COLOR
    function style(feature) {
        return {
            // apply get color
            fillColor: getColor(feature.properties.cases),
            weight: 2,
            opacity: 1,
            color: 'white',
            dashArray: '3',
            fillOpacity: 0.7
        }
      }
      for(let i = 0; i< statesData.features.length;i++){
          console.log(statesData.features[i].properties.cases);
      }

    function highlightFeature(e) {
        var layer = e.target;

        layer.setStyle({
            weight: 5,
            color: '#666',
            dashArray: '',
            fillOpacity: 0.7
        });

        if (!L.Browser.ie && !L.Browser.opera && !L.Browser.edge) {
            layer.bringToFront();
        }
    }

如果我从 geojson 文件中删除了最后 34 个国家/地区，这是一张成功的地图。

https://codepen.io/siam55/pen/MWbLzON

如果我在 geojson 文件中放了一段时间县，这是一张失败的地图。

https://codepen.io/siam55/pen/ZELWQLE

非常感谢任何解决问题的建议:)

Answer 1

如果您记录 statesData.features.length，您将看到长度为 255。如果您记录来自 https://disease.sh/v3/covid-19/countries 的数据长度，您将看到数字为 221。如果您进行数学运算，差异为 34。发生这种情况是因为您在同一个变量上循环两次并使用statesData.features 索引从另一个没有该索引的变量中获取一个项目，因为它的大小更短。

您应该做的是循环遍历data（包含每个国家/地区的案例的数组）和statesData（包含几何图形的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.ADMIN === covid[j].country || statesData.features[i].properties.ISO_A3 === covid[j].country) {
               statesData.features[i].properties.cases = covid[j].cases;
                    break;
            }
        }
    }

  geo.addData(statesData); // another part of the solution - addData function
}

现在，在某些情况下，您可能无法获得正确的结果。例如，在一种情况下，USA 在 ADMIN 键上存储为 Unites States of America，但在 geojson 上存储为 USA。比较时，它不会为比较的国家/地区存储正确的值，并且最终会出现在您的三元运算符的最后一种情况下，该运算符将此颜色 #FFEDA0 分配给该国家/地区。还有另一个名为 ISO_A3 的键，其正确名称与美国等情况下的 geojson 一致。如果根据案例数量分配了正确的颜色，您还应该检查其他案例