经纬志
首页 / deck.gl / API 文档

Tile3DLayer

先看结论

3D Tiles 图层。按 tileset 的层级结构请求瓦片,逐块渲染模型或点云, 面向倾斜摄影、BIM、激光点云这类大体量三维数据。

最后验证 2026-11-03 · deck.gl 9.0 · 更新 2026-10-29 · 引用本文
new deck.Tile3DLayer(props)

核心参数

参数默认说明
data必填tileset.json 的 URL
loaderTiles3DLoader瓦片加载器,替换后可支持其他格式的 tileset
loadOptions—传给 tileset 加载的选项,如 { tileset: { maximumScreenSpaceError: 8 } }
getPointColor[0, 0, 0, 255]点云颜色访问器,仅对点要素生效
pointSize1点云点的大小,像素
opacity1整体透明度
pickablefalse是否参与拾取
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)。