Question

我有两个文件： 1个geojson文件，包含我想要的特定国家/地区的国家/地区形状。 1个csv文件，包含我想要使用mapbox映射的数据。

我正在试图弄清楚如何加入这两个文件，以便geojson国家/地区信息名称与我的CSV文件中的国家/地区匹配。我想使用杂食动物将我的csv转换为json，然后弄清楚如何将这些数据拉出来以便在弹出窗口中绑定。

这里有一个连接两个geojson文件的例子（一个用于形状，另一个用于数据）：https://www.mapbox.com/mapbox.js/example/v1.0.0/choropleth-joined-data-multiple-variables/

但我想使用Omnivore解析我的csv文件，以便我可以先转换CSV。

我已经设法单独加载我的geojson国家/地区文件并加载我的CSV文件，为我的highcharts弹出窗口做好准备，但我无法弄清楚如何按名称加入这两个文件。

以下是我单独调用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]);

有没有办法让我的geojson国家/地区使用我的杂食动物解析的CSV代码，以便我可以通过这种方式映射我的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
  }];

结果在下面截图..你可能想稍微控制尺寸。

如何在Mapbox中使用杂食小叶加入geojson + CSV文件以将数据映射为多边形？

1 个答案: