cesium 局部加载_使用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的版本，点击这里下载

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

比例：

v-model="tileModelTool.scale"

label="描述文字"

@change="update3dtilesMaxtrix()"

:step="0.1"

>

位置：

经度：

v-model="tileModelTool.longitude"

label="描述文字"

@change="update3dtilesMaxtrix()"

:step="0.00001"

>

纬度：

v-model="tileModelTool.latitude"

label="描述文字"

@change="update3dtilesMaxtrix()"

:step="0.00001"

>

高度：

v-model="tileModelTool.height"

@input="update3dtilesMaxtrix"

:min="-100"

:max="1000"

>

以x轴旋转

以y轴旋转

以z轴旋转

透明度

v-model="tileModelTool.alpha"

@input="update3dtilesMaxtrix"

:min="0"

:max="1"

:step="0.1"

>

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