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-gllet  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效果，可以参见官网的例子进行集成实现。

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

mapbox-gl开发：集成deck.gl相关推荐

mapbox-gl开发：deck.gl轨迹图效果
apbox-gl中能够集成deck.gl的图层,参见mapbox-gl开发:集成deck.gl,扩展集成的形式是使用mapbox-gl的自定义图层(CustomLayer),参见mapbox-gl A ...
superset可视化-deck.gl 3D Hexagon与deck.gl Grid与deck.gl Screen Grid
数据集使用https://github.com/apache-superset/examples-data中的 san_francisco.csv.gz 左侧配置配置在这三种可视化中都是一样的: ...
deck.gl 调研
0 结论 deck gl 是基于 WebGL 的数据可视化框架,可以集成在主流的地图框架(arcgis,google maps,mapbox )中使用, 也可以单独使用. deck gl 通过laye ...
Deck.gl 相关
github: https://github.com/uber/deck.gl 官网: https://deck.gl/ demo: https://deck.gl/#/examples/ 1. 到 ...
superset可视化-deck.gl Scatterplot与MapBox
数据集注意: 仔细看这里的LON和LAT哈,都有一大堆的小数,如果前面导入的设置不注意Decimal(15,10)的话, 这里会全部变成122,最后可视化得到的就只有地图上的一个点了．左侧设置 d ...
几种动态轨迹可视化效果实现方案-echarts、mapv、deck.gl
0.前言在越来越多的可视化需求中,对空间信息的展示,逐渐的由静转为动,通过还原一些真实的时空信息,如历史行车轨迹,渔船打捞作业,特种车辆运行轨迹回放等可以直观的查看时空分布规律,它是一种越来越重要的 ...
在iOS中进行Mapbox地图开发杂谈
最近因项目需要,在app中要集成Mapbox,并且要能与苹果地图切换使用.从最早认识Mapbox到最终集成完毕,中间有一些断断续续,但总的时间也不算短了,关于这方面的资料其实是比较少的,能参考的基本都 ...
C#开发微信门户及应用(7)-微信多客服功能及开发集成
原文:C#开发微信门户及应用(7)-微信多客服功能及开发集成最近一直在弄微信的集成功能开发,发现微信给认证账户开通了一个多客服的功能,对于客户的咨询,可以切换至客服处理的方式,而且可以添加多个客服进 ...
【Flutter】Flutter 混合开发 ( 简介 | Flutter 混合开发集成步骤 | 创建 Flutter Module )
文章目录一.Flutter 混合开发简介二.Flutter 混合开发集成步骤三.创建 Flutter Module 1.使用命令行创建 Flutter Module 项目 ( 仅做参考 ) 2. ...

mapbox-gl开发：集成deck.gl

mapbox-gl开发：集成deck.gl相关推荐

最新文章

热门文章