cesium中实现鼠标拖动实体功能

实现在三维场景中对添加到场景中的s3m小品模型进行拖拽重新定位

let modelDragHandler;
function openEntityDrag() {
     let self = this;
     if (!modelDragHandler) {
         modelDragHandler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
         modelDragHandler.setInputAction(({
             position
         }) => { // 为viewer绑定MOUSE_DOWN事件监听器(执行函数,监听的事件)
             const pickInfo = viewer.scene.pick(position);
             if (!pickInfo) {
                 return;
             }; // 如果点击空白区域,则不往下执行
             viewer.scene.screenSpaceCameraController.enableRotate = false; // 将相机锁定,不然后续移动实体时相机也会动
             modelDragHandler.setInputAction((arg) => { // 为viewer绑定MOUSE_MOVE事件监听器(执行函数,监听的事件)
                 const position = arg.endPosition; // arg有startPosition与endPosition两个属性,即移动前后的位置信息:Cartesian2对象
                 const cartesian = viewer.scene.globe.pick(viewer.camera.getPickRay(position),viewer.scene); //将Cartesian2转为Cartesian3
                     const selectedEntity = viewer.selectedEntity; // 实体
                     if(!selectedEntity) {
                         return false;
                     }
                 let instance = selectedEntity.primitive;
                 // instance._position = cartesian;// 更新实体位置为当前鼠标位置
                 let oldPosition = selectedEntity.primitive.position;
                 instance.updatePosition(cartesian);
             }, Cesium.ScreenSpaceEventType.MOUSE_MOVE);

             modelDragHandler.setInputAction(({
                 position
             }) => { //为viewer绑定LEFT_UP事件监听器(执行函数,监听的事件)
                 modelDragHandler.removeInputAction(Cesium.ScreenSpaceEventType.MOUSE_MOVE); // 解除viewer的MOUSE_MOVE事件监听器
                 modelDragHandler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_UP); // 解除viewer的LEFT_UP事件监听器
                 viewer.scene.screenSpaceCameraController.enableRotate = true; // 取消相机锁定
             }, Cesium.ScreenSpaceEventType.LEFT_UP)

         }, Cesium.ScreenSpaceEventType.LEFT_DOWN)

     }
 }

实现效果

在这里插入图片描述

Cesium是一个开源的JavaScript库,用于创建高度交互式的三维地图应用。在Cesium中,你可以通过其强大的拖动功能让用户直接操作地图上的实体。例如,你可以创建一个可拖动的3D模型,如建筑物、地形特征或其他地理标志。 拖动实体的过程通常涉及以下几个步骤: 1. **获取场景元素**:首先需要获取你要控制拖动的3D模型物体,这通常是`Entity`对象的一部分。 2. **添加拖动手柄**:可以为实体添加一个图标或用户界面元素作为拖动的起点。 3. **事件处理**:监听鼠标或触摸事件,比如`dragstart`、`mousedown`等,当用户开始按住并移动鼠标时触发。 4. **更新位置**:根据用户的输入实时更新实体的位置,你可以通过设置`position`属性来改变其在场景中的位置。 5. **防止穿透**:在拖拽过程中,还需要考虑到碰撞检测,避免实体穿透到其他物体或地图表面。 ```javascript // 示例代码 const entity = viewer.entities.add({ // 实体配置... }); entity.properties.position = new Cesium.Cartesian3(0, 0, 0); // 初始位置 entity.onDragStart.addEventListener(function (event) { event.pickInfo.point = viewer.scene.screenToCartesian(event.position); }); viewer.scene.input.addPickHandler(entity.onDragMove, { preventDefault: true }); entity.onDragEnd.addEventListener(function (event) { const newPosition = viewer.scene.screenToCartesian(event.position); entity.properties.position = newPosition; }); ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值