Highcharts- maps 地图点和线的定义

需求

地图点和线通过经度和纬度的点或数组添加到地图中。自 v10 以来的 Highcharts 地图使用 GeoJSON 定义来定义点和线串：geometry

分析与解决

地图点定义：

对于地图点数据点，速记点配置是直接在选项中设置和属性。Lonlat

{

    type: 'mappoint',

    data: [{

        lon: 4.90,

        lat: 53.38,

        name: 'Amsterdam'

    }, {

        lon: -118.24,

        lat: 34.05,

        name: 'LA'

    }]

}

长配置是添加一个，其中是经纬度的类型。Highcharts 支持这两种形式的原因是该定义允许直接从 GeoJSON 和 TopoJSON 源应用地图。geometrycoordinatesPointgeometry

{

    type: 'mappoint',

    data: [{

        geometry: {

            type: 'Point',

            coordinates: [4.90, 53.38]

        },

        name: 'Amsterdam'

    }, {

        geometry: {

            type: 'Point',

            coordinates: [-118.24, 34.05]

        },

        name: 'LA'

    }]

}

地图线定义：

对于地图线，添加类型。当时，应该是经纬度元组的二维数组，而需要三维数组。geometryLineStringMultiLineStringLineStringcoordinatesMultiLineStringcoordinates

请注意，根据投影的不同，两点之间的地图线可能会呈现为曲线。这是因为 Highcharts 渲染了测地线，即地球表面两点之间的最短路径。

{

    type: 'mapline',

    data: [{

        geometry: {

            type: 'LineString',

            coordinates: [

                [4.90, 53.38], // Amsterdam

                [-118.24, 34.05] // Los Angeles

            ]

        }

    }]

}

效果图：

希望这些信息对大家有所帮助！如果您有任何其他问题，请随时提问。