地理距离测量，echarts轻松实现，揭秘数据可视化新技巧

引言

地理距离测量在地理信息系统（GIS）、物流运输、城市规划等领域有着广泛的应用。随着数据可视化技术的发展，如何直观、准确地展示地理距离成为了一个重要的课题。ECharts 作为一款强大的可视化库，提供了丰富的地理坐标系统支持，可以帮助我们轻松实现地理距离的测量和数据可视化。本文将详细介绍如何使用 ECharts 进行地理距离测量，并分享一些数据可视化新技巧。

一、ECharts 地理坐标系统简介

ECharts 地理坐标系统是基于百度地图的地理坐标系，它将地球上的每个点通过经纬度进行定位。在 ECharts 中，地理坐标系统主要用于地图的绘制和地理信息的展示。

二、地理距离测量原理

地理距离测量主要基于球面三角学原理。在地球表面上，两点之间的距离可以通过它们的经纬度计算得出。以下是计算两点之间距离的公式：

function getDistance(lng1, lat1, lng2, lat2) { var R = 6371.393; // 地球半径，单位：千米 var rad = Math.PI / 180; // 角度转换为弧度 var dLat = (lat2 - lat1) * rad; var dLon = (lng2 - lng1) * rad; var a = Math.sin(dLat / 2) * Math.sin(dLat / 2) + Math.cos(lat1 * rad) * Math.cos(lat2 * rad) * Math.sin(dLon / 2) * Math.sin(dLon / 2); var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a)); var d = R * c; // 千米 return d; }

三、ECharts 地理距离测量实例

以下是一个使用 ECharts 实现地理距离测量的实例：

<!DOCTYPE html> <html style="height: 100%"> <head> <meta charset="utf-8"> </head> <body style="height: 100%; margin: 0"> <div id="container" style="height: 100%"></div> <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.0.0/echarts.min.js"></script> <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.0.0/extension/bmap.min.js"></script> <script type="text/javascript"> var myChart = echarts.init(document.getElementById('container')); var option = { bmap: { center: [116.404, 39.915], zoom: 5, roam: true, mapType: 'china' }, series: [{ type: 'effectScatter', coordinateSystem: 'bmap', data: [ {name: '北京', value: [116.405285, 39.904989]}, {name: '上海', value: [121.472644, 31.231706]} ], symbolSize: function (val) { return val[2] / 10; }, showEffectOn: 'render', rippleEffect: { brushType: 'stroke' }, hoverAnimation: true, label: { normal: { formatter: '{b}', position: 'right', show: true } }, itemStyle: { normal: { color: '#f4e925', shadowBlur: 10, shadowColor: '#333' } }, zlevel: 1 }, { type: 'lines', coordinateSystem: 'bmap', zlevel: 2, effect: { show: true, period: 6, trailLength: 0.7, color: '#fff', symbolSize: 3, symbol: 'arrow' }, lineStyle: { normal: { color: '#f4e925', width: 1, opacity: 0.6, curveness: 0.2 } }, data: [{ coords: [[116.404, 39.915], [121.472644, 31.231706]], distance: getDistance(116.404, 39.915, 121.472644, 31.231706) }] }] }; myChart.setOption(option); </script> </body> </html>

在上面的示例中，我们首先在地图上添加了两个标记点（北京和上海），然后使用 getDistance 函数计算两点之间的距离，并将距离值作为线条的属性传递给 ECharts。这样，我们就可以在地图上直观地展示两点之间的距离。