本文主要实现最基础的绘制点，并且可以拖动刚刚绘制的点。

实现效果：

    （1）单击鼠标左键绘制点；

    （2）单击鼠标右键结束绘制；

    （3）长按鼠标左键拖动点，实时更新点的位置；

    （4）抬起鼠标左键停止拖动点。

1. components/CesiumViewer/hooks/drawPoint.ts

import * as Cesium from "cesium";
import {disableDefaultScreenSpaceEventHandlers,enableDefaultScreenSpaceEventHandlers
} from "@/components/CesiumViewer/hooks/utils";export const drawPoint = () => {const handler = new Cesium.ScreenSpaceEventHandler(window.viewer.scene.canvas)// 单击左键 —— 绘制点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,position: new Cesium.CallbackProperty(() => {return cartesian}, false),point: {pixelSize: 20, // 点的大小color: Cesium.Color.fromCssColorString('#ff0000'),/* 根据视角远近控制点的比例 */scaleByDistance: new Cesium.NearFarScalar(1.5e2, 2.0, 8.0e6, 0.0),heightReference: Cesium.HeightReference.RELATIVE_TO_GROUND}})}}, Cesium.ScreenSpaceEventType.LEFT_CLICK)// 单击右键 —— 结束绘制handler.setInputAction(() => {handler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_CLICK)}, Cesium.ScreenSpaceEventType.RIGHT_CLICK)// 长按左键 —— 拖动点handler.setInputAction((event: any) => {const pickedObject = window.viewer.scene.pick(event.position) // 拾取实体if (Cesium.defined(pickedObject) && pickedObject.id) {disableDefaultScreenSpaceEventHandlers() // 禁止屏幕移动handler.setInputAction((movement: any) => {let pickedPoint = pickedObject.idconst newCartesian = window.viewer.camera.pickEllipsoid(movement.endPosition, window.viewer.scene.globe.ellipsoid)if (Cesium.defined(newCartesian)) {pickedPoint.position = new Cesium.CallbackProperty(() => { // 实时更新点的位置return newCartesian}, false)}}, Cesium.ScreenSpaceEventType.MOUSE_MOVE)}}, Cesium.ScreenSpaceEventType.LEFT_DOWN)// 松开左键 —— 停止拖动handler.setInputAction(() => {handler.removeInputAction(Cesium.ScreenSpaceEventType.MOUSE_MOVE)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 = truewindow.viewer.scene.screenSpaceCameraController.enableTranslate = truewindow.viewer.scene.screenSpaceCameraController.enableZoom = truewindow.viewer.scene.screenSpaceCameraController.enableTilt = truewindow.viewer.scene.screenSpaceCameraController.enableLook = true
}