经纬志
首页 / deck.gl / 使用示例

GeoJSON 面

四个高斯中心圈出四片区域,落在其中的方格被保留,组成一个 FeatureCollection。按密度上色并挤出高度,可切回平面查看轮廓。

deck.gl 9.0 · 更新 2026-10-27
源码与运行效果
运行效果

说明

在 114.4–118.2 度经度、37.4–40.8 度纬度之间以 0.10 度为步长遍历, 用四个高斯函数叠加计算每个格心的「影响值」,低于 0.32 的丢弃。 保留下来的格子生成矩形面,并写入 density 与 block 两个属性。

配置作用
getFillColor按 density 在深蓝到橙色之间取色
getElevation高度同样取 density,倍率 14000
lineWidthUnits: 'pixels'格线在任意层级都保持 1 像素
extruded按钮切换,平面模式下倍率归零
pickable悬停读取 properties

方格为什么不紧贴

高度是示意性的:density 取 0–1,倍率 14000 意味着最高一档相当于 十几公里。区域尺度下,几千米的真实起伏只有一两个像素, 必须放大才能在画面上看出来。换成真实建筑或地形数据时, getElevation 直接返回米数,倍率回到 1。

每个面在格心基础上内缩 0.012 度,因此相邻格子之间留有缝隙。 这不只是为了好看:留缝之后,即使相邻格子的颜色接近, 也能分辨出各自的边界,密度图的「马赛克」结构更清楚。

真实业务里的 GeoJSON 很少这么规整。导入外部数据时要注意两点: 外环顶点按规范应为逆时针;数据若带高程,会与 getElevation 叠加。前者可以用 _normalize 兜底,后者只能在数据侧处理。

GeoJsonLayer 是复合图层。面、线、点会被拆给不同的子图层, 所以同一次拾取可能得到 Feature,也可能得到几何对象。 读取属性前先判断 info.object.properties 是否存在。