将带有 API 的数据添加到我用于传单地图的globe.gl

问题描述

我是新手，想学习 JavaScript。我用带有 API 数据的传单制作了一张 covid 世界地图。我想将相同的数据应用到globe.gl。

您能告诉我如何将我用于传单地图的相同 statesData 应用到 3d 地球吗？

我使用此统计数据并编辑了一些国家/地区名称以与 API 数据匹配。 https://datahub.io/core/geo-countries

例如，这是globe.gl 代码的数据提取部分。

const getVal = feat => feat.properties.GDP_MD_EST / Math.max(1e5,feat.properties.POP_EST);

fetch('https://raw.githubusercontent.com/vasturiano/globe.gl/master/example/datasets/ne_110m_admin_0_countries.geojson').then(res => res.json()).then(countries =>
{
  const maxVal = Math.max(...countries.features.map(getVal));
  colorScale.domain([0,maxVal]);

这是传单地图上的代码。我想将这些数据用于上面的globe.gl。

var geojson = L.geoJson(statesData).addTo(map);

let covid;

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

// let geo = L.geoJson(statesData,{style: style}).addTo(map);
let geo = L.geoJson(statesData,{
        style: style,onEachFeature: onEachFeature
}).addTo(map);

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);
    // geojson.addData(statesData);
};

非常感谢您的帮助。

解决方法

我可以通过向下面的示例 JSON 添加 API 数据来解决

window.onload = function() {
  var url = 'https://disease.sh/v3/covid-19/countries';
  fetch(url)
  .then(function (data) {
    return data.json();
  })
  .then(function (cData) {
    makeMap(cData);
  });
};

function makeMap(cData){
  const colorScale = d3.scaleSequentialSqrt(d3.interpolateYlOrRd);
  const getVal = feat => feat.properties.GDP_MD_EST / Math.max(1e5,feat.properties.POP_EST);
  
  fetch('https://raw.githubusercontent.com/vasturiano/globe.gl/master/example/datasets/ne_110m_admin_0_countries.geojson').then(res => res.json()).then(countries =>
  {
    const maxVal = Math.max(...countries.features.map(getVal));
    colorScale.domain([0,maxVal]);