具有纬度和经度的HighChartsMap点不起作用

xesrikrc  于 2022-11-11  发布在  Highcharts
关注(0)|答案(1)|浏览(183)

我正在处理一个需求,我们需要加载自定义GeoJSON数据并在加载的Map上添加点。不幸的是,这些点没有显示出来。
编辑添加需求,我想添加点到下钻图(Drill down example),如果有人能指导我如何在下钻图上实现点Map,那就太好了。
我已经重现了演示代码“Map点与纬度/长”的问题,请有人能指导我这一点。
示例代码可以在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'
        }
    }]
}]

});

wgx48brx

wgx48brx1#

您需要设置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
    }]
});

相关问题