我正在尝试用高图显示点(纬度/经度)。我已经为美国成功完成了此任务,因为有一张完整的地图。现在,我试图在加勒比海地区显示点。我找到了以下链接来为加勒比海地区创建地图:Demo
问题在于此选项,我只能为整个国家/地区设置值。但是我需要在不同的国家/地区中设定特定的价值观。例如加利福尼亚地图。
我试图将示例代码更新为:
import mapDataUSWithoutCentral from "@highcharts/map-collection/custom/north-america-no-central.geo.json"
var dataCaribbean = [{
'hc-key': 'cu', //Cuba
value: 0
},{
'hc-key': 'bs', //Bahamas
value: 0
},{
'hc-key': 'tc', //Turks and Caicos Islands
value: 0
},{
'hc-key': 'ky', //Cayman Islands
value: 0
},{
'hc-key': 'ht', //Haiti
value: 0
},{
'hc-key': 'do', //Dominican Republic
value: 0
},{
'hc-key': 'jm', //Jamaica
value: 0
},{
'hc-key': 'pr', //Puerto Rico
value: 0
},
{ z: 10, keyword: "demo", lat: 23.113592, lon: -82.366592, color: '#ff0000' }
];
const mapOptionsCaribbean = {
chart: {
map: mapDataUSWithoutCentral
},
title: {
text: 'Caribbean'
},
mapNavigation: {
enabled: true,
},
series: [{
data: dataCaribbean,
mapData: mapDataUSWithoutCentral,
joinBy: 'hc-key',
allAreas: false,
name: 'Random data',
states: {
hover: {
color: '#a4edba'
}
},
dataLabels: {
enabled: true,
format: '{point.name}'
}
}]
}
您需要使用mapbubble
类型创建另一个系列并添加proj4
库:
series: [...,
{
type: "mapbubble",
data: [...]
}
]
实时演示: https://codesandbox.io/s/highcharts-react-demo-o5roi
API参考: https://api.highcharts.com/highmaps/series.mapbubble.data