带有lat和long的HighCharts Map Point不起作用

Question

我正在处理一个需要加载自定义GeoJSON数据并在加载的地图上添加点的需求。不幸的是，积分没有显示出来。

编辑以添加需求，我想在钻取图中添加点(钻取示例(，如果有人能指导我如何在钻取地图上实现点映射，那就太好了。

我已经用演示代码"；用lat/long映射点"；，请有人指导我做这件事。

示例代码位于https://jsfiddle.net/5te18vzm/1/

let data = Highcharts.geojson(Highcharts.maps['countries/gb/gb-all']);
const separators = Highcharts.geojson(Highcharts.maps['countries/gb/gb-all'], 'mapline');
Highcharts.mapChart('container', {
chart: {
//map: 'countries/gb/gb-all'
},
title: {
text: 'Highmaps basic lat/lon demo'
},
mapNavigation: {
enabled: true
},
tooltip: {
headerFormat: '',
pointFormat: '<b>{point.name}</b><br>Lat: {point.lat}, Lon: {point.lon}'
},
series: [{
// Use the gb-all map with no data as a basemap
name: 'Basemap',
data:data,
borderColor: '#A0A0A0',
nullColor: 'rgba(200, 200, 200, 0.3)',
showInLegend: true
}, {
name: 'Separators',
type: 'mapline',
nullColor: '#707070',
showInLegend: false,
enableMouseTracking: false
}, {
// Specify points using lat/lon
type: 'mappoint',
name: 'Cities',
color: Highcharts.getOptions().colors[1],
data: [{
name: 'London',
lat: 51.507222,
lon: -0.1275
}, {
name: 'Birmingham',
lat: 52.483056,
lon: -1.893611
}, {
name: 'Leeds',
lat: 53.799722,
lon: -1.549167
}, {
name: 'Glasgow',
lat: 55.858,
lon: -4.259
}, {
name: 'Sheffield',
lat: 53.383611,
lon: -1.466944
}, {
name: 'Liverpool',
lat: 53.4,
lon: -3
}, {
name: 'Bristol',
lat: 51.45,
lon: -2.583333
}, {
name: 'Belfast',
lat: 54.597,
lon: -5.93
}, {
name: 'Lerwick',
lat: 60.155,
lon: -1.145,
dataLabels: {
align: 'left',
x: 5,
verticalAlign: 'middle'
}
}]
}]

})；

Answer 1

您需要设置chart.map属性，然后在仅为{name, lat, lon}的简化数据集中指定您的点，我将其制作为dataPointsOnly

试试这个

let data = Highcharts.geojson(Highcharts.maps['countries/gb/gb-all']);
const separators = Highcharts.geojson(Highcharts.maps['countries/gb/gb-all'], 'mapline');
var dataPointsOnly = [];
// Set drilldown pointers
data.forEach((d, i) => {
d.drilldown = d.properties['hc_key'];
d.value = i; // Non-random bogus data

dataPointsOnly.push({name: data[i].name, lat: parseFloat(data[i].properties.latitude), lon: parseFloat(data[i].properties.longitude)});
});
// Initialize the chart hc-key
Highcharts.mapChart('container', {
chart: {
map: 'countries/gb/gb-all'
},
title: {
text: 'Highmaps basic lat/lon demo'
},
mapNavigation: {
enabled: true
},
tooltip: {
headerFormat: '',
pointFormat: '<b>{point.name}</b><br>Lat: {point.lat}, Lon: {point.lon}'
},
series: [{
// Use the gb-all map with no data as a basemap
name: 'Basemap',
data:data,
borderColor: '#A0A0A0',
nullColor: 'rgba(200, 200, 200, 0.3)',
showInLegend: true
}, {
name: 'Separators',
type: 'mapline',
nullColor: '#707070',
showInLegend: false,
enableMouseTracking: false
}, {
// Specify points using lat/lon
type: 'mappoint',
name: 'Cities',
color: Highcharts.getOptions().colors[1],
data: dataPointsOnly
}]
});