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

           ]

       }

   }]

}


效果图:


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

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容