| name | 3d-visualization |
| description | 三维可视化技能。使用deck.gl和MapLibre创建3D拉伸、柱状、弧线和散点图层,支持高度映射和视角调整。 |
| metadata | {"domain":"visualization","version":"2.0","intent_triggers":"3D, 三维, extrusion, deck.gl, 拉伸, 柱状图, 弧线图, MapLibre"} |
三维可视化技能
概述
本技能用于创建基于 deck.gl + MapLibre GL 的三维地图可视化。通过高度映射、颜色编码和视角控制,
将二维空间数据转化为直观的三维场景,适用于建筑体量展示、人口密度分析、流量迁徙和要素分布等场景。
图层类型与适用场景
GeoJsonLayer(拉伸模式)
- 用途:建筑体量、人口密度、地价热力、容积率分布
- 原理:将多边形按属性值沿 Z 轴拉伸(extruded: true)
- 高度字段:
getElevation 绑定数值属性(如 population、price、floor_count)
- 颜色字段:
getFillColor 支持 RGB 数组或颜色映射函数
- 典型参数:
elevationScale: 1-100,根据数据量级调整
ColumnLayer(柱状图层)
- 用途:分区统计对比、网格聚合值、多指标并列
- 原理:在点位置生成圆柱体,高度映射数值
- 关键参数:
diskResolution: 12(柱体面数),radius: 50-500(米),elevationScale
- 适合场景:乡镇级耕地面积对比、各村人均收入柱状展示
ArcLayer(弧线图层)
- 用途:人口迁徙、物流流向、通勤流量、资源调配路径
- 原理:起止点之间绘制三维弧线,宽度/颜色映射流量
- 关键参数:
getSourcePosition、getTargetPosition、getWidth(1-10)
- 颜色策略:起点和终点使用不同颜色(
getSourceColor/getTargetColor)区分方向
ScatterplotLayer(散点图层)
- 用途:POI 分布、采样点、设施选址候选、事件热点
- 原理:在点位置绘制圆形标记,半径和颜色映射属性
- 关键参数:
getRadius(米),radiusScale,radiusMinPixels: 2
- 适合场景:监测站点分布、土地违法点位标注
高度映射策略
线性映射(默认)
- 公式:
height = (value - min) / (max - min) * maxHeight
- 适用:数据分布均匀、无极端异常值
- 注意:极差过大时低值区域几乎不可见
对数映射
- 公式:
height = log(value + 1) / log(max + 1) * maxHeight
- 适用:数据跨越多个数量级(如人口从百到百万)
- 优势:压缩极端值,保留低值区域可读性
分位数映射
- 原理:将数据等频分为 5-7 档,每档对应固定高度
- 适用:关注相对排名而非绝对值
- 实现:先用
mapclassify.Quantiles 分类,再映射高度
视角设置指南
| 参数 | 推荐范围 | 说明 |
|---|
| pitch | 45°-60° | 45° 平衡俯视与立体感;60° 强调高度差异;>70° 易丢失远处上下文 |
| bearing | 0°-360° | 0° 正北朝上;-30° 或 30° 增加透视感;可动画旋转 |
| zoom | 10-14 | 10 省级概览;12 城市级;14 街区级;根据数据范围自动适配 |
| maxZoom | 16-18 | 限制最大缩放防止图层失真 |
颜色映射方案
连续型(数值属性)
- 单色渐变:白→蓝(人口)、白→红(温度)、白→绿(植被)
- 双色发散:蓝→白→红(变化量,正负对比)
- 推荐色带:viridis(感知均匀)、YlOrRd(热力)、RdYlGn(好坏对比)
分类型(类别属性)
- 用地类型:耕地=黄色、林地=绿色、建设用地=红色、水域=蓝色
- 确保相邻类别色差 ΔE > 20,避免色盲不友好的红绿纯对比
- 类别超过 8 种时考虑分组或使用图案填充辅助区分
性能优化
- 要素数 > 50,000:启用
pickable: false 关闭拾取以提升帧率
- 要素数 > 100,000:使用六边形聚合(H3 或
HexagonLayer)降低渲染压力
- 大范围数据:使用矢量瓦片(MVT)分级加载,避免一次性渲染全量
- Tooltip:仅在
pickable: true 时生效,大数据集建议关闭或限制拾取半径
- 动画:
bearing 自动旋转帧率控制在 30fps,避免 GPU 过载
工作流程
- 明确可视化目标(展示什么、给谁看、强调什么)
- 根据数据几何类型和分析目的选择图层类型
- 确定高度映射字段和映射策略(线性/对数/分位数)
- 配置颜色方案(连续/分类,确保可读性)
- 调整视角参数(pitch/bearing/zoom)获得最佳观感
- 添加 Tooltip 配置(悬停显示关键属性)
- 验证性能(要素数量、帧率、交互响应)
常见问题与解决
- 高度比例失调:数据值域跨度大时切换对数映射;手动设置
elevationScale
- 俯仰角过大:pitch > 65° 导致远处要素被压缩,降至 45°-55°
- 颜色不可辨:检查色带在浅色背景下的对比度;使用 ColorBrewer 验证色盲安全
- 图层遮挡:多图层叠加时调整
getElevation 基准或使用透明度(opacity: 0.6-0.8)
- 坐标系错误:确保数据为 EPSG:4326(WGS84),deck.gl 默认使用经纬度坐标
相关工具
generate_3d_map:生成三维地图配置并推送到前端 Map3DView 组件
control_map_layer:控制图层显隐、样式更新和视角切换