簡(jiǎn)書不活躍，知乎可以捉住我，上面有動(dòng)畫效果展示。

3dtiles簡(jiǎn)介

3D Tiles是用于流式傳輸大規(guī)模異構(gòu)3D地理空間數(shù)據(jù)集的開放規(guī)范。為了擴(kuò)展Cesium的地形和圖像流，3D Tiles將用于流式傳輸3D內(nèi)容，包括建筑物，樹木，點(diǎn)云和矢量數(shù)據(jù)。
3D Tiles是目前大火的開源WebGL框架Cesium的御用格式。根據(jù)實(shí)際體驗(yàn)，3D Tiles和二維地圖中的瓦片組織非常相似，在網(wǎng)絡(luò)中查看3D模型的話，3DTiles的效果還是很不錯(cuò)的，下面我們就來(lái)講一下如何使用vue框架實(shí)現(xiàn)cesium加載3dtiles，以及實(shí)現(xiàn)對(duì)3dtiles的調(diào)整組件。

cesium加載3dtiles

cesium加載3dtiles非常簡(jiǎn)單，調(diào)用primitive的add方法即可將3dtiles加載到數(shù)字地球上了，代碼如下：

    var tilesetModel = new Cesium.Cesium3DTileset({
      url: "./大橋7/tileset.json"
    });
viewer.scene.primitives.add(tilesetModel);

需要注意的是：

1. 3dtiles文件生成時(shí)本身就具有位置和高度（此模型是使用BimAngle轉(zhuǎn)換）
2. 由于生成3dtiles文件時(shí)使用的底圖和地形和cesium加載的可能不同，再加上人工調(diào)整模型位置具有一定的偏差，所以3dtiles模型加載到數(shù)字地球上之后，可能需要再次調(diào)整位置，所以最好有前端調(diào)整工具去進(jìn)行模型位置的調(diào)整，下文會(huì)實(shí)現(xiàn)這一功能

調(diào)整3dtiles位置，包括平移、旋轉(zhuǎn)、縮放、地下可視化

調(diào)整3dtiles基本思路為:

1. 設(shè)置3dtiles貼地形放置以及初始位置
2. 前端設(shè)置input range組件，方便模型的調(diào)整

第一步"設(shè)置初始位置"的代碼：

tilesetModel.readyPromise
  .then(function(currentModel) {
    var scene = window.earth.scene;
    var globe = scene.globe;
    //開啟地下可視化
    scene.screenSpaceCameraController.enableCollisionDetection = false;
    globe.translucency.frontFaceAlphaByDistance = new Cesium.NearFarScalar(
      1000.0,
      0.0,
      2000.0,
      1.0
    );
    globe.translucency.enabled = true;
    window.tileModel = currentModel;
    scene.globe.depthTestAgainstTerrain = true;
    viewer.zoomTo(
      currentModel,
      new Cesium.HeadingPitchRange(-0.5, -0.5, 800)
    );
    var boundingSphere = currentModel.boundingSphere;
    var cartographic = Cesium.Cartographic.fromCartesian(
      boundingSphere.center
    );
    //獲取模型中心點(diǎn)經(jīng)緯度坐標(biāo)
    that.tileModelTool.longitude =
      (cartographic.longitude / Math.PI) * 180;
    that.tileModelTool.latitude =
      (cartographic.latitude / Math.PI) * 180;
    that.tileModelTool.height = cartographic.height;

    //修改3dtiles位置，input，range組件的change事件綁定此函數(shù)
    that.update3dtilesMaxtrix();

    //模型點(diǎn)擊事件
    attachTileset(viewer, currentModel);
    that.tileModelToolVisiable = true; //顯示3dtiles調(diào)整工具
  })
  .otherwise(function(error) {
    new Error(error);
  });

代碼中需要注意的有以下幾點(diǎn)：

1. scene.globe.depthTestAgainstTerrain = true;開啟地形檢測(cè)，若不開啟地形檢測(cè)，導(dǎo)致3dtiles模型始終懸浮在地形之上，在調(diào)整數(shù)字地球視角的時(shí)候，會(huì)導(dǎo)致3dtiles模型的位置有偏移
2. window.tileModel = currentModel; 由于需要將3dtiles模型的實(shí)例賦值到一個(gè)全局變量中，方便其他方法調(diào)用，注意不可將實(shí)例賦值給vue的data中，由于vue data中的數(shù)據(jù)會(huì)進(jìn)行數(shù)據(jù)劫持，所以賦值給vue的data會(huì)導(dǎo)致數(shù)字地球變的非?？ǎP(guān)于vue的數(shù)據(jù)劫持，點(diǎn)擊這里查看
3. 開啟地形可視化為cesium1.68版本添加的功能，要添加此功能需要使用高于1.68的版本，點(diǎn)擊這里下載
   

