Cesium入門10 - 3D Tiles

Cesium入門10 - 3D Tiles

Cesium中文網：http://cesiumcn.org/ | 國內快速訪問：http://cesium.coinidea.com/

咱們團隊有時把Cesium描述成一個真實世界數據的3D遊戲引擎。然而，使用真實世界的數據比使用典型的視頻遊戲數據資料要困可貴多，由於真實數據多是難以置信的高分辨率，而且須要精確的可視化。幸運的是，Cesium 與開源社區合做開發了3D Tiles，這是一個開放的規範，用於傳輸海量的異構三維地理空間數據集。

使用概念上相似於Cesium的terrain和imagery的流技術，3D Tiles 使得能夠查看本來不能交互式查看的巨大的模型，包括建築物數據集、CAD（或BIM）模型、點雲和攝影測量模型。

• The 3D Tiles Inspector 是一種在遮罩hood下提供查看能力的調試工具。

下面是一些展現不一樣格式的3D Tiles演示：

• Photogrammetry Model
• Building Information Model
• Point Cloud Model
• All Formats

在咱們的應用中，咱們將使用Cesium3DTileset經過展現紐約全部建築物的全3D模型來爲咱們的可視化添加現實主義！這種紐約 tilese託管在Cesium Ion中，咱們可使用IonResource.fromAssetId添加它：

// Load the NYC buildings tileset
var city = viewer.scene.primitives.add(new Cesium.Cesium3DTileset({ url: Cesium.IonResource.fromAssetId(3839) }));

你可能注意到建築物沒有正確地定位在地平面上。幸運的是，它很容易修復。咱們能夠經過修改模型矩陣modelMatrix來調整tileset的位置。

咱們能夠經過將tileset的邊界球轉換成地圖Cartographic，而後添加指望的偏移量並重置模型矩陣，從地面找到模型modelMatrix的當前偏移量。

// Adjust the tileset height so its not floating above terrain
var heightOffset = -32;
city.readyPromise.then(function(tileset) {
    // Position tileset
    var boundingSphere = tileset.boundingSphere;
    var cartographic = Cesium.Cartographic.fromCartesian(boundingSphere.center);
    var surface = Cesium.Cartesian3.fromRadians(cartographic.longitude, cartographic.latitude, 0.0);
    var offset = Cesium.Cartesian3.fromRadians(cartographic.longitude, cartographic.latitude, heightOffset);
    var translation = Cesium.Cartesian3.subtract(offset, surface, new Cesium.Cartesian3());
    tileset.modelMatrix = Cesium.Matrix4.fromTranslation(translation);
});

如今在咱們的場景中有110萬個建築模型流。

3D Tiles 還容許咱們使用3D Tiles styling語言 來調整咱們的樣式。3D Tiles 樣式定義了用於評估顏色（RGB和透明度）的表達式，並顯示了Cesium3DTileFeature特徵的屬性，這是tileset的一部分，例如城市中的單個建築物。樣式一般基於存儲在瓦片的批處理表中的特徵屬性。特徵屬性能夠是高度、名稱、座標、構造日期等任何東西，但被構建到tileset asset 中。樣式是用JSON定義的，而表達式是在JavaScript的小子集中編寫的，用於樣式化。此外，樣式語言提供了一組內置函數來支持常見的數學運算。

一個Cesium3DTilesetStyle的例子以下：

var defaultStyle = new Cesium.Cesium3DTileStyle({
    color : "color('white')",
    show : true
});

上述代碼使咱們NYC的tileset是白色而且老是可見的。爲了實際設置tileset的樣式，咱們設置city.style:

city.style = defaultStyle;

咱們還能夠定義許多咱們喜歡的樣式。好比，讓建築變透明：

var transparentStyle = new Cesium.Cesium3DTileStyle({
    color : "color('white', 0.3)",
    show : true
});

在咱們的tileset中使用相同的樣式來達到每個特徵只是皮毛工做。咱們還可使用特定於每一個特徵的屬性來肯定造型。下面是一個基於建築物高度的建築物顏色的例子：

var heightStyle = new Cesium.Cesium3DTileStyle({
    color : {
        conditions : [
            ["${height} >= 300", "rgba(45, 0, 75, 0.5)"],
            ["${height} >= 200", "rgb(102, 71, 151)"],
            ["${height} >= 100", "rgb(170, 162, 204)"],
            ["${height} >= 50", "rgb(224, 226, 238)"],
            ["${height} >= 25", "rgb(252, 230, 200)"],
            ["${height} >= 10", "rgb(248, 176, 87)"],
            ["${height} >= 5", "rgb(198, 106, 11)"],
            ["true", "rgb(127, 59, 8)"]
        ]
    }
});

爲了在樣式間交換，咱們能夠添加更多的代碼來偵聽HTML輸入：

var tileStyle = document.getElementById('tileStyle');
function set3DTileStyle() {
    var selectedStyle = tileStyle.options[tileStyle.selectedIndex].value;
    if (selectedStyle === 'none') {
        city.style = defaultStyle;
    } else if (selectedStyle === 'height') {
        city.style = heightStyle;
    } else if (selectedStyle === 'transparent') {
        city.style = transparentStyle;
    }
}

tileStyle.addEventListener('change', set3DTileStyle);

更多關於3D Tiles的例子、如何使用及調整樣式，請查看the 3D Tiles sandcastle demos。

3D Tiles例子：

• Formats
• Photogrammetry Model
• Feature Styling

若是你有數據，須要幫助將其轉換爲3D瓦片，請繼續關注關於Cesium Ion平臺的更新！在這裏訂閱更新。

Cesium中文網交流QQ羣：807482793

Cesium中文網：http://cesiumcn.org/ | 國內快速訪問：http://cesium.coinidea.com/