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文档