我正在学习 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 © <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
非常感谢任何解决问题的建议:)
答案 0 :(得分: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
键上存储为 美利坚合众国,但在 geojson 上存储为 USA。进行比较时,它不会为比较的国家/地区存储正确的值,最终会出现在三元运算符的最后一种情况下,该运算符将此颜色 #FFEDA0
分配给国家/地区。还有另一个名为 ISO_A3
的键,它具有与美国等情况下的 geojson 一致的正确名称。您还应该检查其他案例是否根据案例数量分配了适当的颜色