700字范文 > Cesium：入门教程（五）之 3D Tiles

Cesium：入门教程（五）之 3D Tiles

时间：2018-06-10 02:02:28

3D Tiles

Cesium 与开源社区合作开发了3D Tiles，用于传输海量的异构三维地理空间数据集。使用概念上类似于Cesium的terrain和imagery的流技术，3D Tiles 使得可以查看原本不能交互式查看的巨大的模型，包括建筑物数据集、CAD（或BIM）模型、点云和摄影测量模型。

📍 上述的异构3D模型（b3dm）和实例3D模型（i3dm）是基于glTF构建的，点云格式不嵌入glTF中。

加载数据（需要到 Cesium ion 添加该数据

var city = viewer.scene.primitives.add(new Cesium.Cesium3DTileset({ url: Cesium.IonResource.fromAssetId(75343) }));

注：官方给的例子中 AssetId 为3839 ，但我在 Asset Depot 没找到该数据，所以使用 New York City 3D Buildings（75343）

注：可以上传自己的数据到Cesium ion，并将其瓦片化为3D Tiles [链接]

Cesium ion 支持转换的数据格式：glTF(.gltf, .glb)、CityGML(.citygml, .xml, .gml)、KML(.kml, .kmz)、LASer(.las,.laz)、COLLADA(.dae)、wavefront OBJ(.obj)

你可能注意到建筑物没有正确地定位在地平面上。幸运的是，它很容易修复。我们可以通过修改模型矩阵modelMatrix来调整tileset的位置。我们可以通过将tileset的边界球转换成地图Cartographic，然后添加期望的偏移量并重置模型矩阵，从地面找到模型modelMatrix的当前偏移量。

var heightOffset = -32;city.readyPromise.then(function(tileset) {// Position tilesetvar 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);});

漫游到 New York

3D Tiles 还允许我们使用 3D Tiles styling 语言来调整我们的样式

var defaultStyle = new Cesium.Cesium3DTileStyle({color : "color('gray', 0.5)", // 让建筑变透明show : true});city.style = defaultStyle;

我们还可以使用特定于每个特征的属性来确定造型。下面是一个基于建筑物高度的建筑物颜色的例子：

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)"]]}});city.style = heightStyle;

交互式修改样式

3D Tile Styling<select id='tileStyle'><option value ="transparent">Transparent</option><option value ="height">Height</option></select>

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

Cesium虽然也支持两种方式（Entity和Primitive）加载3D Tiles数据，但因为多数情况下3D Tiles数据都是成片区的数据，数据量比较大，所以为了保证性能，建议使用Primitive方式。