使用 Lat Long 的 Bubble Highmap

Question

我正在使用 highcharts 绘制气泡图，我已经达到了某个点，我可以根据州代码 (in/RJ) 和值 (1000) 成功绘制气泡。

$(function () {


var mapData = Highcharts.geojson(Highcharts.maps['countries/in/in-all']);

var data = [{
    "z": 10038,
        "code": "RJ"
}, {
    "z": 100,
        "code": "PB"
}];

$('#container').highcharts('Map', {
    chart: {
        borderWidth: 1
    },

    title: {
        text: 'World population 2010 by country'
    },

    subtitle: {
        text: 'Demo of Highcharts map with bubbles'
    },

    legend: {
        enabled: false
    },

    mapNavigation: {
        enabled: true,
        buttonOptions: {
            verticalAlign: 'bottom'
        }
    },

    series: [{
        name: 'Countries',
        mapData: mapData,
        color: '#E0E0E0',
        enableMouseTracking: false
    }, {
        type: 'mapbubble',
        mapData: mapData,
        name: 'Population 2010',
        data: data,
        joinBy: ['postal-code', 'code'],
        minSize: 4,
        maxSize: '12%',
        tooltip: {
            pointFormat: '{point.code}: {point.z} thousands'
        }
    }]
});

});

但是我不想使用州代码，而是想使用纬度和经度来制作气泡，但我没有得到任何提示。

例如 (RJ) 拉贾斯坦邦（印度的一个邦）的经纬度使用它的经纬度 26.5727° N，73.8390° E.

Answer 1

您需要采取几个小步骤。首先，包括Proj4s，它做坐标系转换。这归结为：

<script src="http://.../proj4.js"></script>

其次，您应该将 mapData 换成这样：

var mapData = Highcharts.maps['countries/in/in-all'];

原因是将其包装在 Highcharts.geojson 中意味着 Highmaps 无法将其识别为来自他们自己的地图 collection，并且不允许简单 lat/lng转换。

最后一件事是使用纬度和经度放置气泡，如下所示：

var data =  [{
    "z": 10038,
    "lat": 26.5727,
    "lon": 73.8390
    // "code": "RJ"
}, {
    "z": 100,
    "code": "PB"
}];

参见 this updated JSFiddle demonstration，它使用 lat/lng 表示拉贾斯坦邦 (RJ)。

使用 Lat Long 的 Bubble Highmap

Bubble Highmap using Lat Long

javascript

jquery

highcharts