Cesium 实现拖动点或模型

在Cesium的三维空间里，点和模型都是Entity，添加方式很类似，只是对应的数据源不一样而已。在Cesium里如何实现点或模型随鼠标拖动的效果。这里来简单介绍一下相关代码。

效果如下：

代码

添加点代码

      let pointOption= {show: true,pixelSize: 10,heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,color: Cesium.Color.RED,outlineColor: Cesium.Color.YELLOW,outlineWidth: 3,disableDepthTestDistance: Number.POSITIVE_INFINITY,distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 20000)}let entity = new Cesium.Entity({name: 'test',show: true,position: position,point: this.pointOption,});window.viewer.entities.add(entity);

点随鼠标移动，代码如下：

let modelDragHandler = new Cesium.ScreenSpaceEventHandler(window.viewer.scene.canvas);modelDragHandler.setInputAction(({position}) => { // 为viewer绑定MOUSE_DOWN事件监听器（执行函数，监听的事件）const pickInfo = window.viewer.scene.pick(position);console.log(pickInfo)if (!pickInfo) {return;}// 如果点击空白区域，则不往下执行window.viewer.scene.screenSpaceCameraController.enableRotate = false; // 将相机锁定，不然后续移动实体时相机也会动modelDragHandler.setInputAction((arg) => { // 为viewer绑定MOUSE_MOVE事件监听器（执行函数，监听的事件）console.log("移动")const position = arg.endPosition; // arg有startPosition与endPosition两个属性，即移动前后的位置信息：Cartesian2对象const cartesian = window.viewer.scene.globe.pick(window.viewer.camera.getPickRay(position), window.viewer.scene); //将Cartesian2转为Cartesian3const selectedEntity = window.viewer.selectedEntity; // 实体if (!selectedEntity) {return false;}//注意需要赋值三维坐标selectedEntity.position=cartesian// 更新实体位置为当前鼠标位置}, Cesium.ScreenSpaceEventType.MOUSE_MOVE);modelDragHandler.setInputAction(() => { //为viewer绑定LEFT_UP事件监听器（执行函数，监听的事件）modelDragHandler.removeInputAction(Cesium.ScreenSpaceEventType.MOUSE_MOVE); // 解除viewer的MOUSE_MOVE事件监听器modelDragHandler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_UP); // 解除viewer的LEFT_UP事件监听器window.viewer.scene.screenSpaceCameraController.enableRotate = true; // 取消相机锁定console.log("抬起")}, Cesium.ScreenSpaceEventType.LEFT_UP)}, Cesium.ScreenSpaceEventType.LEFT_DOWN)

注意

上面的代码中，移动的是选中的模型，需要先点选一下模型，然后再鼠标拖动。如果你想要直接拖动，就需要你再修改一下代码了。

Cesium 实现拖动点或模型相关推荐

Cesium 实战 - AGI_articulations 扩展：模型自定义关节动作
Cesium 实战 - AGI_articulations 扩展:模型自定义关节动作简要概述两种方式实现模型组件动作模型添加关节(articulations) 1.导入模型(J15.glb) 2 ...
Cesium因光照影响导致模型亮度发生变化
Cesium因光照影响导致模型亮度发生变化项目中遇到发布的bim模型在当天不同时间的模型亮度发生变化,尤其是晚上的时候会出现模型很暗.尴了个尬,一度怀疑是自己眼睛有问题,连续几天出现同样的情况,想到 ...
CESIUM加载glb的模型
CESIUM加载glb的模型 1.首先有一个glb格式的模型 // 加载gltf的模型 //url模型路径可以是.glb或者gltf等,height距地高度0为贴地 function createM ...
cesium首次加载gltf模型成功
接此: https://blog.csdn.net/bcbobo21cn/article/details/111305160 根据资料gltf格式模型可以直接在cesium上加载: 网上搜索gltf, ...
cesium使用primitives加载模型数据，点击事件
//primitives加载原型模型 var billboards = viewer.scene.primitives.add(new Cesium.BillboardCollection()); f ...
利用Cesium加载 M3D BIM 模型
本例展示如何在在三维场景中加载 M3D 的 BIM 模型数据,对接 IGServer 发布的三维地图服务. 实现步骤 1. 引用开发库: 本示例引用 local 本地[include-cesium-l ...
Cesium案例解析(四)——3DModels模型加载
文章目录 1. 概述 2. 代码 3. 解析 4. 参考 1. 概述 Cesium自带的3D Models示例,展示了如何加载glTF格式三维模型数据.glTF是为WebGL量身定制的数据格式,在网络 ...
Cesium 体积测量支持倾斜模型（不支持地形）
使用方法操作简单如图所示: 清除数据操作如图所示: 操作说明:左键开始绘制,右键开始结束效果: 操作说明:我是引入truf,将不规则的多边形切割一个个三角形行的如果报如下错误,请查看turf官方引 ...
Cesium.js 加载3D模型
一.Cesuimjs介绍 Cesiunjs是一套GIS行业中进行地图渲染的js库,该库使用的WebGL进行地图渲染.并且结合HTML5进行相应,从而实现3D中渲染地图.本篇文章则介绍如何将后缀名为ma ...

Cesium 实现拖动点或模型

效果如下：

代码

注意

Cesium 实现拖动点或模型相关推荐

最新文章

热门文章