ceisum 鼠标拖拽移动实体

鼠标拖拽主要分为3步：鼠标按下事件，鼠标移动事件，鼠标抬起事件。

1. 当鼠标按下时获取该实体。用viewer.scene.pick 来进行获取实体，并锁定相机（需加判断如果不是实体不能锁定相机）
2. 当鼠标移动时动态改变实体经纬度。鼠标移动时，我们需要给刚刚左键按下获取的实体动态赋值新的经纬度，这样实体才能跟随鼠标移动
3. 当鼠标抬起时，销毁事件 

效果图：

 在线预览：

WebGIS之家WebGIS之家,openlayers示例源码，cesium示例源码,openlayers在线调试预览,cesium在线调试预览,webgis,数字地球,数字孪生https://www.webgishome.com/preview?id=47&example_name=dragEntity&title=%E6%8B%96%E6%8B%BD%E5%AE%9E%E4%BD%93

 实现代码：

<template>
    <div id="cesiumContainer"></div>
    <div style="position:absolute;top:10px;left:10px;z-index:9;">
        <el-button @click="state.dragtool?.startDrag()">开始拖拽</el-button>
        <el-button @click="state.dragtool?.cancelDrag()">取消拖拽</el-button>

    </div>
</template>
    
<script setup>
import * as Cesium from "cesium";
import { onMounted, reactive } from "vue";
import DragTool from './DragTool.js'

const state = reactive({
    dragtool: null
})
onMounted(() => {
    const viewer = new Cesium.Viewer("cesiumContainer", {
        infoBox: false, // 禁用沙箱，解决控制台报错
        selectionIndicator: false, //选择指示器
    });
    viewer._cesiumWidget._creditContainer.style.display = "none"; //隐藏logo版权
    viewer.entities.add({
        name: "点",
        position: Cesium.Cartesian3.fromDegrees(-75.0, 30.0), //经纬度转世界坐标
        point: {
            show: true,
            color: Cesium.Color.GREEN,
            pixelSize: 20,
            outlineColor: Cesium.Color.YELLOW,
            outlineWidth: 3,
        },
    })

    state.dragtool = new DragTool({ viewer })

});
</script>
    
<style scoped>
#cesiumContainer {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    margin: 0;
    padding: 0;
    overflow: hidden;
}
</style>

 封装DragTool.js

export default class DragTool {
    constructor({ viewer }) {
        this.viewer = viewer
        this.leftDownFlag = false
        this.pick = null;//储存实体
        this.handler = new Cesium.ScreenSpaceEventHandler(this.viewer.scene.canvas);
    }
    // 开始拖拽
    startDrag() {
        this.leftDownAction()
        this.mouseMoveAction()
        this.leftUpAction()
    }
    leftDownAction() {
        this.handler.setInputAction(e => {
            let pick = this.viewer.scene.pick(e.position);
            if (Cesium.defined(pick) && (pick.id.id)) {
                this.pick = pick
                this.leftDownFlag = true;
                this.viewer.scene.screenSpaceCameraController.enableRotate = false;//锁定相机
            }
        }, Cesium.ScreenSpaceEventType.LEFT_DOWN);
    }

    mouseMoveAction() {
        this.handler.setInputAction(e => {
            if (this.leftDownFlag === true && this.pick != null) {
                let ray = this.viewer.camera.getPickRay(e.endPosition);
                let cartesian = this.viewer.scene.globe.pick(ray, this.viewer.scene);

                this.pick.id.position = cartesian;
                // this.pick.id.position = new Cesium.CallbackProperty(function () {
                //     return cartesian;
                // }, false);//感觉拖拽有点卡顿

            }
        }, Cesium.ScreenSpaceEventType.MOUSE_MOVE);
    }
    leftUpAction() {
        this.handler.setInputAction(e => {
            if (this.leftDownFlag === true && this.pick != null) {
                this.leftDownFlag = false;
                this.pointDraged = null;
                this.viewer.scene.screenSpaceCameraController.enableRotate = true;//解锁相机
            }
        }, Cesium.ScreenSpaceEventType.LEFT_UP);
    }
    //清除鼠标事件
    cancelDrag() {
        this.handler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_DOWN);
        this.handler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_UP);
        this.handler.removeInputAction(Cesium.ScreenSpaceEventType.MOUSE_MOVE);
    }
}