3dtiles格式_使用Cesium加载并调整3D Tiles

首先我们先来感受一下实现之后的效果：

知乎视频​www.zhihu.com

3dtiles简介

3D Tiles是用于流式传输大规模异构3D地理空间数据集的开放规范。为了扩展Cesium的地形和图像流，3D Tiles将用于流式传输3D内容，包括建筑物，树木，点云和矢量数据。

3D Tiles是目前大火的开源WebGL框架Cesium的御用格式。根据实际体验，3D Tiles和二维地图中的瓦片组织非常相似，在网络中查看3D模型的话，3D Tiles的效果还是很不错的，下面我们就来学习一下如何使用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组件，方便模型的调整

第一步"设置初始位置