Tile3DLayer
3D Tiles 图层。按 tileset 的层级结构请求瓦片,逐块渲染模型或点云, 面向倾斜摄影、BIM、激光点云这类大体量三维数据。
核心参数
| 参数 | 默认 | 说明 |
|---|---|---|
data | 必填 | tileset.json 的 URL |
loader | Tiles3DLoader | 瓦片加载器,替换后可支持其他格式的 tileset |
loadOptions | — | 传给 tileset 加载的选项,如 { tileset: { maximumScreenSpaceError: 8 } } |
getPointColor | [0, 0, 0, 255] | 点云颜色访问器,仅对点要素生效 |
pointSize | 1 | 点云点的大小,像素 |
opacity | 1 | 整体透明度 |
pickable | false | 是否参与拾取 |
onTilesetLoad | — | tileset 解析完成后调用,参数含 tileset3d、url |
onTileLoad | — | 单块瓦片加载完成后调用 |
onTileUnload | — | 瓦片被卸载时调用 |
onTileError | — | 瓦片请求失败时调用,可在这里降级或换源 |
示例
var tiles = new deck.Tile3DLayer({
id: 'photogrammetry',
data: 'https://data.example.com/city/tileset.json',
getPointColor: [235, 240, 250, 255],
pointSize: 2,
opacity: 0.95,
pickable: true,
onTilesetLoad: function (tileset) {
// 调整屏幕空间误差,控制细节密度
tileset.maximumScreenSpaceError = 12;
console.log('瓦片总数', tileset.tiles.length);
},
onTileError: function (error, tile) {
console.warn('瓦片加载失败', tile && tile.url, error);
}
});
穿过地面的部分
倾斜摄影模型通常自带高度,若整块沉入地面,需要给模型加高度偏移。
Tile3DLayer 本身没有偏移参数,常见做法是在
loadOptions 里传入 tileset 的变换,或改用
Tile3DLayer 的 renderSubLayers
配合 SimpleMeshLayer 手动平移。修改前先用
onTilesetLoad 打印 tileset.root.transform 确认坐标系。
点云与模型
同一个 tileset 可以同时含点云与网格瓦片。点云走
PointCloudLayer 渲染,getPointColor 与
pointSize 生效;网格瓦片走单独的模型渲染通道,
颜色来自瓦片自带的纹理或材质,这两个参数对它没有影响。
v9 的不可变更新
换 tileset、调透明度都需要新建图层实例。deck.gl 9 的图层不可变,
用 clone 加 deckgl.setProps 完成切换:
var next = tiles.clone({
data: 'https://data.example.com/city-v2/tileset.json',
pointSize: 3
});
deckgl.setProps({ layers: [next] });
先看服务端的瓦片切分。首屏加载慢多半是根瓦片过大,
而不是前端参数问题。maximumScreenSpaceError 调大能减少请求数,
但几何会变粗;调小则细节更细、请求更多,需要按网络条件取平衡。
经纬志(2026)。《Tile3DLayer》。https://www.jingweizhi.com/deckgl/api/tile-3d-layer.html(访问日期 2026-11-03)。