简介
目标：
- 通过鼠标拖拽改变 Entity 模型的位置；
- 选中 Entity ，获取其姿态、比例等属性信息，实现对其属性修改。
思路：
- 鼠标左键按下选中模型，鼠标移动改变所选模型的位置，鼠标左键抬起结束拖拽，实现目标1。
- 鼠标左键点击选中模型，获取该对象相应属性信息，进而做到对其修改，实现目标2。
1. 选中Entity
Cesium 中使用 scene.pick 或 scene.drillPick 方法选中 Entity 对象；当多个 Entity 互相覆盖时，前者选中的是最上层的 Entity，后者选中的是鼠标下所有的 Entity。
let picked = viewer.scene.pick(windowPosition);
let pickedArray = viewer.scene.dillPick(windowPosition);
2. 拖拽Entity
这里主要实现GLTF三维模型的拖拽，其它类型Entity的拖拽可作参考。
（1）首先定义三个函数，分别对应左键按下、鼠标移动、左键抬起。
let leftDownFlag = false; // 鼠标左键是否按下
let pickedEntity = null; //被选中的Entity
// 拖拽模型-左键按下
function leftDownAction(e) {
leftDownFlag = true;
let picked = viewer.scene.pick(e.position);
if (picked) {
document.body.style.cursor = 'move';
pickedEntity = Cesium.defaultValue(picked.id, picked.primitive.id);
if (pickedEntity instanceof Cesium.Entity && pickedEntity.model) {
//锁定相机
viewer.scene.screenSpaceCameraController.enableRotate = false;
}
}
}
// 拖拽模型-鼠标移动
function mouseMoveAction(e) {
if (leftDownFlag && pickedEntity) {
// let ray = viewer.camera.getPickRay(e.endPosition);
// let cartesian = viewer.scene.globe.pick(ray, viewer.scene);
let cartesian = viewer.scene.camera.pickEllipsoid(
e.endPosition,
viewer.scene.globe.ellipsoid
);
pickedEntity.position = cartesian;
}
}
// 拖拽模型-左键抬起
function leftUpAction(e) {
document.body.style.cursor = 'default';
leftDownFlag = false;
pickedEntity = null;
// 解除相机锁定
viewer.scene.screenSpaceCameraController.enableRotate = true;
}
注意两点：
- 左键按下后锁定相机，防止拖拽时相机视角改变，左键抬起后解除锁定。
- 鼠标按下和抬起事件中，获取屏幕坐标的属性是 position， 而鼠标移动时获取屏幕坐标的属性是 endPosition。
(2) 给 Viewer 添加相应鼠标事件
viewer.screenSpaceEventHandler.setInputAction((e) => {
leftDownAction(e);
}, Cesium.ScreenSpaceEventType.LEFT_DOWN);
viewer.screenSpaceEventHandler.setInputAction((e) => {
mouseMoveAction(e);
}, Cesium.ScreenSpaceEventType.MOUSE_MOVE);
viewer.screenSpaceEventHandler.setInputAction((e) => {
leftUpAction(e);
}, Cesium.ScreenSpaceEventType.LEFT_UP);
3. 修改属性
选中 Entity 后，即可获取相应的属性信息。下面的 pickModel 函数传入windowPosition，返回一个 Entity 对象。
function pickModel(windowPosition) {
let picked = viewer.scene.pick(windowPosition);
if (Cesium.defined(picked)) {
let entity = Cesium.defaultValue(picked.id, picked.primitive.id);
if (entity instanceof Cesium.Entity) {
if (entity.model) {
console.log('model');
return entity;
}
}
}
}
获取到 Entity 对象后，可对其属性进行修改：
viewer.screenSpaceEventHandler.setInputAction((e) => {
let entity = pickModel(e.position);
// 获取模型的比例
let scale = entity.model.scale.getValue();
// 设置模型的比例
entity.model.scale.setValue(2.0);
// 获取模型(当前)的位置
let position = entity.position.getValue(Cesium.JulianDate.fromDate(new Date()));
// 设置模型的位置
let position2 = Cesium.Cartesian3.fromDegrees(114.08, 23.55, 1000);
entity.position.setValue(position2);
// 设置模型的方位
let heading = Cesium.Math.toRadians(90);
let pitch = Cesium.Math.toRadians(0);
let roll = Cesium.Math.toRadians(0);
let orientation = Cesium.Transforms.headingPitchRollQuaternion(
position,
new Cesium.HeadingPitchRoll(heading, pitch, roll)
);
entity.orientation = orientation;
}, Cesium.ScreenSpaceEventType.LEFT_CLICK);
