使用Lat Long的气泡高地图

Bubble Highmap using Lat Long

本文关键字：地图 高地图 气泡 Lat Long 使用      更新时间：2023-09-26

我正在使用高图表绘制气泡图，并且我已经达到了根据状态代码（in/RJ）和值（1000）成功绘制气泡的某个点。

http://jsfiddle.net/voidSO/h2f4ugz4/

$(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。

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

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

其次，您应该将mapData交换为如下所示：

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

这样做的原因是，将其包装在Highcharts.geojson中意味着Highmaps不会将其识别为自己收藏的地图，并且不允许轻松进行纬度/lng转换。

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

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

请参阅此更新的JSFiddle演示，该演示使用拉贾斯坦邦（RJ）的lat/lng。

相关文章：