deck.gl是由uber开发并开源出来的基于WebGL的大数据量可视化框架。它具有提供不同类型可视化图层，GPU渲染的高性能，React和Mapbox GL集成，结合地理信息数据（GPS）的特点。下面我们就举两个例子探索一下这个神奇的库。

1.第一站：将源码的例子跑起来

源码在github里，首先克隆出来。

npm 下载，在项目根目录下

npm install

(友情提醒，如果npm下载速度比较慢，可以使用淘宝镜像，详细请自行搜索)

下面我们来到例子中，和上不一样在example文件夹下下载安装

npm install

安装成功之后，要申请mapbox的一个key。方法如下：

在mapbox网站注册后进入,我们便可以在Default Public Token

找到我们需要的mapbox key。

在例子文件夹下命令行下输入

export MAPBOX_ACCESS_TOKEN=

注意：cmd会不认export,可以使用git命令行，或者直接在代码中加入

//const MAPBOX_TOKEN = process.env.MAPBOX_ACCESS_TOKEN; //改为
const MAPBOX_TOKEN = 上面申请到的key>

然后执行

npm run start

浏览器会自动打开,地址为localhost:3030。

第一例子3d-heatmap,我们看到

对应官网上的例子

这是一个HexagonLayer的例子。

第二个例子是利用geojson

对应官网上的例子

2.第二站：先拿一个例子看看

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

源码路径。

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

基本结构很见简单。

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

- index.html

html>
  head>
    meta charset='UTF-8' />
    title>deck.gl exampletitle>
    style>
      body {margin: 0; padding: 0; overflow: hidden;}
    style>
  head>
  body>
    script src='bundle.js'>script>
  body>
html>

首先引入React和deckgl。

import React, {Component} from 'react';
import DeckGL, {HexagonLayer} from 'deck.gl';

几个变量先放出来，光线设置（LIGHT_SETTINGS），颜色范围设置（colorRange），高度显示范围（elevationScale），一些默认的属性（defaultProps）。

const LIGHT_SETTINGS = {
  lightsPosition: [-0.144528, 49.739968, 8000, -3.807751, 54.104682, 8000],
  ambientRatio: 0.4,
  diffuseRatio: 0.6,
  specularRatio: 0.2,
  lightsStrength: [0.8, 0.0, 0.8, 0.0],
  numberOfLights: 2
};
const colorRange = [
  [1, 152, 189],
  [73, 227, 206],
  [216, 254, 181],
  [254, 237, 177],
  [254, 173, 84],
  [209, 55, 78]
];
const elevationScale = {min: 1, max: 50};
const defaultProps = {
  radius: 1000,
  upperPercentile: 100,
  coverage: 1
};

我们建立叫DeckGLOverlay的组件

export default class DeckGLOverlay extends Component {
}

组件中提供了两个静态的属性，静态属性可以使用[类名].[方法名]调用，例如：DeckGLOverlay.defaultColorRange。

  static get defaultColorRange() {//默认的颜色范围
    return colorRange;
  }
  static get defaultViewport() {//默认的视图
    return {
      longitude: -1

来源【首席数据官】，更多内容/合作请关注「辉声辉语」公众号，送10G营销资料！