快捷導(dǎo)航

基于Cesium實現(xiàn)拖拽3D模型的示例代碼

更新時間：2022年06月22日 15:49:00 作者：王+V

這篇文章主要為大家詳細(xì)介紹了如何利用Cesium實現(xiàn)在地圖上添加一個3D模型，并且可以實現(xiàn)拖拽效果。文中的示例代碼講解詳細(xì)，感興趣的可以了解一下

添加基站模型

然后這篇博文介紹的主要不是添加模型，但是也簡單把代碼直接粘貼過來吧，就不詳細(xì)說了。

  // 添加基站模型
  function addSite() {
    let position = Cesium.Cartesian3.fromDegrees(116.236393, 40.075119, 0);
    // 設(shè)置模型方向
    let hpRoll = new Cesium.HeadingPitchRoll(Cesium.Math.toRadians(0), 0, 0);
    let orientation = Cesium.Transforms.headingPitchRollQuaternion(position, hpRoll);
    // 添加模型
    let model = viewer.entities.add({
      id: 'site',   // 模型id
      position: position,   // 模型位置
      orientation: orientation,   // 模型方向
      model: {
        uri: './models/siteModel/scene.gltf',   // 模型路徑，自己換成自己的模型
        scale: 1,
        show: true, // 模型是否可見
      },
      description: '基站模型'  // 添加模型描述
    });
    viewer.trackedEntity = model;    // 視角切換到模型
  }

上邊的代碼就完成了在界面上添加模型功能。

拖拽

其實拖拽就是給這個cesium加一個監(jiān)聽事件。

比如說這個拖拽的簡單邏輯分析哈：

1、鼠標(biāo)按下事件，如果有模型的話，可以給模型設(shè)置一個顏色，知道按下選中的是哪個模型。

2、然后再監(jiān)聽鼠標(biāo)拖拽事件，獲取鼠標(biāo)拖拽的位置，賦值給模型。

3、鼠標(biāo)抬起事件，結(jié)束鼠標(biāo)移動事件，然后把顏色改回去。

   // 注冊事件
  function setHandler() {
    handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
    // 注冊鼠標(biāo)按下事件
    handler.setInputAction((e) => {
      const pick = viewer.scene.pick(e.position);
      if (!Cesium.defined(pick)) { return; };// 如果點擊空白區(qū)域，則不往下執(zhí)行
      viewer.scene.screenSpaceCameraController.enableRotate = false;// 將相機(jī)鎖定，不然后續(xù)移動實體時相機(jī)也會動
      pick.id.model.color = Cesium.Color.fromAlpha(Cesium.Color.RED, 1)  //設(shè)置顏色

      // 注冊鼠標(biāo)拖拽事件
      viewer.screenSpaceEventHandler.setInputAction((arg) => {// 為viewer綁定MOUSE_MOVE事件監(jiān)聽器（執(zhí)行函數(shù)，監(jiān)聽的事件）
        const position = arg.endPosition;// arg有startPosition與endPosition兩個屬性，即移動前后的位置信息：Cartesian2對象
        const cartesian = viewer.scene.globe.pick(viewer.camera.getPickRay(position), viewer.scene);//將Cartesian2轉(zhuǎn)為Cartesian3
        pick.id.position._value = cartesian
      }, Cesium.ScreenSpaceEventType.MOUSE_MOVE);


      // 綁定鼠標(biāo)抬起事件
      viewer.screenSpaceEventHandler.setInputAction(({ position }) => {//為viewer綁定LEFT_UP事件監(jiān)聽器（執(zhí)行函數(shù)，監(jiān)聽的事件）
        viewer.scene.screenSpaceCameraController.enableRotate = true;// 取消相機(jī)鎖定
        pick.id.model.color = null  //設(shè)置顏色
        viewer.screenSpaceEventHandler.removeInputAction(Cesium.ScreenSpaceEventType.MOUSE_MOVE);// 解除viewer的MOUSE_MOVE事件監(jiān)聽器
      }, Cesium.ScreenSpaceEventType.LEFT_UP)

    }, Cesium.ScreenSpaceEventType.LEFT_DOWN);
  }