将带有 API 的数据添加到传单地图

Question

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

Adding data from URL to a leaflet map

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

你能告诉我应该怎么做才能为所有国家/地区设置颜色吗？

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

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 键上存储为 United States of America 但存储为 USA 在 geojson 上。当它被比较时，它不会为被比较的国家存储正确的值，并且最终会出现在你的三元运算符的最后一个案例中，它将这个颜色 #FFEDA0 分配给国家。还有另一个名为 ISO_A3 的键，它的名称与美国等情况下的 geojson 一致。如果根据案例数分配了正确的颜色，您还应该检查其他案例

将带有 API 的数据添加到传单地图

Adding data with API to a leaflet map

javascript

api

geojson

leaflet