deck.gl是由uber开发并开源出来的基于WebGL的大数据量可视化框架。它具有提供不同类型可视化图层,GPU渲染的高性能,React和Mapbox GL集成,结合地理信息数据(GPS)的特点。下面我们就举两个例子探索一下这个神奇的库。
1.第一站:将源码的例子跑起来
源码在github里,首先克隆出来。
npm 下载,在项目根目录下
npm install
(友情提醒,如果npm下载速度比较慢,可以使用淘宝镜像,详细请自行搜索)
下面我们来到例子中,和上不一样在example
文件夹下下载安装
npm install
安装成功之后,要申请mapbox的一个key。方法如下:
在mapbox网站注册后进入https://www.mapbox.com/studio/account/tokens/,我们便可以在Default Public Token
找到我们需要的mapbox key
。
在例子文件夹下命令行下输入
export MAPBOX_ACCESS_TOKEN=<上面申请到的key>
注意:cmd会不认export,可以使用git命令行,或者直接在代码中加入
//const MAPBOX_TOKEN = process.env.MAPBOX_ACCESS_TOKEN; //改为
const MAPBOX_TOKEN = <上面申请到的key>
然后执行
npm run start
浏览器会自动打开,地址为localhost:3030
。
第一例子3d-heatmap
,我们看到
对应官网上的例子http://uber.github.io/deck.gl/#/examples/core-layers/hexagon-layer
这是一个HexagonLayer
的例子。
第二个例子是利用geojson
对应官网上的例子http://uber.github.io/deck.gl/#/examples/core-layers/geojson-layer
2.第二站:先拿一个例子看看
第一例子3d-heatmap
,显示效果上面有给出。
源码路径。
https://github.com/uber/deck.gl/tree/master/examples/3d-heatmap
deck.gl 是基于地理信息数据的,所以可视化很多都会分层两层,一层是地图数据底图,一层是可视化的数据。这个观念我们要记住,带进去看整个例子。对于这个例子组件MapGL
是地里数据底图,组件DeckGLOverlay
是可视化成的数据。
基本结构很见简单。
由于是使用React框架搭建,html很简单
- index.html
<!doctype html>
<html>