首页 / deck.gl / API 文档

CompositeLayer

先看结论

组合图层的基类。一个对外图层内部可以渲染任意多个子图层。

最后验证 2026-11-03 · deck.gl 9.0 · 更新 2026-10-27 · 引用本文

new deck.CompositeLayer(props)

需要实现的方法

方法	说明
`renderLayers()`	返回子图层数组，每次更新调用
`getSubLayerProps(props)`	把外层属性转成子图层属性
`initializeState()`	首次挂载时初始化，可建模型与状态
`updateState()`	属性变化时更新内部状态
`finalizeState()`	销毁资源

参数

参数	说明
`id`	外层标识，子图层 id 由它派生
`data`	透传给子图层的数据源
`opacity`	通过 `getSubLayerProps` 传给子图层
`pickable`	控制子图层是否参与拾取
`visible`	整层关闭时跳过绘制
`coordinateSystem`	子图层继承该坐标参考
`updateTriggers`	自定义属性变化时强制更新子图层

典型结构

class LabeledPoints extends deck.CompositeLayer {
  renderLayers() {
    var pts = new deck.ScatterplotLayer(this.getSubLayerProps({
      id: 'pts',
      data: this.props.data
    }));
    var txt = new deck.TextLayer(this.getSubLayerProps({
      id: 'txt',
      data: this.props.data
    }));
    return [pts, txt];
  }
}

子图层 id 规则

子图层 id 由外层 id 与内部 id 拼成，形如 parent-pts。拾取时 info.layer.id 拿到的是子图层 id，按外层 id 判断会漏掉所有元素。

属性透传

getSubLayerProps 会把 opacity、pickable、 visible、coordinateSystem 之类的外层属性复制给子图层。自己拼装属性对象时，容易漏掉这些字段，表现为调透明度没反应。

生命周期方法不要在 renderLayers 里做重活。 renderLayers 可能每帧调用，初始化逻辑放到 initializeState。

引用本文

经纬志（2026）。《CompositeLayer》。https://www.jingweizhi.com/deckgl/api/composite-layer.html（访问日期 2026-11-03）。