Cesium点击位置如何获取经纬度坐标？

Question

在Cesium中，如何通过点击地球模型获取对应的经纬度坐标是常见的开发需求。以下是具体实现的技术问题： 使用Cesium时，如何监听鼠标点击事件，并将点击位置的笛卡尔坐标正确转换为地理上的经纬度（WGS84标准）？例如，在初始化Cesium Viewer后，如何结合`scene.pickPosition`或`camera.getPickRay`方法，准确提取用户点击位置的经度、纬度值？此外，当场景包含地形或3D Tiles时，是否需要额外处理以确保坐标计算的准确性？ 此问题涉及Cesium事件监听、坐标系转换以及地形适配等核心知识点，是开发者在交互式地图应用中必须掌握的内容。

Answer 1

1. 基础概念：Cesium中的事件监听与坐标系

在Cesium中，事件监听是实现用户交互的基础。通过监听鼠标点击事件，我们可以捕获用户在地球模型上的操作，并进一步处理这些数据。

• Cesium.Event 提供了对鼠标和键盘事件的支持。
• Cartesian3 是Cesium中常用的三维笛卡尔坐标表示。
• Cartographic 用于表示地理坐标（经度、纬度、高度）。

在初始化Viewer后，可以使用viewer.screenSpaceEventHandler来监听鼠标事件：

viewer.screenSpaceEventHandler.setInputAction(function(click) {
    const cartesian = viewer.camera.pickEllipsoid(click.position, viewer.scene.globe.ellipsoid);
}, Cesium.ScreenSpaceEventType.LEFT_CLICK);

上述代码中，我们使用了pickEllipsoid方法将屏幕坐标转换为笛卡尔坐标。

2. 实现步骤：从点击到经纬度

接下来，我们需要将获取的笛卡尔坐标转换为地理坐标：

1. 监听鼠标左键点击事件。
2. 使用pickEllipsoid或scene.pickPosition方法获取笛卡尔坐标。
3. 调用Cartesian3.toCartographic方法完成坐标转换。

以下是完整的代码示例：

viewer.screenSpaceEventHandler.setInputAction(function(click) {
    const cartesian = viewer.camera.pickEllipsoid(click.position, viewer.scene.globe.ellipsoid);
    if (cartesian) {
        const cartographic = Cesium.Cartesian3.toCartographic(cartesian);
        const longitude = Cesium.Math.toDegrees(cartographic.longitude);
        const latitude = Cesium.Math.toDegrees(cartographic.latitude);
        console.log(`Longitude: ${longitude}, Latitude: ${latitude}`);
    }
}, Cesium.ScreenSpaceEventType.LEFT_CLICK);

3. 地形适配与复杂场景处理

当场景包含地形或3D Tiles时，简单的椭球体计算可能无法满足需求。此时需要额外处理：

场景类型	解决方案
地形	使用scene.pickPosition替代pickEllipsoid，以支持更精确的高度计算。
3D Tiles	结合scene.pick判断点击对象是否为3D Tiles，并提取其位置信息。

以下是地形适配的代码片段：

viewer.screenSpaceEventHandler.setInputAction(function(click) {
    const ray = viewer.camera.getPickRay(click.position);
    const position = viewer.scene.globe.pick(ray, viewer.scene);
    if (position) {
        const cartographic = Cesium.Cartesian3.toCartographic(position);
        const longitude = Cesium.Math.toDegrees(cartographic.longitude);
        const latitude = Cesium.Math.toDegrees(cartographic.latitude);
        console.log(`Terrain Longitude: ${longitude}, Latitude: ${latitude}`);
    }
}, Cesium.ScreenSpaceEventType.LEFT_CLICK);

4. 流程图：从点击到经纬度的逻辑

graph TD;
            A[监听鼠标点击] --> B{是否有地形};
            B --是--> C[使用 scene.pick];
            B --否--> D[使用 pickEllipsoid];
            C --> E[转换为 Cartographic];
            D --> E;
            E --> F[输出经纬度];

通过以上流程，开发者可以清晰地理解从点击事件到经纬度输出的完整逻辑。