mapbox-gl开发：集成deck.gl

deck.gl是由uber开发出来的基于WebGL的开源大数据量可视化框架，具有提供不同类型可视化图层，能够和mapbox-gl集成。
deck.gl项目地址：
https://github.com/visgl/deck.gl
deck.gl和mapbox-gl集成有两种方式：
1、以扩展图层的形式，将deck.gl作为mapbox-gl的一个图层加载进去，这里是mapbox-gl作为主体；

//引用mapbox-gl和deck.gl的类库
       const {  MapboxLayer,
		   ScatterplotLayer,
		    GeoJsonLayer
		  } = deck;
	const AIR_PORTS ='json数据位置'；
        //定义deck.gl图层
             const myDeckLayer = new MapboxLayer({
			id: 'mydecklayer',
			type: GeoJsonLayer,
			data: AIR_PORTS, 
			pickable: false,
			stroked: true,
			filled: true,
			autoHighlight: false,
			highlightColor: [0, 180, 0, 200],
			extruded: false,
			lineWidthScale: 0,
			lineWidthMinPixels: 1,
			getFillColor: [0, 0, 180, 0],
			getLineColor: [255, 0, 0, 255],
			getRadius: 0,
			wireframe: false,
			getLineWidth: 10,
			getElevation: 8000  
			});

                   //初始化mapbox-gl
          let  map = new mapboxgl.Map({
           container: 'map',
           style:  mapbox地图样式配置,
		   center: [116, 37],
           zoom: 9
				});
                        //添加deck.gl图层
             map.addLayer(myDeckLayer);
                       //根据id移除图层
             map.removeLayer('mydecklayer');  

2、以deck.gl为主体，设置deck.gl中使用的地图是mapbox-gl；

//初始化deck.gl的对象，嵌入mapbox-gl的相关信息
             deckgl = new deck.DeckGL({
				container: 'map',
				mapStyle: 'mapbox-gl地图的样式',
				latitude: 36,
				longitude: 117,
				zoom: 5,
				bearing: 0,
				pitch: 30
		 });

以mapbox-gl作为主体时，添加的deck.gl的图层并不能够响应对应的鼠标事件，反之，以deck.gl作为主体，在mapbox-gl中添加的图层，也不能响应对应的鼠标事件。
集成deck.gl能够丰富地图的大数据展示效果，实现mapbox-gl本身不能实现的一些效果，增强地图的可视化效果。
比如mapbox-gl中加载的面状图层，不支持带高程的显示，但是deck.gl就能够实现。

不过deck.gl不能支持中文注记的显示，这个在使用中要注意。
更多的deck.gl效果，可以参见官网的例子进行集成实现。

更多文章，请关注公众号查看！