简书不活跃，知乎可以捉住我，上面有动画效果展示。
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);
需要注意的是：
- 3dtiles文件生成时本身就具有位置和高度（此模型是使用BimAngle转换）
- 由于生成3dtiles文件时使用的底图和地形和cesium加载的可能不同，再加上人工调整模型位置具有一定的偏差，所以3dtiles模型加载到数字地球上之后，可能需要再次调整位置，所以最好有前端调整工具去进行模型位置的调整，下文会实现这一功能
调整3dtiles位置，包括平移、旋转、缩放、地下可视化
调整3dtiles基本思路为:
- 设置3dtiles贴地形放置以及初始位置
- 前端设置
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);
});
代码中需要注意的有以下几点：
- scene.globe.depthTestAgainstTerrain = true;开启地形检测，若不开启地形检测，导致3dtiles模型始终悬浮在地形之上，在调整数字地球视角的时候，会导致3dtiles模型的位置有偏移
- window.tileModel = currentModel; 由于需要将3dtiles模型的实例赋值到一个全局变量中，方便其他方法调用，注意不可将实例赋值给vue的data中，由于vue data中的数据会进行数据劫持，所以赋值给vue的data会导致数字地球变的非常卡，关于vue的数据劫持，点击这里查看
- 开启地形可视化为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) 函数，如需要此部分代码，请先关注作者然后私聊获取。如有疑问欢迎评论区交流，如本文对你有帮助，不要忘记点赞收藏或转发。
