echarts 3D地球添加点击事件

实现ECharts 3D地球点击事件
为了实现在ECharts中的3D地球可视化并添加点击事件来增强用户交互体验，可以利用echarts-gl插件提供的功能。此插件扩展了ECharts的功能，使其能够处理三维图形。
在初始化图表实例之后，设置好基本的地图配置项之前，注册全局性的鼠标事件监听器是必要的。对于具体的3D地球场景来说，当检测到用户的点击动作时，可以通过捕获对应的地理坐标信息，并执行相应的业务逻辑[^2]。
下面是一个简单的例子，展示了如何向3D地球模型添加点击事件：
// 初始化 echarts 实例
var myChart = echarts.init(document.getElementById('main'));

option = {
globe: {
baseTexture: '/path/to/earth.jpg', // 设置底图纹理路径
heightTexture: '/path/to/elevation.png', // 设置高度贴图路径
environment: 'auto',
shading: 'realistic',
realisticMaterial: {
roughness: 0.9,
metalness: 0
},
postEffect: true,
light: {
main: {
intensity: 5,
shadow: true
},
ambientCubemap: {
texture: '/path/to/hdr.hdr',
diffuseIntensity: 0.2
}
},
viewControl: {}
}
};

myChart.setOption(option);

// 添加点击事件处理器
myChart.on('click', function (params) {
console.log(params);

if (params.componentType === 'globe') {
var coord = params.coord;
alert(`您点击的位置经纬度为：经度${coord[0]},纬度${coord[1]}`);
}
});
登录后复制
这段代码首先创建了一个基于ECharts的3D地球视图，在其中设置了基础材质、光照效果等参数以获得逼真的视觉呈现；接着绑定了一个针对整个图表对象的点击事件监听函数。每当发生点击行为时，会触发这个回调函数，并打印出所选位置的具体坐标值以及弹窗显示该点所在的经纬度信息[^1]。