Cesium+Vue3学习教程系列（6）---实时显示鼠标三维坐标数据、实时显示相机姿态heading、pitch、roll数据

本学习系列将以Cesium + Vue3 + Vite +Typescript+elementplus作为主要技术栈展开，后续会循序渐进，持续探索Cesium的高级功能，相关源码全部免费公开。 更多详情请点击原文链接 Cesium+Vue3学习系列（6）---实时显示鼠标三维坐标数据、实时显示相机姿态heading、pitch、roll数据

本篇主要介绍如何实时显示鼠标三维坐标数据、实时显示相机姿态数据 1、利用viewer.screenSpaceEventHandler.setInputAction函数绑定当鼠标移动时的动作。

scss 复制代码

    viewer.screenSpaceEventHandler.setInputAction(CesiumViewer.GetMousePosition, Cesium.ScreenSpaceEventType.MOUSE_MOVE)
     viewer.screenSpaceEventHandler.setInputAction(CesiumViewer.GetCameraHeight, Cesium.ScreenSpaceEventType.WHEEL)

2、GetMousePosition与GetCameraHeight具体实现代码如下：

ini 复制代码

    static GetMousePosition(movement: { endPosition: Cesium.Cartesian2 }) {
            const viewer = CesiumViewer.viewer
            if (!viewer) return;
            // 获取鼠标在屏幕上的位置
            const screenPosition = movement.endPosition
            // 将屏幕位置转换为经纬度
            const cartesian = viewer.scene.globe.pick(viewer.camera.getPickRay(screenPosition)!, viewer.scene)
            // const cartesian = viewer.camera.pickEllipsoid(movement.endPosition,CesiumViewer.ellipsoid)
            if (cartesian) {
                const cartographic = viewer.scene.globe.ellipsoid.cartesianToCartographic(cartesian)
                //鼠标位置
                MouseStatusInViewer.longtitude.value = Cesium.Math.toDegrees(cartographic?.longitude ?? 0)
                MouseStatusInViewer.latitude.value = Cesium.Math.toDegrees(cartographic?.latitude ?? 0)
                MouseStatusInViewer.altitude.value = viewer.scene.globe.getHeight(cartographic) ?? 0
                //相机信息
                MouseStatusInViewer.heading.value = Cesium.Math.toDegrees(viewer.camera.heading ?? 0)
                MouseStatusInViewer.pitch.value = Cesium.Math.toDegrees(viewer.camera.pitch ?? 0)
                MouseStatusInViewer.roll.value = Cesium.Math.toDegrees(viewer.camera.roll ?? 0)
            }
        }

<!---->

    static GetCameraHeight() {
            const viewer = CesiumViewer.viewer
            if (!viewer) return 0;
            MouseStatusInViewer.cameraHeight.value = viewer.camera.positionCartographic.height
        }

3、将鼠标及相机参数信息绑定到MouseStatusInViewer静态类里，方便后续其他功能提取调用。

typescript 复制代码

    export default class MouseStatusInViewer {
        static longtitude: Ref<number> = ref(0);
        static latitude: Ref<number> = ref(0);
        static altitude: Ref<number> = ref(0);
        static heading: Ref<number> = ref(0);
        static pitch: Ref<number> = ref(0);
        static roll: Ref<number> = ref(0);
        static cameraHeight: Ref<number> = ref(0);
    }

4、前端页面实现

xml 复制代码

    <template>
        <div class="status-info">
            <span>经度: {{ MouseStatusInViewer.longtitude.value.toFixed(3) }}</span>
            <span>纬度: {{ MouseStatusInViewer.latitude.value.toFixed(3) }}</span>
            <span>高度: {{ MouseStatusInViewer.altitude.value.toFixed(2) }}米</span>
            <span>偏航角: {{ MouseStatusInViewer.heading.value.toFixed(3) }}°</span>
            <span>俯仰角: {{ MouseStatusInViewer.pitch.value.toFixed(3) }}°</span>
            <span>横滚角: {{ MouseStatusInViewer.roll.value.toFixed(3) }}°</span>
            <span>相机高度: {{ MouseStatusInViewer.cameraHeight.value.toFixed(2) }}米</span>
        </div>
    </template>
    <script setup lang="ts">
    import MouseStatusInViewer from '@/Viewer/MouseStatusInViewer';
    </script>
    <style lang="scss" scoped>
    .status-info {
        width: 100%;
        height: 100%;
        span {
            margin-left: 20px;
        }
    }
    </style>

5、实现效果 6、注意由于在Cesium里，一个 ScreenSpaceEventHandler 上同一个 ScreenSpaceEventType 只能同时挂一个回调。后期会与上标绘、测量等功能的MouseMove事件可能会有冲突，因此以上代码只暂时这样写，后续会用事件总线统一管理鼠标动作，敬请期待。