使用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);
需要注意的是:
- 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)
函数,如需要此部分代码,请先关注作者然后私聊获取。如有疑问欢迎评论区交流,如本文对你有帮助,不要忘记点赞收藏或转发。