美文网首页开源
Cesium — Entity 拖拽、属性修改

Cesium — Entity 拖拽、属性修改

作者: 芒果香蕉_ | 来源:发表于2021-02-24 16:05 被阅读0次

简介

目标

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

相关文章

网友评论

    本文标题:Cesium — Entity 拖拽、属性修改

    本文链接:https://www.haomeiwen.com/subject/zerrfltx.html