Cesium — Entity 拖拽、属性修改

简介

目标：

1. 通过鼠标拖拽改变 Entity 模型的位置；
2. 选中 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);