使用Cesium加载并调整3D Tiles

简书不活跃，知乎可以捉住我，上面有动画效果展示。

3dtiles简介

3D Tiles是用于流式传输大规模异构3D地理空间数据集的开放规范。为了扩展Cesium的地形和图像流，3D Tiles将用于流式传输3D内容，包括建筑物，树木，点云和矢量数据。
3D Tiles是目前大火的开源WebGL框架Cesium的御用格式。根据实际体验，3D Tiles和二维地图中的瓦片组织非常相似，在网络中查看3D模型的话，3DTiles的效果还是很不错的，下面我们就来讲一下如何使用vue框架实现cesium加载3dtiles，以及实现对3dtiles的调整组件。

cesium加载3dtiles

cesium加载3dtiles非常简单，调用primitive的add方法即可将3dtiles加载到数字地球上了，代码如下：

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

需要注意的是：

1. 3dtiles文件生成时本身就具有位置和高度（此模型是使用BimAngle转换）
2. 由于生成3dtiles文件时使用的底图和地形和cesium加载的可能不同，再加上人工调整模型位置具有一定的偏差，所以3dtiles模型加载到数字地球上之后，可能需要再次调整位置，所以最好有前端调整工具去进行模型位置的调整，下文会实现这一功能

调整3dtiles位置，包括平移、旋转、缩放、地下可视化

调整3dtiles基本思路为:

1. 设置3dtiles贴地形放置以及初始位置
2. 前端设置input range组件，方便模型的调整

第一步"设置初始位置"的代码：

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
    );
    //获取模型中心点经纬度坐标
    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事件绑定此函数
    that.update3dtilesMaxtrix();

    //模型点击事件
    attachTileset(viewer, currentModel);
    that.tileModelToolVisiable = true; //显示3dtiles调整工具
  })
  .otherwise(function(error) {
    new Error(error);
  });

代码中需要注意的有以下几点：

1. scene.globe.depthTestAgainstTerrain = true;开启地形检测，若不开启地形检测，导致3dtiles模型始终悬浮在地形之上，在调整数字地球视角的时候，会导致3dtiles模型的位置有偏移
2. window.tileModel = currentModel; 由于需要将3dtiles模型的实例赋值到一个全局变量中，方便其他方法调用，注意不可将实例赋值给vue的data中，由于vue data中的数据会进行数据劫持，所以赋值给vue的data会导致数字地球变的非常卡，关于vue的数据劫持，点击这里查看
3. 开启地形可视化为cesium1.68版本添加的功能，要添加此功能需要使用高于1.68的版本，点击这里下载
   

第二步“前端调整工具“的代码：

<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>经度：</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轴旋转</p>
  <el-slider v-model="tileModelTool.rx" @input="update3dtilesMaxtrix" :min="-100" :max="100"></el-slider>
  <p>以y轴旋转</p>
  <el-slider v-model="tileModelTool.ry" @input="update3dtilesMaxtrix" :min="-100" :max="100"></el-slider>
  <p>以z轴旋转</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, //修改旋转
    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);
      //平移 修改经纬度
      var position = Cesium.Cartesian3.fromDegrees(
        this.tileModelTool.longitude,
        this.tileModelTool.latitude,
        this.tileModelTool.height
      );
      var m = Cesium.Transforms.eastNorthUpToFixedFrame(position);
      //旋转、平移矩阵相乘
      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;
      //调整地下透明度
      viewer.scene.globe.translucency.frontFaceAlphaByDistance.nearValue = Cesium.Math.clamp(
        this.tileModelTool.alpha,
        0.0,
        1.0
      );
    }

使用elementui的组件input和range，绑定其change事件为改变3dtiles的函数即可。cesium加载3dtiles还有很多其他的配置和效果，想要学习更多的配置和技巧，请配合cesium的沙盒学习相关的代码.
本文点击3dtiles模型显示信息框的函数代码暂未提供，即上文的 attachTileset(viewer, currentModel) 函数，如需要此部分代码，请先关注作者然后私聊获取。如有疑问欢迎评论区交流，如本文对你有帮助，不要忘记点赞收藏或转发。