使用 geojson 文件在 HighMaps 中添加地图线答案

【问题标题】：Adding Maplines in HighMaps using geojson file使用 geojson 文件在 HighMaps 中添加地图线
【发布时间】：2017-04-03 08:27:21
【问题描述】：

我正在尝试使用自定义 geojson 文件在 HighMaps 中创建人口叶绿素图。

我有 2 个 geojson 文件 - 第一个包含县级数据，第二个包含县内的较小城镇区域。

我正在尝试将县级边界添加到我的叶绿素地图中，类似于此示例：http://www.highcharts.com/maps/demo/us-counties

我能够使用适当的颜色渐变正确绘制小区域；但是县界线没有出现在我的地图上。

我的js代码如下：

$(function() {

  $.getJSON('population.json', function(data) {

  $.getJSON('smaller_areas.geojson', function(geojson) {

  $.getJSON('counties.geojson', function(maplines){


  // Initiate the chart
  Highcharts.mapChart('container', {
    chart: {

                    width: 600,
                borderWidth: 1
            },

    title: {
      text: 'Population'
    },

    legend: {

                title: {
                    text: 'Crime Rates',
                    style: {
                        color: (Highcharts.theme && Highcharts.theme.textColor) || 'black'
                    }
                },
                align: 'right',
                verticalAlign: 'top',
                floating: true,
                layout: 'vertical',
                valueDecimals: 0,
                backgroundColor: (Highcharts.theme &&   Highcharts.theme.legendBackgroundColor) || 'rgba(255, 255, 255, 0.85)',
                symbolRadius: 0,
                symbolHeight: 14
            },

      mapNavigation: {
        enabled: true,
        enableDoubleClickZoomTo: true
      },

         colorAxis: {
            min: 1,
            type: 'logarithmic',
            minColor: '#EEEEFF',
            maxColor: '#000022',
            stops: [
                [0, '#EFEFFF'],
                [0.67, '#4444FF'],
                [1, '#000022']
            ]
        },

      series: [{
        data: data,
        mapData: geojson,
        joinBy: ['GEOGID', 'GEOGID'],
        name: 'Population',
        tooltip: {
          pointFormat: '{point.Name}: {point.value}'
        }
        },
        {
              type: 'mapline',
              name: 'County Borders',
              Data: maplines,
              color: 'black',
              lineWidth: 10
          }]
        });
      });
    });
  });
});

我假设我需要修改 maplines 系列的“数据”命令，因为我是从 geojson 文件中读取的；但是我不知道该怎么做。

我的县数据 geojson 如下所示： { "type": "FeatureCollection", "crs": { "type": "name", "properties": { "name" "urn:ogc:def:crs:EPSG::3857" } }, “特征”： [ { "type": "Feature", "properties": {"COUNTYNAME": "Leitrim"}, "geometry": { "type": "MultiPolygon", "coordinates": [ [ [ [ -925332.1353, 7260461.4174 ], [ -925231.9477, 7260212.372 ], [ -925020.4407, 7260020.804 ], [ -924719.8781, 7259925.0218 ], [ -924597.4266, 7259886.7092 ],

随后是该县和后续县的剩余预测。

谁能帮忙？

提前致谢。

【问题讨论】：

数据应以小写字母开头。您可以在 jsfiddle/codepen/etc. 上重新创建问题吗？您可以粘贴 json contect，这样它就不会使用 ajax 调用。

标签： javascript highcharts geojson highmaps choropleth

【解决方案1】：

实际上我自己解决了这个问题 - 诀窍是调用包含 geojson 数据的 javascript 文件，而不是直接调用 geojson 文件。

【讨论】：