vue3 + ts + cesium：绘制、拖动点 point

最新推荐文章于 2024-10-04 13:12:33 发布

Serenity_Qin

最新推荐文章于 2024-10-04 13:12:33 发布

阅读量143

点赞数 2

分类专栏：前端学习文章标签： cesium vue3 ts

本文链接：https://blog.csdn.net/Serenity_Qin/article/details/142491262

版权

前端学习专栏收录该内容

10 篇文章 0 订阅

订阅专栏

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

实现效果：

（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.id
                const 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 = 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
}