mapbox-gl开发：集成deck.gl

原创

GIS技术杂谈 2022-09-27 16:51:09 ©著作权

文章标签 图层初始化鼠标事件 文章分类 OpenStack 云计算

©著作权归作者所有：来自51CTO博客作者GIS技术杂谈的原创作品，请联系作者获取转载授权，否则将追究法律责任

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
       });