cesium編程入門(六)添加 3D Tiles，並調整位置，貼地

添加 3D Tiles，並調整位置

3D Tiles 是什麼

3DTiles數據集是cesium小組AnalyticlGraphics與2016年3月定義的一種數據集，3DTiles數據集以分塊、分級渲染，將大數據量三維數據以分塊，分層的形式組織起來，能夠大量減輕瀏覽器和GPU的負擔是一個優秀的，而且格式公開的數據格式。

3D Tiles將用於流式傳輸3D內容，包括建築物，樹木，點雲和矢量數據。

參考 官網 3dtiles 介紹

3D Tiles

3D Tiles將用於流式傳輸3D內容，包括建築物，樹木，點雲和矢量數據。

contextCapture 能夠將無人機成果轉換成Cesium支持的傾斜攝影成果，當前例子就是使用的這種成果。

數據的加載比較簡單

var tileset = viewer.scene.primitives.add(new Cesium.Cesium3DTileset({
    url: url,  //數據路徑  
    maximumScreenSpaceError: 2,        //最大的屏幕空間偏差
    maximumNumberOfLoadedTiles: 1000,  //最大加載瓦片個數
    modelMatrix: m //形狀矩陣
}));

可是問題在於生成的數據不必定是落在地面上，有多是浮在空中的，例如：

這並非咱們想要的,咱們但願拍攝的成果能貼到地面上，和地圖能很好的融合在一塊兒，相似這樣

因爲單個瓦片的位置信息是寫到了數據中的(.b3dm和對應的json文件中),若是能總體調整加載後的tileset，就會是最好的選擇，這裏就要提到本文的主角：

modelMatrix

經過查看API文檔，咱們發現Cesium3DTile裏面有一個屬性，能夠更改位置(固然經過查看源碼也能夠查這個)

transform : Matrix4              Scene/Cesium3DTile.js 88
The local transform of this tile

說明經過矩陣運算是能夠調整整個數據的顯示位置的

如下說明矩陣平移的狀況：

1. 本身獲取偏移量

參考《WebGl編程指南》的第三章第四章

Tx,Ty,Tz就是咱們須要設置的 x,y,z方向上的平移距離 因爲Cesium的矩陣是列主序的，因此這裏寫成

//建立平移矩陣方法一
// m = Cesium.Matrix4.fromArray([
// 1.0, 0.0, 0.0, 0.0,
// 0.0, 1.0, 0.0, 0.0,
// 0.0, 0.0, 1.0, 0.0,
// x, y, z, 1.0
// ]);

//建立平移矩陣方法二
var translation=Cesium.Cartesian3.fromArray([x, y, z]);
m= Cesium.Matrix4.fromTranslation(translation);

//生效
tileset._modelMatrix = m;

這裏咱們只須要不斷的修改 x,y,z，就能夠調整物體的位置了

獲取 x,y,z 以後,在加載3D Tiles 時將modelMatrix 設置成目標 x,y,z值，就完成了

2.計算偏移量

官方示例 3D Tiles Adjust Height

一步到位

//方法二，直接調用函數，調整高度,height表示物體離地面的高度
function changeHeight(height) {
height = Number(height);
if (isNaN(height)) {
return;
}
var cartographic = Cesium.Cartographic.fromCartesian(tileset.boundingSphere.center);
var surface = Cesium.Cartesian3.fromRadians(cartographic.longitude, cartographic.latitude, cartographic.height);
var offset = Cesium.Cartesian3.fromRadians(cartographic.longitude, cartographic.latitude,height);
var translation = Cesium.Cartesian3.subtract(offset, surface, new Cesium.Cartesian3());
tileset.modelMatrix = Cesium.Matrix4.fromTranslation(translation);
}

參考代碼：lesson02

我的主頁 http://cesium.xin Cesium學習交流羣:593764057