基于WebGL的大数据二三维可视化--uber的deck.gl介绍

最新推荐文章于 2024-03-31 06:33:11 发布

TechFE

最新推荐文章于 2024-03-31 06:33:11 发布

阅读量2.2w

点赞数 11

分类专栏： WebGL 可视化 GIS 文章标签：大数据 webgl 可视化三维

本文链接：https://blog.csdn.net/future_todo/article/details/72846952

版权

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

第一例子3d-heatmap，显示效果上面有给出。

https://github.com/uber/deck.gl/tree/master/examples/3d-heatmap

deck.gl 是基于地理信息数据的，所以可视化很多都会分层两层，一层是地图数据底图，一层是可视化的数据。这个观念我们要记住，带进去看整个例子。对于这个例子组件MapGL是地里数据底图，组件DeckGLOverlay是可视化成的数据。

基本结构很见简单。

由于是使用React框架搭建，html很简单
- index.html

<!doctype html>
<html>

关注