vue3 + ts + cesium：添加、拖动图标 billboard

最新推荐文章于 2024-10-05 01:22:45 发布

Serenity_Qin

最新推荐文章于 2024-10-05 01:22:45 发布

阅读量230

点赞数 2

分类专栏：前端学习文章标签： vue.js 前端 typescript cesium

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

版权

前端学习专栏收录该内容

10 篇文章 0 订阅

订阅专栏

本文主要实现最基础的添加图标、并且可以拖动刚刚添加的图标。

实现效果：

（1）单击鼠标左键添加图标；

（2）单击鼠标右键结束添加；

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

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

1. components / CesiumViewer / hooks / drawBillboard.ts

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

export const drawBillboard = () => {
    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),
                billboard: {
                    image: '/public/logo.svg', // 图片路径
                    width: 32, // 图片宽度
                    height: 32, // 图片高度
                    /* 根据视角远近控制点的比例 */
                    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 pickedBillboard = pickedObject.id
                const newCartesian = window.viewer.camera.pickEllipsoid(movement.endPosition, window.viewer.scene.globe.ellipsoid)
                if (Cesium.defined(newCartesian)) {
                    pickedBillboard.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
}