簡(jiǎn)書(shū)不活躍横漏，知乎可以捉住我谨设，上面有動(dòng)畫(huà)效果展示。
3dtiles簡(jiǎn)介
3D Tiles是用于流式傳輸大規(guī)模異構(gòu)3D地理空間數(shù)據(jù)集的開(kāi)放規(guī)范缎浇。為了擴(kuò)展Cesium的地形和圖像流扎拣，3D Tiles將用于流式傳輸3D內(nèi)容，包括建筑物素跺，樹(shù)木二蓝，點(diǎn)云和矢量數(shù)據(jù)。
3D Tiles是目前大火的開(kāi)源WebGL框架Cesium的御用格式指厌。根據(jù)實(shí)際體驗(yàn)刊愚，3D Tiles和二維地圖中的瓦片組織非常相似，在網(wǎng)絡(luò)中查看3D模型的話踩验，3DTiles的效果還是很不錯(cuò)的鸥诽，下面我們就來(lái)講一下如何使用vue框架實(shí)現(xiàn)cesium加載3dtiles，以及實(shí)現(xiàn)對(duì)3dtiles的調(diào)整組件箕憾。
cesium加載3dtiles
cesium加載3dtiles非常簡(jiǎn)單牡借，調(diào)用primitive的add方法即可將3dtiles加載到數(shù)字地球上了，代碼如下：
var tilesetModel = new Cesium.Cesium3DTileset({
url: "./大橋7/tileset.json"
});
viewer.scene.primitives.add(tilesetModel);
需要注意的是：
- 3dtiles文件生成時(shí)本身就具有位置和高度（此模型是使用BimAngle轉(zhuǎn)換）
- 由于生成3dtiles文件時(shí)使用的底圖和地形和cesium加載的可能不同袭异，再加上人工調(diào)整模型位置具有一定的偏差蓖捶，所以3dtiles模型加載到數(shù)字地球上之后，可能需要再次調(diào)整位置扁远，所以最好有前端調(diào)整工具去進(jìn)行模型位置的調(diào)整俊鱼，下文會(huì)實(shí)現(xiàn)這一功能
調(diào)整3dtiles位置，包括平移畅买、旋轉(zhuǎn)并闲、縮放、地下可視化
調(diào)整3dtiles基本思路為:
- 設(shè)置3dtiles貼地形放置以及初始位置
- 前端設(shè)置
input range組件谷羞，方便模型的調(diào)整
第一步"設(shè)置初始位置"的代碼：
tilesetModel.readyPromise
.then(function(currentModel) {
var scene = window.earth.scene;
var globe = scene.globe;
//開(kāi)啟地下可視化
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
);
//獲取模型中心點(diǎn)經(jīng)緯度坐標(biāo)
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事件綁定此函數(shù)
that.update3dtilesMaxtrix();
//模型點(diǎn)擊事件
attachTileset(viewer, currentModel);
that.tileModelToolVisiable = true; //顯示3dtiles調(diào)整工具
})
.otherwise(function(error) {
new Error(error);
});
代碼中需要注意的有以下幾點(diǎn)：
- scene.globe.depthTestAgainstTerrain = true;開(kāi)啟地形檢測(cè)，若不開(kāi)啟地形檢測(cè)犀填，導(dǎo)致3dtiles模型始終懸浮在地形之上蠢壹，在調(diào)整數(shù)字地球視角的時(shí)候，會(huì)導(dǎo)致3dtiles模型的位置有偏移
- window.tileModel = currentModel; 由于需要將3dtiles模型的實(shí)例賦值到一個(gè)全局變量中九巡，方便其他方法調(diào)用图贸，注意不可將實(shí)例賦值給vue的data中，由于vue data中的數(shù)據(jù)會(huì)進(jìn)行數(shù)據(jù)劫持冕广，所以賦值給vue的data會(huì)導(dǎo)致數(shù)字地球變的非呈枞眨卡，關(guān)于vue的數(shù)據(jù)劫持撒汉，點(diǎn)擊這里查看
- 開(kāi)啟地形可視化為cesium1.68版本添加的功能沟优，要添加此功能需要使用高于1.68的版本，點(diǎn)擊這里下載
第二步“前端調(diào)整工具“的代碼：
<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>經(jīng)度：</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軸旋轉(zhuǎn)</p>
<el-slider v-model="tileModelTool.rx" @input="update3dtilesMaxtrix" :min="-100" :max="100"></el-slider>
<p>以y軸旋轉(zhuǎn)</p>
<el-slider v-model="tileModelTool.ry" @input="update3dtilesMaxtrix" :min="-100" :max="100"></el-slider>
<p>以z軸旋轉(zhuǎn)</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, //修改旋轉(zhuǎn)
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);
//平移 修改經(jīng)緯度
var position = Cesium.Cartesian3.fromDegrees(
this.tileModelTool.longitude,
this.tileModelTool.latitude,
this.tileModelTool.height
);
var m = Cesium.Transforms.eastNorthUpToFixedFrame(position);
//旋轉(zhuǎn)睬辐、平移矩陣相乘
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;
//調(diào)整地下透明度
viewer.scene.globe.translucency.frontFaceAlphaByDistance.nearValue = Cesium.Math.clamp(
this.tileModelTool.alpha,
0.0,
1.0
);
}
使用elementui的組件input和range挠阁，綁定其change事件為改變3dtiles的函數(shù)即可。cesium加載3dtiles還有很多其他的配置和效果溯饵，想要學(xué)習(xí)更多的配置和技巧鹃唯，請(qǐng)配合cesium的沙盒學(xué)習(xí)相關(guān)的代碼.
本文點(diǎn)擊3dtiles模型顯示信息框的函數(shù)代碼暫未提供，即上文的 attachTileset(viewer, currentModel) 函數(shù)瓣喊，如需要此部分代碼，請(qǐng)先關(guān)注作者然后私聊獲取黔酥。如有疑問(wèn)歡迎評(píng)論區(qū)交流藻三，如本文對(duì)你有幫助，不要忘記點(diǎn)贊收藏或轉(zhuǎn)發(fā)跪者。
