（九）Cesium实现坐标、距离和面积测量

坐标测量

import * as Cesium from 'cesium'
import { useCesiumStore } from '@/stores/useCesiumStore.js'
import { toRaw } from 'vue'

export const MeasurePoint = () =>{
    const viewer = toRaw(useCesiumStore().viewer) //获取viewer对象
    const handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas) //创建屏幕空间事件处理器
    const annotations = viewer.scene.primitives.add(new Cesium.LabelCollection()) //创建标注集合
    viewer.scene.canvas.style.cursor = 'crosshair'
    //添加点
    const createPoint = (worldPosition) => {
        const point = viewer.entities.add({
            position: worldPosition,
            name: 'measure_point',
            point: {
                pixelSize: 10,
                color:Cesium.Color.CRIMSON,
                outlineColor: Cesium.Color.ALICEBLUE,
                outlineWidth: 2,
                disableDepthTestDistance: 4000
            }
        })
        return point
    }

    //添加点和标注框
    const annotate = (cartesian,lng,lat,height) => {
        //创建点
        createPoint(cartesian)
        //创建标注框
        annotations.add({
            position: cartesian,
            text:
                'Lon:' + lng.toFixed(5) + '\u00B0' +
                '\nLat:' + lat.toFixed(5) + '\u00B0' +
                '\nHeight:' + height.toFixed(2) +'m',
            showBackground: true,
            font: '22px monospace',
            horizontalOrigin: Cesium.HorizontalOrigin.LEFT,
            verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
            disableDepthTestDistance:Number.POSITIVE_INFINITY
        })
    }

    //鼠标左键单击事件
    handler.setInputAction((event) => {
        const pickedObject = viewer.scene.pick(event.position)  //判断是否拾取到模型
        //如果拾取到模型
        if (viewer.scene.pickPositionSupported && Cesium.defined(pickedObject)){
            const cartesian = viewer.scene.pickPosition(event.position)  //获取点击位置的笛卡尔坐标
            if(Cesium.defined(cartesian)){
                const cartographic = Cesium.Cartographic.fromCartesian(cartesian)  //将笛卡尔坐标转为经纬度高度
                const lng = Cesium.Math.toDegrees(cartographic.longitude)  //获取经度
                const lat = Cesium.Math.toDegrees(cartographic.latitude)  //获取纬度
                const height = cartographic.height  //获取高度
                annotate(cartesian,lng,lat,height)  //添加点和标注框
            }
        }
        //如果未拾取到模型而拾取到地形
        else{
            const ray = viewer.camera.getPickRay(event.position)  //获取射线
            const cartesian = viewer.scene.globe.pick(ray, viewer.scene)  //获取地形的笛卡尔坐标
            if(Cesium.defined(cartesian)){
                const cartographic = Cesium.Cartographic.fromCartesian(cartesian)  //将笛卡尔坐标转为经纬度高度
                const lng = Cesium.Math.toDegrees(cartographic.longitude)  //获取经度
                const lat = Cesium.Math.toDegrees(cartographic.latitude)  //获取纬度
                const height = cartographic.height  //获取高度
                annotate(cartesian,lng,lat,height)  //添加点和标注框
            }
        }
    }, Cesium.ScreenSpaceEventType.LEFT_CLICK)

    //使用鼠标右键单击，删除点和标注框
    handler.setInputAction(() => {
        // viewer.entities.removeAll()
        for (let i =