首页 / deck.gl / API 文档

GeoJsonLayer

先看结论

直接消费 GeoJSON，按几何类型自动拆成面、线、点三类子图层。

最后验证 2026-11-03 · deck.gl 9.0 · 更新 2026-10-27 · 引用本文

new deck.GeoJsonLayer(props)

输入格式

`data` 的值	行为
FeatureCollection	遍历 features，按 geometry.type 分组
单个 Feature	等价于只含一个要素的集合
Geometry 对象	没有 `properties`，样式只能靠常量
URL 字符串	自动请求并解析，跨域需服务端放行

核心参数

参数	默认	说明
`filled`	`true`	面是否填充
`stroked`	`true`	面与线是否绘制边界
`extruded`	`false`	面是否拉伸为体块
`wireframe`	`false`	挤出后只画边线，常用于体块预览
`getFillColor`	`[0, 0, 0, 255]`	面填充色，可读 `properties`
`getLineColor`	`[0, 0, 0, 255]`	线与面边界颜色
`getLineWidth`	`1`	线宽，单位见 `lineWidthUnits`
`getElevation`	`1000`	挤出高度，米
`elevationScale`	`1`	统一高度倍率
`lineWidthUnits`	`'meters'`	建议改为 `'pixels'` 保证可见
`lineWidthMinPixels`	`0`	线宽像素下限

点要素的渲染方式

GeoJSON 里的 Point 与 MultiPoint 默认画成圆点。需要图标或文字时，通过 pointType 切换，并把图标资源传给子图层参数：

new deck.GeoJsonLayer({
  id: 'poi',
  data: featureCollection,
  pointType: 'icon',              // 'circle' | 'icon' | 'text'
  iconAtlas: atlasUrl,
  iconMapping: mapping,
  getIcon: function (f) { return f.properties.icon; },
  getPointRadius: 12,
  pointRadiusUnits: 'pixels'
});

面的样式示例

var layer = new deck.GeoJsonLayer({
  id: 'districts',
  data: geoJson,
  filled: true,
  stroked: true,
  extruded: true,
  getFillColor: function (f) {
    var v = f.properties.density;
    return [40 + v * 180, 120, 255 - v * 120, 190];
  },
  getLineColor: [235, 240, 250, 200],
  getLineWidth: 1,
  lineWidthUnits: 'pixels',
  lineWidthMinPixels: 1,
  getElevation: function (f) { return f.properties.density * 900; },
  pickable: true
});

子图层与拾取

复合图层内部会生成 PolygonLayer、PathLayer、 ScatterplotLayer 等子图层。可以调用 layer.getLayers() 拿到它们，逐个调整参数，但更推荐用 getSubLayerProps 按类型统一配置。

拾取返回的对象与命中的子图层有关：命中面时通常是 Feature，命中边界线时可能是几何对象。读属性前先判断 info.object && info.object.properties。

常见问题

面画不出来

顶点顺序反了。WebGL 用绕序判断内外，外环需要逆时针（GeoJSON 规范）。数据来源不统一时打开 _normalize: true，让图层把绕序改成一致的方向再三角化，代价是多一遍预处理。

挤出后体块上下颠倒

坐标第三位与 getElevation 同时存在时会叠加。检查 GeoJSON 是否本身带高程，必要时把 getElevation 改为读取属性而不是固定值。

线宽看起来不存在

默认线宽单位是米，在低缩放层级下 1 米不足一个像素。给 lineWidthUnits: 'pixels'，并设置 lineWidthMinPixels: 1。

大地物数据不要直接塞给浏览器。超过几 MB 的 GeoJSON 解析本身就耗时。服务端简化几何、裁掉无关属性，或改用矢量瓦片（MVTLayer），比在前端调参数有效得多。

引用本文

经纬志（2026）。《GeoJsonLayer》。https://www.jingweizhi.com/deckgl/api/geojson-layer.html（访问日期 2026-11-03）。