deck.gl复合图层的使用

1、复合图层简介

        deck.gl提供复合图层（composite layer）的机制让用户自由组合已有的基础图层（primitive layers），以完成更复杂的功能和效果。使用复合图层还能使多个子图层能共享一份数据，这样只用下载和转换一次数据就行。

复合图层示例：GeoJsonLayer + TextLayer 

复合图层示例：GeoJsonLayer + TextLayer 

 

复合图层示例：ScatterplotLayer + ArcLayer 

使用复合图层的方式和基本图层一致，创建并作为deck.gl的图层即可

  new DeckGL({
	// ...
	layers: [
	  new MyCustomLayer({
		// ... 参数（props）
	  })
	]
  });

使用复合图层 

2、创建复合图层的基本步骤

1、复合图层要继承deck.gl的CompositeLayer类；

	class MyCustomLayer extends CompositeLayer {
	  
	}

2、指定该复合图层的名称（layerName），作为图层默认的id

	class MyCustomLayer extends CompositeLayer {
	  static layerName = 'MyCustomLayer' + Date.now();
	  // ...
	}

3、为复合图层的属性（props）指定默认值（当然不指定默认值也没问题）

	class MyCustomLayer extends CompositeLayer {
	  // ...
	  static defaultProps = {
		/*
			属性名1：默认值1,
			属性名2：默认值2,
		*/
	  };
	}

4、实现生命周期函数updateState：该函数在图层需要更新时调用，初始加载时也会调用一次。在这个函数中需要把用户传给复合图层构造函数的参数（props）以子图层和具体业务需要的格式重新组织，并作为内部状态（state）存储在复合图层中。

	class MyCustomLayer extends CompositeLayer {
	  // ...
	  updateState({props, oldProps, changeFlags}) {
        /*
            props根据子图层需要转换为state对象
            this.setState({state}); // 更新图层的state对象，并重绘
        */
	  }
	}

5、实现生命周期函数renderLayers：该函数在deck.gl的每一次渲染循环中都会调用。在这个函数中需要构造并返回组成复合图层的基础图层的数组。创建子图层可以用复合图层原始的参数props，也可以用在updateState中转换得到的state作为数据源（data），根据具体需求和子图层类型而定。

	class MyCustomLayer extends CompositeLayer {
	  // ...
	  renderLayers() {
        return [
		  /*
			  // 子图层1,
			  // 子图层2,
			  // ...
			  // 例如：
			  new GeoJsonLayer(this.getSubLayerProps({
				// ...
			  })),
			  new TextLayer(this.getSubLayerProps({
				// ...
			  }))
		  */
        ];
	  }
	}

3、几个相关的特殊函数

3.1） getSubLayerProps

        在renderLayers方法中给子图层指定参数时，一般会用到 getSubLayerProps 方法，示例如下所示。getSubLayerProps 方法会为子图层创建唯一的id，并确保子图层的坐标系和复合图层一致。

  renderLayers() {
	return [
      // 用getSubLayerProps方法包装传给子图层的参数
	  new GeoJsonLayer(this.getSubLayerProps({
		id: 'lines',
		data: this.props.data,
		// ...
	  })),
	  new TextLayer(this.getSubLayerProps({
		id: 'labels',
		data: this.state.labels,
		// ...
	  }))
	];
  }

getSubLayerProps 方法的使用 

 3.2） getSubLayerRow 和 getSubLayerAccessor

        假如我们封装了一个复合图层给别人用，那么用户在创建复合图层指定访问器的时候，只会针对原始数据结构设计访问器，并不会关心复合图层内部的实现细节。

        但是在复合图层内部，我们通常改变了数据结构，用原始的访问器就拿不到我们想要的属性。deck.gl在设计上也考虑到了这一点。提供了 getSubLayerRow 和 getSubLayerAccessor 方法来解决这个问题。

• getSubLayerRow：封装新的数据结构，并保持对原始数据结构的引用；
• getSubLayerAccessor：在子图层中根据原始访问器创建一个新的访问器，和getSubLayerRow方法组合使用，能访问到原始数据结构中的属性，保证原始访问器的通用性

举个例子，在一个复合图层上，原始访问器和指定给复合图层的原始数据是匹配的

复合图层上的原始数据和匹配的访问器 

在updateState函数中转成新的数据结构，但是用 getSubLayerRow 保持了对原始数据结构的引用

 getSubLayerRow 保持对原始数据结构的引用 

        在renderLayers方法中创建子图层时，可以用getSubLayerAccessor方法结合原始访问器访问到原始的数据结构，同时也不妨碍对转换得到的新的数据结构的访问。从而保证了原始访问器在子图层中的通用性。

 子图层中通过getSubLayerAccessor访问原始数据结构