echarts 经纬度坐标画圆

### ECharts 中基于经纬度坐标的圆形绘制实现 要在 ECharts 的 3D 地球图表中通过经纬度坐标绘制一个标准的圆形，可以采用以下方式。此方法的核心在于计算给定半径下的多个点来近似表示一个圆，并将其作为 `lines3D` 类型的数据源。 以下是完整的解决方案： #### 计算圆形上的点 为了在地球表面上绘制一个圆，需要围绕指定中心点（经纬度）生成一系列位于该圆周上的点。这些点可以通过地理距离公式计算得出[^1]。 ```javascript function getCirclePoints(centerLngLat, radiusKm, numPoints = 50) { const points = []; const centerLon = centerLngLat[0]; const centerLat = centerLngLat[1]; for (let i = 0; i < numPoints; i++) { const angle = Math.PI * 2 / numPoints * i; const point = calculatePointOnCircle(centerLon, centerLat, radiusKm, angle); points.push(point); } return points; function calculatePointOnCircle(lon, lat, distance, bearingRadians) { const R = 6371; // Earth's radius in kilometers const delta = distance / R; const theta = bearingRadians; const phi1 = toRad(lat); const lambda1 = toRad(lon); const sinPhi1 = Math.sin(phi1), cosPhi1 = Math.cos(phi1); const sinDelta = Math.sin(delta), cosDelta = Math.cos(delta); const sinPhi2 = sinPhi1 * cosDelta + cosPhi1 * sinDelta * Math.cos(theta); const phi2 = Math.asin(sinPhi2); let lambda2 = lambda1 + Math.atan2( Math.sin(theta) * sinDelta * cosPhi1, cosDelta - sinPhi1 * sinPhi2 ); lambda2 = ((lambda2 + 3 * Math.PI) % (2 * Math.PI)) - Math.PI; return [toDeg(lambda2), toDeg(phi2)]; } } // Helper functions function toRad(degrees) { return degrees * Math.PI / 180; } function toDeg(radians) { return radians * 180 / Math.PI; } ``` 以上代码定义了一个名为 `getCirclePoints` 的函数，用于根据输入参数生成一组环绕目标位置的点集合。其中： - `centerLngLat`: 表示圆心的位置 `[经度, 纬度]`。 - `radiusKm`: 半径大小，单位为公里。 - `numPoints`: 控制圆的平滑程度，默认值为 50。 #### 将点集转换成 ECharts 数据结构 接下来将上述生成的点数组转化为适合传递至 ECharts 配置项中的形式。 ```javascript var place = [116.4074, 39.9042]; // 北京市经纬度为例 var radiusInKilometers = 500; // 假设半径为500km var circleData = getCirclePoints(place, radiusInKilometers).map((point) => ({ coords: [ [...place], point ] })); myChart.setOption({ globe: {}, series: [{ type: 'lines3D', coordinateSystem: 'globe', polyline: true, effect: { show: false }, lineStyle: { color: '#FFA500', width: 2, opacity: 0.8 }, data: circleData.length ? circleData : [] }] }); ``` 这段脚本实现了如下操作： - 使用之前创建好的辅助工具获取对应数量级分布均匀的边界节点； - 构建符合 echarts 所需格式化后的连线数据对象列表； - 更新图表实例配置使其展示新加入的内容。 最终效果即是在三维球体表面呈现出以特定地理位置为中心覆盖一定区域范围内的闭合曲线图形。 --- ###