vue3 + ts + cesium：绘制自由曲线（polyline）

本文主要实现最基础的绘制自由曲线。

实现效果：

    （1）长按鼠标左键开始绘制；

    （2）抬起鼠标左键结束绘制。

1. components / CesiumViewer / hooks / drawPolyline.ts

import * as Cesium from "cesium";
import {
    disableDefaultScreenSpaceEventHandlers,
    enableDefaultScreenSpaceEventHandlers
} from "@/components/CesiumViewer/hooks/utils";

export const drawCurve = () => {
    const handler = new Cesium.ScreenSpaceEventHandler(window.viewer.scene.canvas)
    let positions: any = [] // 存储当前绘制的线条的位置（临时线条的位置）
    // 长按左键 —— 开始绘制
    handler.setInputAction((event: any) => {
        const cartesian = window.viewer.camera.pickEllipsoid(event.position, window.viewer.scene.globe.ellipsoid)
        if (Cesium.defined(cartesian)) {
            // window.viewer.entities.add({
            //     position: cartesian,
            //     point: {
            //         color: Cesium.Color.YELLOW,
            //         pixelSize: 10
            //     }
            // })
            // 移动鼠标 —— 实时绘制线条
            handler.setInputAction((movement: any) => {
                disableDefaultScreenSpaceEventHandlers() // 禁止屏幕移动，开始绘制
                const position = window.viewer.camera.pickEllipsoid(movement.endPosition, window.viewer.scene.globe.ellipsoid)
                positions.push(position)
                if (positions.length > 1) {
                    window.viewer.entities.add({ // 临时线条，实时绘制效果
                        polyline: {
                            positions: new Cesium.CallbackProperty(() => {
                                return positions
                            }, false),
                            width: 5, /* 线的宽度 */
                            // 普通实线
                            material: Cesium.Color.fromCssColorString('#ff0000'), /* 线的颜色 */
                            /*// 虚线
                            material: new Cesium.PolylineDashMaterialProperty({
                                color: Cesium.Color.fromCssColorString('#ff0000'),
                                // gapColor: Cesium.Color.TRANSPARENT, /!* 间隔颜色 *!/
                                dashLength: 20 /!* 短划线长度 *!/
                            }),*/
                            /*// 发光线条
                            material: new Cesium.PolylineGlowMaterialProperty({
                                glowPower: 0.3,
                                color: Cesium.Color.fromCssColorString('#ff0000')
                            }),*/
                            clampToGround: true, /* 贴地 */
                        }
                    })
                }
            }, Cesium.ScreenSpaceEventType.MOUSE_MOVE)
        }
    }, Cesium.ScreenSpaceEventType.LEFT_DOWN)
    // 抬起左键 —— 结束绘制
    handler.setInputAction(() => {
        handler.removeInputAction(Cesium.ScreenSpaceEventType.MOUSE_MOVE) // 移除鼠标移动事件，停止绘制
        handler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_DOWN) // 移除左键长按事件，结束绘制
        enableDefaultScreenSpaceEventHandlers() // 允许屏幕移动
    }, Cesium.ScreenSpaceEventType.LEFT_UP)
}

2. components / CesiumViewer / hooks / utils.ts

// 保持地球不动
export function disableDefaultScreenSpaceEventHandlers() {
    window.viewer.scene.screenSpaceCameraController.enableRotate = false // 禁止旋转
    window.viewer.scene.screenSpaceCameraController.enableTranslate = false // 禁止平移
    window.viewer.scene.screenSpaceCameraController.enableZoom = false // 禁止缩放
    window.viewer.scene.screenSpaceCameraController.enableTilt = false // 禁止倾斜
    window.viewer.scene.screenSpaceCameraController.enableLook = false // 禁止观察（自由视角查看）
}

// 允许地球移动
export function enableDefaultScreenSpaceEventHandlers() {
    window.viewer.scene.screenSpaceCameraController.enableRotate = true
    window.viewer.scene.screenSpaceCameraController.enableTranslate = true
    window.viewer.scene.screenSpaceCameraController.enableZoom = true
    window.viewer.scene.screenSpaceCameraController.enableTilt = true
    window.viewer.scene.screenSpaceCameraController.enableLook = true
}