1. 3DTiles介绍

2016年，Cesium 团队借鉴传统2DGIS的地图规范：WMTS，借鉴图形学中的层次细节模型，打造出大规模的三维数据标准：3d-Tiles，中文译名：三维瓦片。

它在模型上利用了 gltf 渲染快的特点，对大规模的三维数据进行组织，包括层次细节模型、模型的属性数据、模型的层级数据等。

3D Tiles 是在glTF的基础上，加入了分层LOD的概念（可以把3D Tiles简单地理解为带有 LOD 的 glTF ），专门为流式传输和渲染海量 3D 地理空间数据而设计的，例如倾斜摄影、3D 建筑、BIM/CAD、实例化要素集和点云。它定义了一种数据分层结构和一组切片格式，用于渲染数据内容。3D Tiles 没有为数据的可视化定义明确的规则，客户可以按照自己合适的方式来可视化 3D 空间数据。同时，3D Tiles 也是 OGC 标准规范成员之一，可用于在台式机、Web端和移动应用程序中实现与海量异构3D地理空间数据的共享、可视化、融合以及交互功能。glbxz.com https://glbxz.comglb模型下载，gltf格式模型下载

2. 3dTiles数据示例及其加载

数据处理相关的，可以参看：各类三维模型转为3DTiles格式

2.1 3dTiles数据示例

首先，我从一个简单的3D Tiles数据示例说起,请看下面目录：

上图是一份 3dTiles数据集在文件夹内的样子，层层打开可得以下特点：

• 入口文件是tileset.jsonp分页标题e
• 各级瓦片用文件夹来组织（类似套娃）,目录中有零散的*.json文件
• 叶子节点有*.b3dm、*.i3dm等格式

对这些数据的结构和详细介绍，我们下一节再详细解说，第一步，我们先学会怎么加载使用这个模型。

2.2 在平台中加载模型

平台内加载3dtiles是使用TilesetLayer类(opens new window)。

3dTiles至少有一个tileset.json文件，作为整个数据集的入口，在代码层面，我们拿到这个主瓦片集JSON 文件（tileset.json）的url地址即可使用加载三维模型了。 如：http://data.mars3d.cn/3dtiles/qx-dyt/tileset.json(opens new window)

当我们拿到这个模型服务地址后：

• (1)浏览器输入模型url地址验证下是否可以正常访问。
• (2)打开p分页标题e模型参数调试编辑页面(opens new window)，在这个页面调试的模型URL输入框内输入模型url地址，并单击加载模型按钮。

• (3)可以勾选深度检测来方便测试和调试模型高度

• (4)如果是人工模型，可以勾选“鼠标拖拽编辑”来手动拖拽模型的位置与地图上匹配。

• (5)在该页面调整好所有参数后，单击“保存参数”按钮，保存的参数json，会自动下载一个json文件。
  

• (6) 如果模型是初始化就加载的，可以打开项目的config.json文件，拷贝刚下载的json到config.json文件的layers参数中即可。

{  "scene": {},  "terrain": {p分页标题e},  "basemaps":[],//已忽略其他参数  "layers":[    {      "name": "模型名称",      "type": "3dtiles",      "url": "http://data.mars3d.cn/3dtiles/qx-dyt/tileset.json",      "maximumScreenSpaceError": 1,      "maximumMemoryUsage": 1024,      "position": {"alt": 452.9 },      "center": { "lat": 34.216894,  "lng": 108.959834, "alt": 591, "heading": 4,"pitch": -37 },p分页标题e       "show": true    }  ]}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17复制代码

p分页标题e
• (7)如果代码中直接使用TilesetLayer类(opens new window)构造三维模型，可以将json中的参数拷贝到类参数中。

var tiles3dLayer = new mars3d.layer.TilesetLayer({  url: 'http://data.mars3d.cn/3dtiles/qx-simiao/tileset.json',  maximumScreenSpaceError: 16,  maximumMemoryUsage: 1024,  position: { alt: 452.9 },  center: { lat: 34.216894,  lng:p分页标题e 108.959834, alt: 591, heading: 4,pitch: -37 },   flyTo: true,})map.addLayer(tiles3dLayer)

1
2
3
4
5
6
7
8
9复制代码

运行效果