在网页里跑起一个 deck.gl 图层

它和地图库不是一个层面

Leaflet、OpenLayers、Cesium 解决的是「地图怎么显示」，deck.gl 解决的是 「几十万个点怎么画得动」。所以它常被当作图层引擎叠在底图之上， 也可以完全不用底图，只有数据。

三个必要参数

Deck 的实例化只需要三样东西：画布、视角、图层。 下面这段不依赖 React，也不需要打包工具。

<canvas id="cv" style="width:100%;height:100%"></canvas>
<script src="https://cdn.jsdelivr.net/npm/deck.gl@9.0.35/dist.min.js"></script>
<script>
  var deckgl = new deck.Deck({
    canvas: 'cv',
    width: '100%',
    height: '100%',
    initialViewState: {
      longitude: 108,
      latitude: 34,
      zoom: 3.4,
      pitch: 35,
      bearing: 0,
      maxPitch: 65
    },
    controller: true,
    layers: [
      new deck.ScatterplotLayer({
        data: myPoints,
        getPosition: function (d) { return [d.lng, d.lat]; },
        getRadius: 2.2,
        radiusUnits: 'pixels'
      })
    ]
  });
</script>

图层靠 get 函数取数据

每种图层都有一组以 get 开头的访问器，比如 getPosition、getRadius、getFillColor。 它们接收一条数据，返回一个值。数据不需要预先整理成特殊结构， 普通对象数组就行。

getFillColor 返回 [r, g, b, a]，取值 0–255。 返回十六进制字符串或 CSS 颜色是不生效的，这是最常见的错。

半径单位

视角

initialViewState 只影响初始状态，之后由 controller 接管。 pitch 是俯仰角，0 为垂直俯视，最大一般给到 60； bearing 是旋转角度。这两个参数决定是否能做出倾斜效果。

常见问题

画布一片空白

先检查 width 和 height。用 canvas 方式初始化时 必须显式给尺寸，否则渲染缓冲区是 0x0，什么都不显示。

点出现了但位置不对

getPosition 必须返回 [经度, 纬度]，不是 [纬度, 经度]。 这点和 Leaflet 相反，两个库混用时最容易搞错。