0

我有 2 个带有 JSON 数据的数据源。一个是静态文件，包含这样的国家边界：

静态文件

var worldboundaries = {"type":"FeatureCollection","features":

[{"type":"Feature","id":"ALB","properties":{"name":"Albania"},"geometry":{"type":"Polygon","coordinates":[[[20.590247,41.855404],[20.463175,41.515089],[20.605182,41.086226],[21.02004,40.842727],[20.99999,40.580004],[20.674997,40.435],[20.615,40.110007],[20.150016,39.624998],[19.98,39.694993],[19.960002,39.915006],[19.406082,40.250773],[19.319059,40.72723],[19.40355,41.409566],[19.540027,41.719986],[19.371769,41.877548],[19.304486,42.195745],[19.738051,42.688247],[19.801613,42.500093],[20.0707,42.58863],[20.283755,42.32026],[20.52295,42.21787],[20.590247,41.855404]]]}},

{"type":"Feature","id":"ARE","properties":{"name":"United Arab Emirates"},"geometry":{"type":"Polygon","coordinates":[[[51.579519,24.245497],[51.757441,24.294073],[51.794389,24.019826],[52.577081,24.177439],[53.404007,24.151317],[54.008001,24.121758],[54.693024,24.797892],[55.439025,25.439145],[56.070821,26.055464],[56.261042,25.714606],[56.396847,24.924732],[55.886233,24.920831],[55.804119,24.269604],[55.981214,24.130543],[55.528632,23.933604],[55.525841,23.524869],[55.234489,23.110993],[55.208341,22.70833],[55.006803,22.496948],[52.000733,23.001154],[51.617708,24.014219],[51.579519,24.245497]]]}},

....

一个包含该国家应该使用的填充颜色的密度信息，其中“计数”是我需要的值。这是一个 kimonolabs api，并通过 $AJAX 请求调用：

API 答案

{"name":"myapi","count":51,"frequency":"Daily","version":109,"newdata":true,"lastrunstatus":"success","thisversionstatus":"success","nextrun":"Fri Sep 25 2015 11:29:40 GMT+0000 (UTC)","thisversionrun":"Thu Sep 24 2015 11:29:40 GMT+0000 (UTC)",

"results":

{"myapi":[{"name":{"href":"http://www.somelink.com","text":"Albania"},"count":"1","index":1,"url":"http://www.somelink.com"},

{"name":{"http://www.somelink.com","text":"United Arab Emirates"},"count":"30","index":2,"url":"http://www.somelink.com"},

...

对于地图，我正在遵循本指南：教程

包含 API 调用的 JS 文件

//Building the map
var map = L.map('map').setView([37.8, -96], 4);

L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=' + mapboxAccessToken, {
    id: 'mapbox.light',
    attribution: ...
}).addTo(map);

//Color function
function getColor(d) {
    return d > 1000 ? '#800026' :
           d > 500  ? '#BD0026' :
           d > 200  ? '#E31A1C' :
           d > 100  ? '#FC4E2A' :
           d > 50   ? '#FD8D3C' :
           d > 20   ? '#FEB24C' :
           d > 10   ? '#FED976' :
                      '#FFEDA0';
}

//Style function
function style(feature) {
    return {
        fillColor: getColor(feature.properties.density),
        weight: 2,
        opacity: 1,
        color: 'white',
        dashArray: '3',
        fillOpacity: 0.7
    };
}

//Load static file
L.geoJson(worldBoundaries, {style: style}).addTo(map);

//AJAX call to API
$.ajax({
    "url":"https://www.kimonolabs.com/api/myapi,
    "crossDomain": true,
    "dataType": "jsonp",
    //Make a call to the Kimono API following the "url" 

    'success': function(response){ 
    //Do some stuff, place some markers

     var collection = response.results.myapi;
     //collection.count is what I need from here

     ......

编辑

为此添加了一个 plunker：http ://plnkr.co/edit/98OiwqYBr7pP478tJAtl?p=preview

getColor(feature.properties.density)本质上是我的问题。Leaflet 正确绘制了国家边界层，但“密度”信息来自 ajax api 调用，不包含在 wordlboundaries 数组中。我如何告诉它查看 api 结果并使用正确国家的“计数”值来适当地为地图着色？如何稍后在另一个函数中访问 ajax 调用中的变量/我是否必须将其中的每个函数都放入 ajax 调用中？Country Border 文件包含世界所有国家，其中 api 请求不包含所有国家。感谢您的想法！

4

1 回答 1

1

在成功使用数据之前，需要解决一些问题。如果您将数据记录到控制台以查看您正在使用的内容，这些将更加清晰。定义边界层后，尝试在 AJAX 成功函数中放置以下内容：

console.log(response);
console.log(loadboundaries);

首先，您将看到 API 以德语返回数据。没有称为字段response.results.beerorigin（正如您的脚本正在寻找的那样），而是一个称为response.results.bierherkunft. 计数数据位于名为response.results.bierherkunft[i].count（其中 i 是 0-52 的对象索引）的字段中，国家名称位于response.results.bierherkunft[i].name.text.

这给我们带来了第二个问题：API 返回的国家名称也是德语，而您的 GeoJSON 文件包含英语的国家名称。因此，如果您想匹配两个文件中的国家/地区，您将需要获取一个包含德语国家名称的 GeoJSON 文件，或者手动翻译 GeoJSON 文件中的名称（或者，也许更好，添加一个新属性，name_de例如保留翻译后的名称，以防您仍然使用这些英文名称）。当然，如果可以选择从英语 API 请求数据，那将是解决该问题的最简单方法。

一旦您拥有相同语言的所有数据，您将需要loadboundaries按名称将啤酒数据与您的图层连接起来。这可以通过onEachFeature在创建层时使用来调用搜索和之间匹配的函数feature.properties.name_de，response.results.bierherkunft[i].name.text然后为计数数据添加新属性来完成。因此，假设您已分配response.results.bierherkunft给collection，它将类似于：

function onEachFeature(feature, layer) {
    feature.properties.density = 0;
    for (var i in collection) {
        if(collection[i].name.text === feature.properties.name_de) {
            feature.properties.density = parseInt(collection[i].count);
        }
    }
}

这parseInt是必要的，因为该count字段存储为文本，并且getColor需要一个数字。可以使用该setStyle方法来应用样式，如下所示：

var loadboundaries = L.geoJson(worldboundaries, {onEachFeature: onEachFeature});

map.on('load', loadboundaries.addTo(map).setStyle(function (feature) {
  return {
    fillColor: getColor(feature.properties.density),
    weight: 2,
    opacity: 1,
    color: 'white',
    dashArray: '3',
    fillOpacity: 0.7
  };
}));

这里有一个工作的笨蛋：

http://embed.plnkr.co/Qh1PKJS0Jxflc0JZ2qt4/preview

于 2015-10-26T22:34:26.500 回答