第二步“前端調(diào)整工具“的代碼：

<div class="tileModelTool" v-if="tileModelToolVisiable">
  <p>比例：</p>
  <el-input-number
    v-model="tileModelTool.scale"
    label="描述文字"
    @change="update3dtilesMaxtrix()"
    :step="0.1"
  ></el-input-number>
  <p>位置：</p>
  <p>經(jīng)度：</p>
  <el-input-number
    v-model="tileModelTool.longitude"
    label="描述文字"
    @change="update3dtilesMaxtrix()"
    :step="0.00001"
  ></el-input-number>
  <p>緯度：</p>
  <el-input-number
    v-model="tileModelTool.latitude"
    label="描述文字"
    @change="update3dtilesMaxtrix()"
    :step="0.00001"
  ></el-input-number>
  <p>高度：</p>
  <el-slider
    v-model="tileModelTool.height"
    @input="update3dtilesMaxtrix"
    :min="-100"
    :max="1000"
  ></el-slider>
  <p>以x軸旋轉(zhuǎn)</p>
  <el-slider v-model="tileModelTool.rx" @input="update3dtilesMaxtrix" :min="-100" :max="100"></el-slider>
  <p>以y軸旋轉(zhuǎn)</p>
  <el-slider v-model="tileModelTool.ry" @input="update3dtilesMaxtrix" :min="-100" :max="100"></el-slider>
  <p>以z軸旋轉(zhuǎn)</p>
  <el-slider v-model="tileModelTool.rz" @input="update3dtilesMaxtrix" :min="-100" :max="100"></el-slider>

  <p>透明度</p>
  <el-slider
    v-model="tileModelTool.alpha"
    @input="update3dtilesMaxtrix"
    :min="0"
    :max="1"
    :step="0.1"
  ></el-slider>
</div>

  tileModelTool: {
    scale: 1.0,
    longitude: 0,
    latitude: 0,
    height: 419, //修改高度
    rx: 0,
    ry: 0,
    rz: 33.5, //修改旋轉(zhuǎn)
    alpha: 0.5
  }

    update3dtilesMaxtrix() {
      var mx = Cesium.Matrix3.fromRotationX(
        Cesium.Math.toRadians(this.tileModelTool.rx)
      );
      var my = Cesium.Matrix3.fromRotationY(
        Cesium.Math.toRadians(this.tileModelTool.ry)
      );
      var mz = Cesium.Matrix3.fromRotationZ(
        Cesium.Math.toRadians(this.tileModelTool.rz)
      );
      var rotationX = Cesium.Matrix4.fromRotationTranslation(mx);
      var rotationY = Cesium.Matrix4.fromRotationTranslation(my);
      var rotationZ = Cesium.Matrix4.fromRotationTranslation(mz);
      //平移 修改經(jīng)緯度
      var position = Cesium.Cartesian3.fromDegrees(
        this.tileModelTool.longitude,
        this.tileModelTool.latitude,
        this.tileModelTool.height
      );
      var m = Cesium.Transforms.eastNorthUpToFixedFrame(position);
      //旋轉(zhuǎn)、平移矩陣相乘
      Cesium.Matrix4.multiply(m, rotationX, m);
      Cesium.Matrix4.multiply(m, rotationY, m);
      Cesium.Matrix4.multiply(m, rotationZ, m);
      //縮放 修改縮放比例
      var scale = Cesium.Matrix4.fromUniformScale(this.tileModelTool.scale);
      Cesium.Matrix4.multiply(m, scale, m);
      //賦值給tileset
      window.tileModel._root.transform = m;
      //調(diào)整地下透明度
      viewer.scene.globe.translucency.frontFaceAlphaByDistance.nearValue = Cesium.Math.clamp(
        this.tileModelTool.alpha,
        0.0,
        1.0
      );
    }

使用elementui的組件input和range，綁定其change事件為改變3dtiles的函數(shù)即可。cesium加載3dtiles還有很多其他的配置和效果，想要學(xué)習(xí)更多的配置和技巧，請(qǐng)配合cesium的沙盒學(xué)習(xí)相關(guān)的代碼.
本文點(diǎn)擊3dtiles模型顯示信息框的函數(shù)代碼暫未提供，即上文的 attachTileset(viewer, currentModel) 函數(shù)，如需要此部分代碼，請(qǐng)先關(guān)注作者然后私聊獲取。如有疑問(wèn)歡迎評(píng)論區(qū)交流，如本文對(duì)你有幫助，不要忘記點(diǎn)贊收藏或轉(zhuǎn)發(fā)。