如何在Mapbox中將geojson + CSV文件與雜項傳單結合起來以將數據映射為多邊形？

Question

我有兩個文件：1個geojson文件，其中包含我要用於特定國家/地區的國家/地區形狀。 1個csv文件，其中包含我想使用mapbox映射的數據。

我試圖弄清楚如何加入這兩個文件，以便geojson國家/地區信息名稱與我的CSV文件中的國家/地區匹配。 我想使用omnivore將我的csv轉換為json，然后找出如何將數據提取出來以綁定到彈出窗口中。

這里有一個連接兩個geojson文件的示例（一個用於形狀，另一個用於數據）： https ://www.mapbox.com/mapbox.js/example/v1.0.0/choropleth-joined-data-multiple-variables/

但我想使用Omnivore解析我的csv文件，以便可以首先轉換CSV。

我已經設法分別加載我的geojson國家文件和CSV文件，以使其准備好彈出我的圖表，但我不知道如何通過名稱將兩者結合在一起。

這是我分別稱為geojson層的方式：

function popup(feature, layer) {
            if (feature.properties && feature.properties.name) {
            }
        }

        $.ajax({
        dataType: "json",
        url: "countries.geojson",
        success: function(data) {
            $(data.features).each(function(key, data) {
                //transitpipes.addData(data);
        var countries = new L.geoJson(data, {
            onEachFeature: popup,
            style: countriesStyle,
        }).addTo(map);


            });
        }
        }).error(function() {});

        });

這是我要使用CSV數據完成的工作：

