0

JSON データを含む 2 つのデータ ソースを取得しました。1 つは静的ファイルで、次のような国境が含まれています。

静的ファイル

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]]]}},

....

1 つには、この国に使用する必要がある fillColor の密度情報が含まれています。ここで、「count」は必要な値です。これは 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

     ......

編集

このためのプランカーを追加しました: http://plnkr.co/edit/98OiwqYBr7pP478tJAtl?p=preview

getColor(feature.properties.density)本質的に私の問題です。リーフレットは国境レイヤーを正しく描画しますが、「密度」情報は ajax API 呼び出しから取得され、wordlboundaries 配列には含まれません。APIの結果を見て、正しい国の「カウント」値を使用してマップを適切に色付けするように指示するにはどうすればよいですか? 後で別の関数でajax呼び出しから変数にアクセスするにはどうすればよいですか/これからすべての関数をajax呼び出しに入れる必要がありますか? Country Border ファイルには、API リクエストにすべての国が含まれていない世界のすべての国が含まれています。アイデアをありがとう！

4

1 に答える 1