设计与规范3D 可视化

3D 地图与飞线图:大屏里最出效果的可视化怎么做

📅 2026-06-10👁 约 7 分钟✍ 灵境大屏团队
如果说 KPI 指标卡是大屏的骨骼,地图就是大屏的高光时刻——领导停留最久的往往就是那块会发光的地图。但 3D 与飞线用错了比不用还糟,这篇讲清楚什么时候用、怎么用。

一、什么时候该用地图

用地图的第一前提:数据里有"位置"维度,且位置分布本身有信息量。门店分布、告警点位、跨区域物流完全成立;而"全国只有一个总数"硬套地图,就是为炫而炫。判断方法:如果把地图换成表格,信息损失很小,就别用地图。

二、飞线图:OD 数据是灵魂

飞线图表达"从 A 到 B 的流动/关联":物流调拨、通勤人流、资金流向、告警传播链。制作要点:

  • OD 数据:每条线 = 起点 + 终点 + 权重,先把这张表整理干净;
  • 数量控制:同屏 15~30 条以内,再多按权重取 Top 或分页轮播;
  • 方向感:飞线动画本身有方向,起点终点标签只标头部节点,避免满屏地名;
  • 权重映射→ 线宽/亮度,而不是颜色数量。

三、3D 地图与 3D 柱

3D 地图(带高度与光效的行政地图)适合省级/全国分布展示;3D 柱(经纬度 + 高度)适合城市级点位强度,如门店密度、告警热度。两条纪律:

  • 3D 高度轴最多映射一个指标,且给出刻度参考——高度没有参照就是纯装饰;
  • 3D 是 WebGL 渲染,低性能播放盒要备 2D 降级方案;倾斜角别太大,超过 60° 的地图就没法读数了。

真正意义的"园区/厂区数字孪生"(楼栋建模、设备点位)建议用专业三维引擎单独做,通过 iframe 组件嵌进大屏——这也是灵境大屏保留 iframe 组件的原因。

四、钻取地图:从全国到门店

钻取地图是"全国 → 省 → 市 → 区县"逐级下探:点击省份加载对应 GeoJSON 并刷新数据。价值在于把宏观与微观连起来:总部看全国热力,点进省看地市明细。工程要点:预下载各级 GeoJSON(在线拉取在政务内网会翻车),每次钻取后地图标题与面包屑同步更新,让用户知道自己在哪。

五、炫酷与可读性的平衡

  • 地图是背景板,数据才是主角:光效、辉光别盖过数据色;
  • 南海诸岛等完整性问题必须合规处理,政企项目一票否决项;
  • 颜色渐变映射连续指标,离散分类用色相区分,别混;
  • 一张地图回答一个问题:分布看热力、流动看飞线、对比看 3D 柱,别全堆在一起。
相关阅读:ECharts 实战技巧 里有地图注册与性能细节;配色与字号规范见大屏设计规范

飞线/3D 地图/钻取地图都是内置组件,拖上画布配数据即可。

查看地图组件 →