deck.gl | 文档
WebGL2驱动,高性能的大规模数据可视化。为数据可视化提供经过测试的高性能图层,如散点图,圆弧,在GeoJSON中定义的几何图形等等。
安装
npm install --save deck.gl
使用deck.gl
deck.gl提供了大量的预打包可视化“图层”目录,包括 ScatterplotLayer, ArcLayer, TextLayer, GeoJsonLayer 等。 图层的输入通常是JSON对象的数组。每个层都提供高度灵活的API来自定义数据的呈现方式。
构建deck.gl ScatterplotLayer的示例:
import {ScatterplotLayer} from '@deck.gl/layers';
/**
 * data is an array of object in the shape of:
 * {
 *   "name":"Montgomery St. (MONT)",
 *   "address":"598 Market Street, San Francisco CA 94104",
 *   "entries":"43430",
 *   "exits":"45128",
 *   "coordinates":[-122.401407,37.789256]
 * }
 */
const scatterplotLayer = new ScatterplotLayer({
  id: 'bart-stations',
  data: 'https://github.com/uber-common/deck.gl-data/blob/master/website/bart-stations.json',
  getRadius: d => Math.sqrt(d.entries) / 100,
  getPosition: d => d.coordinates,
  getColor: [255, 228, 0],
});
Using deck.gl with React
import DeckGL from 'deck.gl';
<DeckGL width="100%" height="100%" longitude={-122.4} latitude={37.78} zoom={8} controller={true} layers={[scatterplotLayer]} />
Using deck.gl with Pure JS
import {Deck} from '@deck.gl/core';
const deck = new Deck({
  container: document.body,
  width: '100vw',
  height: '100vh',
  longitude: -122.4,
  latitude: 37.78,
  zoom: 8,
  controller: true,
  layers: [scatterplotLayer]
});
在hello-world示例 中还使用webpack2 和browserify 显示了端到端deck.gl用法的最小设置,因此您可以选择您喜欢或更熟悉的捆绑器。
要了解如何通过deck.gl repo附带的许多示例使用deck.gl,请克隆最新版本分支:
git clone -b 6.2-release --single-branch https://github.com/uber/deck.gl.git
有关最新信息,请参阅我们的API文档
