欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時(shí)間:2022年06月22日 15:49:00   作者:王+V  
這篇文章主要為大家詳細(xì)介紹了如何利用Cesium實(shí)現(xiàn)在地圖上添加一個(gè)3D模型,并且可以實(shí)現(xiàn)拖拽效果。文中的示例代碼講解詳細(xì),感興趣的可以了解一下

這個(gè)地方是想實(shí)現(xiàn)一個(gè)什么效果呢?就是使用 cesium 在地圖上添加一個(gè)3D模型,然后實(shí)現(xiàn)拖拽效果。

添加基站模型

然后這篇博文介紹的主要不是添加模型,但是也簡(jiǎn)單把代碼直接粘貼過來吧,就不詳細(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;    // 視角切換到模型
  }

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

拖拽

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

比如說這個(gè)拖拽的簡(jiǎn)單邏輯分析哈:

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

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

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

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

      // 注冊(cè)鼠標(biāo)拖拽事件
      viewer.screenSpaceEventHandler.setInputAction((arg) => {// 為viewer綁定MOUSE_MOVE事件監(jiān)聽器(執(zhí)行函數(shù),監(jiān)聽的事件)
        const position = arg.endPosition;// arg有startPosition與endPosition兩個(gè)屬性,即移動(dòng)前后的位置信息:Cartesian2對(duì)象
        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);
  }

完成了這就,就是這么的簡(jiǎn)單。

到此這篇關(guān)于基于Cesium實(shí)現(xiàn)拖拽3D模型的示例代碼的文章就介紹到這了,更多相關(guān)Cesium拖拽3D模型內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!

相關(guān)文章

最新評(píng)論