温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

mapbox-gl开发中如何集成deck.gl

发布时间:2021-12-22 14:24:20 来源:亿速云 阅读:277 作者:小新 栏目:大数据

小编给大家分享一下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就能够实现。

mapbox-gl开发中如何集成deck.gl

不过deck.gl不能支持中文注记的显示,这个在使用中要注意。    

看完了这篇文章,相信你对“mapbox-gl开发中如何集成deck.gl”有了一定的了解,如果想了解更多相关知识,欢迎关注亿速云行业资讯频道,感谢各位的阅读!

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI