如何在Apache ECharts Globe坐标系下通过点击获取经纬度坐标？

问题背景 #

在React环境使用echarts-for-react渲染ECharts 3D Globe时，调用convertFromPixel('globe')会报错convertFromPixel not supported for coordinate mode 'globe'，但Scatter3D系列的tooltip能正常显示数据点经纬度，说明存在可行的坐标转换逻辑。

替代解决方案 #

由于ECharts GL暂未为globe坐标系实现convertFromPixel方法，可通过调用globe坐标系实例的内部转换方法来实现点击坐标转经纬度：

代码实现 #

const onChartClick = (params: { event: { zrX: number; zrY: number; }; }) => {
  const echartInstance = chartRef.current.getEchartsInstance();
  // 获取globe组件的模型实例
  const globeModel = echartInstance.getModel().getComponent('globe');
  if (!globeModel) return;
  
  const globeCoordSys = globeModel.coordinateSystem;
  // 将屏幕坐标转换为笛卡尔空间坐标
  const cartesianPoint = globeCoordSys.screenToCartesian([params.event.zrX, params.event.zrY]);
  if (!cartesianPoint) return;
  
  // 将笛卡尔坐标转换为经纬度
  const [longitude, latitude] = globeCoordSys.cartesianToCoord(cartesianPoint);
  console.log('点击位置经纬度：', longitude, latitude);
};

// 绑定点击事件
const echartInstance = chartRef.current.getEchartsInstance();
const zr = echartInstance.getZr();
zr.off('click');
zr.on('click', onChartClick);

关键说明 #

• 获取globe坐标系实例：通过getModel().getComponent('globe')拿到globe的配置与坐标系实例，该实例包含内部的坐标转换方法。
• 屏幕坐标转笛卡尔坐标：使用screenToCartesian方法将ZR（ZRender）的点击屏幕坐标转换为3D空间中的笛卡尔坐标。
• 笛卡尔坐标转经纬度：通过cartesianToCoord方法将3D空间坐标映射为球面的经纬度。

注意事项 #

• 上述方法依赖ECharts GL的内部API，不同版本可能存在差异，建议测试对应版本的兼容性。
• 如果点击位置不在球面上（比如空白区域），screenToCartesian可能返回null，需要做判空处理。

补充说明 #

Scatter3D的tooltip能显示经纬度，是因为tooltip直接从数据项中读取了预先定义的经纬度值，而非实时转换屏幕坐标；而空白区域的点击需要通过空间射线与球面的交点计算，这正是上述代码实现的逻辑。

内容的提问来源于stack exchange，提问作者EKcharts