var ckeyOrder = []
var csvGrab2 = $.get('countries.csv',function (response) {
    Papa.parse(response, {
        complete: function(results) {
            var cHeaderRow = results.data[0];
            for (var i = 7; i < cHeaderRow.length; i++) {
            ckeyOrder.push(cHeaderRow[i])
        }
    }
    });
})
csvGrab2.done(function (csvString) {
    var countriesLayer = omnivore.csv.parse(csvString)
    countriesLayer.eachLayer(function(marker) {

        var pieChartOptions = {
            title: {
                text: null
            },
            legend: {
                enabled: false
            },
            credits: {
                enabled: false
            },
            exporting: {
                enabled: false
            },
            tooltip: {

            pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>',
                backgroundColor: {
                    linearGradient: [0, 0, 0, 60],
                    stops: [
                        [0, '#FFFFFF'],
                        [1, '#E0E0E0']
                    ]
                },
                borderWidth: 1,
                useHTML: true,
                borderColor: '#AAA'
            },

            plotOptions: {
                pie: {

                    allowPointSelect: true,
                    cursor: 'pointer',
                    connectNulls: false,
                    dataLabels: {
                                        enabled: true,
                                        format: '<b>{point.name}</b>: {point.percentage:.1f} %',
                                        style: {
                                            color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
                                        }
                                    }
                }
            }
        };

         pieChartOptions.tooltip.formatter = function() {
                var y = "" + this.y;
                return '<center>' + y + '</center>';
            };
        var cData = [];
        for (var i = 0; i < ckeyOrder.length; i++) {
           cData.push(parseInt(marker.feature.properties[ckeyOrder[i]]))
        }

        var lastColumn = ckeyOrder.length;
        pieChartOptions.series = [{
            data: cData
        }];
         // HTML content for country pop-up
        var countryContent = '<div id="popup_template">' +
            '<div>' +marker.toGeoJSON().properties.Name +'</div>' +
            '<div><p>'+marker.toGeoJSON().properties.Production+'</p></div>'+

            '<div id="piechart"></div>';
        var ccontainer = $('<div id="popup_template"/>');
        ccontainer.html( '<div>' +marker.toGeoJSON().properties.Name +'</div>' +
            '<div><p>'+marker.toGeoJSON().properties.Production +'</p></div>' +
            '<div id="piechart"></div>');
        // Delegate all event handling for the container itself and its contents to the container
        ccontainer.find('#piechart').highcharts(lineChartOptions);
        marker.bindPopup(ccontainer[0]);

有沒有辦法將我的omnivore解析的CSV代碼加入我的geojson國家，以便我可以以此方式映射CSV數據？

對於這種混合代碼，我的令人難以置信的錯誤嘗試是在這里： https : //jsfiddle.net/t8qsbzs0/

這是我的CSV結構（一行）：

Country,Production,Gas demand,Total imports,of which LNG,Total exports,Total storage capacity,Share of gas in TPES (%),Self sufficiency (%),Electricity and heat,Industry,Residential,Services,Other
France,0.3,44,47.9,7.8,5,12.1,15.1,0.7,16,26,33,18,7

我的countries.geojson文件的結構如下：

{"type":"Feature","properties":{"name":"France","iso_a2":"FR","iso_a3":"FRA","iso_n3":"250"},"geometry":{"type":"MultiPolygon","coordinates":[[[[-52.6,2.5],[-52.9,2.1],[-53.4,2.1],[-53.6,2.3],[-53.8,2.4],[-54.1,2.1],[-54.5,2.3],[-54.3,2.7],[-54.2,3.2],[-54,3.6],[-54.4,4.2],[-54.5,4.9],[-54,5.8],[-53.6,5.6],[-52.9,5.4],[-51.8,4.6],[-51.7,4.2],[-52.2,3.2],[-52.6,2.5]]],[[[9.6,42.2],[9.2,41.4],[8.8,41.6],[8.5,42.3],[8.7,42.6],[9.4,43],[9.6,42.2]]],[[[3.6,50.4],[4.3,49.9],[4.8,50],[5.7,49.5],[5.9,49.4],[6.2,49.5],[6.7,49.2],[8.1,49],[7.6,48.3],[7.5,47.6],[7.2,47.4],[6.7,47.5],[6.8,47.3],[6,46.7],[6,46.3],[6.5,46.4],[6.8,46],[6.8,45.7],[7.1,45.3],[6.7,45],[7,44.3],[7.5,44.1],[7.4,43.7],[6.5,43.1],[4.6,43.4],[3.1,43.1],[3,42.5],[1.8,42.3],[0.7,42.8],[0.3,42.6],[-1.5,43],[-1.9,43.4],[-1.4,44],[-1.2,46],[-2.2,47.1],[-3,47.6],[-4.5,48],[-4.6,48.7],[-3.3,48.9],[-1.6,48.6],[-1.9,49.8],[-1,49.3],[1.3,50.1],[1.6,50.9],[2.5,51.1],[2.7,50.8],[3.1,50.8],[3.6,50.4]]]]}},

Answer 1

好的，是的，一旦確定餅圖的內容。此“聯接”非常簡單。

整個代碼塊是這里的的jsfiddle - https://jsfiddle.net/j4fLj5gm/1/不會因在評論中提到的CORS問題的工作，但在這里張貼反正。

進行聯接時會遍歷實際數據，然后在Leaflet要素圖層中進行搜索以找到國家名稱的匹配項。

for (var countryIndex = 0; countryIndex < countryData.length; countryIndex++) {
  var marker;
  var thisDataRow = countryData[countryIndex];
  var thisCountry = thisDataRow[0];
  countries.eachLayer(function(country) {
    if (country.feature.properties.name === thisCountry) {
      marker = country;
    }
  })
  if (typeof marker == 'undefined') {
    continue;
  }

餅圖的數據准備在每個國家/地區的回路中都非常容易。

  var cData = [];
  var innerIndex = 0;
  for (var i = 9; i < 14; i++) {
     cData.push({name: ckeyOrder[innerIndex],y: parseInt(thisDataRow[i])})
     innerIndex++;
  }

  pieChartOptions.series = [{
      Name: "Production Types",
      data: cData
  }];

結果顯示在下面的屏幕截圖中。您可能需要控制一些尺寸。