deck.gl

WebGL2驱动的地理空间可视化层。(WebGL based visualization layers.)

Github星跟蹤圖

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示例 中还使用webpack2browserify 显示了端到端deck.gl用法的最小设置,因此您可以选择您喜欢或更熟悉的捆绑器。

要了解如何通过deck.gl repo附带的许多示例使用deck.gl,请克隆最新版本分支:

git clone -b 6.2-release --single-branch https://github.com/uber/deck.gl.git

有关最新信息,请参阅我们的API文档

主要指標

概覽
名稱與所有者visgl/deck.gl
主編程語言TypeScript
編程語言JavaScript (語言數: 11)
平台Cross-platform, Linux, Mac, Windows
許可證MIT License
所有者活动
創建於2015-12-15 08:38:29
推送於2025-04-18 11:03:03
最后一次提交2025-04-18 12:54:52
發布數654
最新版本名稱v9.1.11 (發布於 2025-04-18 12:57:01)
第一版名稱v0.0.2 (發布於 2015-12-23 11:38:22)
用户参与
星數12.6k
關注者數1.7k
派生數2.1k
提交數5.2k
已啟用問題?
問題數3147
打開的問題數371
拉請求數4606
打開的拉請求數52
關閉的拉請求數411
项目设置
已啟用Wiki?
已存檔?
是復刻?
已鎖定?
是鏡像?
是私有?

docs

Installation

npm install deck.gl

Using deck.gl

deck.gl offers an extensive catalog of pre-packaged visualization "layers", including ScatterplotLayer, ArcLayer, TextLayer, GeoJsonLayer, etc. The input to a layer is usually an array of JSON objects. Each layer offers a highly-flexible API to customize how the data should be rendered.

Example constructing a 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,
  getFillColor: [255, 228, 0],
});

Using deck.gl with React

import DeckGL from 'deck.gl';

<DeckGL
  width="100%"
  height="100%"
  initialViewState={{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({
  width: '100vw',
  height: '100vh',
  initialViewState: {
    longitude: -122.4,
    latitude: 37.78,
    zoom: 8
  },
  controller: true,
  layers: [scatterplotLayer]
});

Minimum setups of end-to-end deck.gl usage is also showcased in the hello-world examples, using both webpack and browserify, so you can choose which bundler you prefer or are more familiar with.

To learn how to use deck.gl through the many examples that come with the deck.gl repo, please clone the latest release branch:

git clone -b 7.3-release --single-branch https://github.com/uber/deck.gl.git

For the most up-to-date information, see our API documentations

Contributing

PRs and bug reports are welcome, and we are actively opening up the deck.gl roadmap to facilitate for external contributors.

Note that once your PR is about to be merged, you will be asked to register as a contributor by filling in a short form.

Attributions

Data sources

Data sources are listed in each example.

The deck.gl project is supported by