echarts 3d地球点击地区位置获取世界地图纬度
时间: 2024-09-22 17:02:02 浏览: 43
ECharts是一个强大的JavaScript数据可视化库,支持创建各种图表,包括3D地图。要在ECharts的3D地球图上获取用户点击区域的经纬度信息,你需要使用其事件系统,特别是`click`事件。以下是基本步骤:
1. 首先,你需要在初始化地球图时开启鼠标交互并监听`click`事件:
```javascript
var earth = echarts.init(document.getElementById('earth-dom'), 'echarts/map');
earth.setOption({
map: 'world',
roam: true,
// 其他配置...
visualMap: {
type: 'piecewiseFunction',
pieces: [
{min: -180, max: 0, color: '#00FFFF'},
{min: 0, max: 180, color: '#FF00FF'}
]
},
series: [{
type: 'effect-parallel',
data: [],
mapType: 'world',
tooltip: {
trigger: 'item'
},
itemStyle: {
normal: {
shadowBlur: 10,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
},
onClick: function (params) {
var latLon = params.position; // 这里就是经纬度信息
console.log(latLon);
}
}]
});
```
2. 当用户点击地球表面时,会触发`onClick`函数,其中`params.position`包含了点击位置的经纬度数组,通常格式为[经度, 纬度]。
阅读全文