ceisum 鼠标拖拽移动实体-Toy模板网

这篇具有很好参考价值的文章主要介绍了ceisum 鼠标拖拽移动实体。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

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

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

效果图：

cesium 拖拽,Cesium,javascript,开发语言,ecmascript 文章来源地址https://www.toymoban.com/news/detail-641150.html

实现代码：

<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);
    }
}

到了这里，关于ceisum 鼠标拖拽移动实体的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！