企业官网建设流程全解析

做可视化大屏这几年，3D地图基本是每次汇报的保留节目。后台一上数据，大屏上一投射，领导第一眼注意到的永远是那个带立体轮廓、能旋转、能下钻的中国地图。但说实话，很多3D地图方案要么引入Three.js这种重型引擎，学习成本直接拉满；要么用现成的大屏模板，改个颜色都费劲，更别说跟自己的业务数据联动。

这个项目的思路很直接：用Vue做壳，ECharts-GL做3D渲染核心，把一张普通中国地图拆成5个层叠的视觉层次——立体地图主体、散点分布、柱状统计、飞线轨迹、涟漪标注。每一层负责一个维度的信息表达，叠在一起既能看整体又不丢细节。本文会从头到尾把这套5层叠加方案拆开讲清楚，包含完整可跑的Vue组件代码和每个参数的含义，适合正在做大屏可视化、数据展示，或者想在项目里快速落地3D地图但不想被WebGL复杂度劝退的同学参考。

1. 项目概述与整体设计思路

1.1 这个项目要解决什么问题

做数据可视化，2D地图的局限其实很明显：平面地图表达不了"数值高低"，只能靠颜色深浅硬顶，色阶稍微一多就分不清。而3D地图天然多了一个高度维度，柱子能长出来，飞线能连过去，城市的分布能立体呈现，数据越多层次越清晰。

这套方案的定位很明确：不炫技、不出格，用最常规的技术栈组合，实现一套看着有冲击力、开发成本可控、又能灵活对接业务数据的中国地图可视化底座。整个项目跑下来，一张地图上能同时承载五类信息：地域轮廓、点位分布、数据大小、联动关系、重点标注。做运营大屏、物流调度中心、销售看板，这套底层逻辑都是通用的。

1.2 为什么选 ECharts-GL 而不是 Three.js

先说结论：如果你的需求是"要3D效果，但团队没有WebGL基础，项目排期也不允许从零造轮子"，ECharts-GL 就是最务实的答案。

Three.js 确实更强，能实现光照散射、物理材质、镜头粒子这些电影级效果，但代价是你要从头搭建场景、相机、灯光、渲染循环，还得自己处理地图数据到3D坐标的映射。一套流程下来，光是把中国地图的边界变成3D几何体就要折腾好几天。ECharts-GL 的思路完全不同，它是在 ECharts 配置项体系上扩展了3D能力，你写的还是 series、xAxis、legend 那套老伙计，只是把 type 换成 map3D、scatter3D。地图的 GeoJSON 数据格式可以直接复用，坐标系自动帮你映射，光照、视角、旋转全都封装成了配置项，真正做到了"配置驱动"。

有人说 ECharts-GL 远看是3D，近看细节不够。这话对，但场景也得分。大屏上地图普遍是从3到5米的距离观看，要的是整体轮廓、颜色区块、动效指引，没有人会趴上去看贴图纹理。用40%的工夫达到80%的效果，这个账怎么算都划算。

1.3 5层叠加的完整结构

整张地图从下往上，我设计了五个独立的视觉层次，每一层对应一个 series 配置，逻辑上完全解耦：

• 第1层：3D地图主体。用 map3D 绘制立体省份轮廓，是整张图的底盘，所有其他图层都依附在这个坐标系上。
• 第2层：散点分布层。用 scatter3D 在地图上的指定经纬度打点，适合标注分公司、门店、站点这类离散点位。
• 第3层：柱状统计层。用 bar3D 在对应城市位置生成高度不一的立体柱子，柱子越高数值越大，直观表达区域间的数据对比。
• 第4层：飞线联通层。用 lines3D 在两个城市之间画弧线，并配合拖尾动画模拟数据流动方向。
• 第5层：涟漪标注层。选中几个重点城市，用动态放大的半透明球体做脉冲式的点击提醒，视觉效果类似地图 App 的定位标识。

分层的核心价值在于：业务数据变化时，你只需要更新对应 layer 的数据源，其他层完全不动。比如物流公司只看飞线层的数据，把轨迹接口换掉即可，地图主体和散点层一丝都不用碰。这就是解耦带来的维护便利。

2. 环境搭建与地图数据准备

2.1 Vue 项目创建与依赖安装

我这里的项目用的是 Vue 3 + Vite，比 Vue CLI 轻量很多，启动速度也快。如果你还在 Vue 2 项目里，思路是一样的，只是组件写法需要换成 options API。

# 创建 Vue 项目 npm create vite@latest china-map-gel -- --template vue # 进入项目 cd china-map-gel # 安装所需依赖 npm install echarts echarts-gl

装完依赖之后，在 main.js 里做全局注册比较省事。注意 echarts 和 echarts-gl 都要引入，gl 模块是通过副作用方式把 3D 系列注册进 echarts 的，顺序不能反，否则会报错说找不到 map3D 这个系列。

// main.js import { createApp } from 'vue' import * as echarts from 'echarts' import 'echarts-gl' import App from './App.vue' const app = createApp(App) app.config.globalProperties.$echarts = echarts app.mount('#app')

踩坑提示：echarts-gl 对 echarts 版本有兼容要求。我之前遇到过一次图表白屏，排查半天发现是 echarts 升到了 6.x，而 echarts-gl 还在适配旧的 API。建议锁定 echarts@5.x 版本，等 echarts-gl 官方明确支持 6.x 再升级。

2.2 地图 GeoJSON 数据的获取

ECharts 5 之后不再内置地图数据，需要自己准备 GeoJSON 并注册。中国地图的 GeoJSON 有两个常见来源：阿里云 DataV 的 GeoJSON 数据接口，以及各省市的地理信息公共服务平台。DataV 的那个接口可以直接按需取全国或者单个省份的地图数据，日常开发完全够用。

拿到地图 JSON 之后，在组件里注册：

// 以本地资源为例，你也可以在 onMounted 里 fetch 远程 JSON import chinaJson from '@/assets/china.json' echarts.registerMap('china', chinaJson)

有一点要提醒： GeoJSON 文件省市区县级别的数据体积会膨胀得很快，全国地图精简过的大概在几百 KB，但全国到县级的完整数据可能好几兆字节。大屏项目首次加载如果卡顿，大概率是地图数据拖了后腿。建议开发阶段用全量数据，上线前置换成用 TopoJSON 简化过的版本，或者自己写脚本抽稀坐标点。

2.3 组件目录结构

为了后面扩展方便，我把地图功能拆分成了独立组件，不是一把梭全写在 App.vue 里：

src/ ├── components/ │ ├── ChinaMap3D.vue // 3D 地图主组件 │ ├── layers/ │ │ ├── useMapLayer.js // 第1层：地图主体 │ │ ├── useScatterLayer.js // 第2层：散点分布 │ │ ├── useBarLayer.js // 第3层：柱状统计 │ │ ├── useLinesLayer.js // 第4层：飞线轨迹 │ │ └── useRippleLayer.js // 第5层：涟漪标注 │ └── config/ │ ├── chartTheme.js // 颜色主题、光照参数 │ └── mapData.js // 各层的测试数据 ├── assets/ │ └── china.json // 中国地图 GeoJSON └── App.vue

每个 use 开头的 js 文件导出的是一个配置对象或配置函数，最终在 ChinaMap3D.vue 里把五块配置合并进一个 option。这种结构最直接的收益是：你改柱子颜色时不会误碰飞线的配置，排查问题的时候思路也清晰——出问题先定位是哪个 layer。

3. 五层叠加逐层代码实现

3.1 第1层：3D 地图主体，打好模型的底子

地图主体是整个方案的地基，后续四层全部要依赖同一个 geo3D 坐标系。我建议用 geo3D 组件统一管理地图坐标系，这样散点层、柱状层、飞线层可以通过coordinateSystem: 'geo3D'挂靠到同一张地图上，位置天然对齐。

// useMapLayer.js export const mapLayerOption = { geo3D: { map: 'china', roam: true, regionHeight: 4, // 每个省份弹出的高度 itemStyle: { color: '#1a5f8a', opacity: 0.9, borderWidth: 1.5, borderColor: '#7ccfff' }, label: { show: true, textStyle: { color: '#b3e5ff', fontSize: 10 } }, emphasis: { label: { show: true, distance: 4, textStyle: { color: '#ffffff', fontSize: 14 } }, itemStyle: { color: '#2fc9ff', opacity: 1 } }, shading: 'lambert', light: { main: { color: '#ffffff', intensity: 1.2, shadow: true }, ambient: { intensity: 0.3 } }, viewControl: { distance: 110, alpha: 40, beta: 0, center: [0, 0, 0], autoRotate: false } }, series: [ { type: 'map3D', map: 'china', coordinateSystem: 'geo3D' } ] }

参数说明几个重点。regionHeight是每个省从地图表面"长"出来的高度，值越大立体感越强，但超过 8 之后反而像一堆积木，不真实。shading: 'lambert'选择兰伯特光照模型，效果是平面会随着光线的角度产生明暗变化——这是立体感的核心来源。想让受光面更亮、背光面更暗，就调高主光源 intensity，同时用 ambient 环境光补暗部细节，避免死黑一片。

地图主体配好之后，下面每一层都是在 viewControl 同一个视角系统下叠加内容。这里最让我意外的是，很多照着文档抄的开发者第一眼看到的是"地图是出来了，但为什么转起来像纸片"。原因基本就在光照参数上，环境光开太高，立体感全被冲淡了。

3.2 第2层：散点层，经纬度定位的精准打点

散点层用来标注点位：分公司、门店、物流仓、基站，只要是能给出经纬度的数据，它都能打在地图对应的位置。散点层的配置用 scatter3D，关键是coordinateSystem: 'geo3D'和它对齐到同一张地图。

// useScatterLayer.js export const scatterData = [ { name: '北京', value: [116.4074, 39.9042, 30] }, { name: '上海', value: [121.4737, 31.2304, 42] }, { name: '广州', value: [113.2644, 23.1291, 18] }, { name: '成都', value: [104.0665, 30.5723, 26] }, { name: '武汉', value: [114.3054, 30.5931, 15] } ] export function scatterLayerOption(data) { return { series: [ { type: 'scatter3D', name: '业务网点', coordinateSystem: 'geo3D', data: data.map(item => ({ name: item.name, value: item.value })), symbol: 'circle', symbolSize: 8, itemStyle: { color: '#ffd166', opacity: 0.9 } } ] } }

散点数据里value是个三维数组，前两位是经度和纬度，第三位是这个点的高度。高度填 0 会让点贴在地图表面，但有时候点在凹陷的省份边界里会被遮住，这种时候可以把第三位抬高一些，比如放到 2~5 之间，点会浮在地图上方，视觉上更清爽。

散点的大小、颜色可以跟业务数值挂钩。销售业绩高的省份打大点，用亮暖色；业绩低的打小点，用冷色。ECharts 的visualMap组件能干这件事。实际操作中，比起让视觉编码完全服从数据精度，更重要的是保证大屏上看得清、分得开，颜色对比拉得开往往比精确映射重要。

3.3 第3层：柱状层，数据大小一眼见分晓

柱状层是5层里信息量最大、视觉冲击力最强的一层，它回答的问题是："哪个区域数值高、哪个区域数值低"。用 bar3D 实现，每个柱子底部锚定在经纬度上，高度映射到数值。

// useBarLayer.js export const barData = [ { name: '北京', coords: [116.4074, 39.9042], value: 86 }, { name: '上海', coords: [121.4737, 31.2304], value: 92 }, { name: '广东', coords: [113.2644, 23.1291], value: 74 }, { name: '四川', coords: [104.0665, 30.5723], value: 53 }, { name: '湖北', coords: [114.3054, 30.5931], value: 47 } ] export function barLayerOption(data) { return { series: [ { type: 'bar3D', name: '业务规模', coordinateSystem: 'geo3D', data: data.map(item => [...item.coords, item.value]), barSize: 1.5, bevelSize: 0.2, bevelSmoothness: 8, minHeight: 2, itemStyle: { color: '#3ac8e8', opacity: 0.85 }, emphasis: { itemStyle: { color: '#ffd166' } } } ] } }

bar3D 的数据格式是[经度, 纬度, 柱高]。这里有个特别重要的参数是minHeight，如果不设置它，数值接近 0 的柱子会压缩成纸片，地图转起来不够立体，底部反而不跟地图贴合，很出戏。我一般会把 minHeight 定在 2 左右，保证最矮的柱子也有足够的视觉厚度。

bevelSize和bevelSmoothness控制柱子的倒角大小和顺滑程度。倒角越大柱子越圆润，看起来越有质感，但性能也会略微下降。大屏上有几百根柱子的时候，bevelSmoothness 建议 4 以内，没必要追求完美的倒角，3 米外没人看得出区别。

柱子叠上地图后，最常见的视觉冲突是：五根柱子挤在华东这么小一块区域内，互相遮挡严重。解法有两个：一是把对应省份的点位在经纬度上做微小的偏移，让柱子错开一点；二是调低柱子的透明度，比如 0.7 左右，相互遮挡时还能透出后面的柱身，视觉上不那么堵。

3.4 第4层：飞线层，流动轨迹讲清联动关系

飞线层负责表达城市之间的流动关系——可能是物流线路、资金流向、用户来源、数据传输路径，任何一对多、多对多的业务关系，都能用飞线画出来。

// useLinesLayer.js export const linesData = [ { coords: [ [116.4074, 39.9042], [121.4737, 31.2304] ] }, { coords: [ [116.4074, 39.9042], [113.2644, 23.1291] ] } ] export function linesLayerOption(data) { return { series: [ { type: 'lines3D', name: '数据流动', coordinateSystem: 'geo3D', data: data, effect: { show: true, period: 4, trailWidth: 3, trailLength: 0.5, trailOpacity: 0.8 }, lineStyle: { width: 1.5, color: '#7ef0ff', opacity: 0.4 } } ] } }

飞线的关键在effect配置。trailWidth 是拖尾亮带的宽度，太宽会糊，2~4 比较合适；trailLength 是拖尾长度，0 到 1 之间，0.5 意味着粒子从起点飞到终点时，身后留下一半长度的光带；period 是粒子飞完全程的秒数，4 比较适中，太快看不清轨迹，太慢显得迟钝。

如果想让飞线呈现出性感的弧线效果，ECharts-GL 原生 lines3D 对曲线支持比较有限，我自己用下来是两条路：一是升级到新版 echarts-gl 看是否支持lineStyle.curveness；二是自己用二次贝塞尔曲线公式，把直线路径插值成一串中间高、两端低的坐标点，再把插值后的点传给 lines3D。第二种方式自由度更高，弧线的高度可以按业务含义控制，比如"量大的走高空，量小的走低空"。

3.5 第5层：涟漪标注层，重点城市要会自己喊话

第5层是对重点城市的强化标注，视觉上做的是地图 App 定位图标的脉冲效果。ECharts-GL 原生没有现成的"涟漪3D"组件，但有个讨巧的办法：准备多个大小不同的球体，通过定时器循环切换它们的透明度、半径和高度，模拟出由小到大、由实到虚的呼吸感。

// useRippleLayer.js export const rippleOptions = (rippleIndex) => { const city = [ { name: '北京', coords: [116.4074, 39.9042] }, { name: '上海', coords: [121.4737, 31.2304] } ] const radius = 4 + rippleIndex * 2 const opacity = Math.max(0, 0.8 - rippleIndex * 0.2) return { series: city.map(c => ({ type: 'scatter3D', name: c.name, coordinateSystem: 'geo3D', data: [{ value: [...c.coords, 3] }], symbol: 'circle', symbolSize: radius * 2, itemStyle: { color: '#ff6b6b', opacity: opacity } })) } }

通过 setInterval 每 200 毫秒更新一次 rippleIndex，让它从 1 跑到 5 再回到 1，就能看到一圈一圈外扩、淡出的脉冲球。这个动效在动线上很容易抓住用户眼球，但不能加太多——全地图20个城市一起脉冲就变成迪厅了，选两到三个最重要的业务重心即可。

这里还有一个实用技巧：涟漪层的 pulse 更新频率不需要很高，6 到 8 fps 就足够让肉眼觉得流畅，CPU 和内存占用会明显下降。大屏项目经常 7x24 小时开机跑着，性能开销能省一点是一点。

4. 交互联动与视觉动效

4.1 点击地图实现下钻省份

一个做成了大屏的地图，如果没有下钻能力，给人的感觉就是一个3D雕塑，缺乏"可操作感"。

下钻的思路是：监听 map3D 的 click 事件，拿到被点击省份的 name，然后重新 registerMap 对应的省份 GeoJSON，更新 option 里 map 字段为china/${provinceName}。这在数据上是要准备两级 GeoJSON 的：全国一份，各省一份。

chart.on('click', (params) => { if (params.seriesType === 'map3D' && params.name) { const provinceName = params.name // fetch 省份 GeoJSON 并注册 fetch(`/geo/${provinceName}.json`).then(res => res.json()).then(geo => { echarts.registerMap('province', geo) chart.setOption({ geo3D: { map: 'province', regionHeight: 3 }, series: [ { type: 'map3D', map: 'province', coordinateSystem: 'geo3D' } ] }) }) } })

下钻有几个容易翻车的点。第一，点击时 map3D、scatter3D、bar3D 都会触发 click 事件，要先用 seriesType 过滤，否则点柱子也会触发下钻，体验很怪。第二，下钻后要提供返回按钮，把 mouse 事件绑到一个自定义返回控制器上，重新 setOption 回全国地图。第三，下钻后原飞线、散点数据必须全部清掉，否则残留在不存在的坐标系上，渲染会报错或者出现错位。

4.2 Tooltip 的信息层级和遮罩问题

3D 地图的 tooltip 跟 2D 不一样，地图是可以旋转的，tooltip 的定位如果固定挂在屏幕某个位置，旋转时它会孤零零地悬在地图外。实际项目里我一般不依赖 echarts 内置 tooltip，而是改成自绘 HTML 的浮层。

这样处理有个额外的好处：你可以完全自定义浮层里显示的内容、图表和按钮，不受 formatter 返回字符串的限制。比如点击或 hover 某个省份时，旁边可以弹出一个小小的 sparkline 折线图，展示近6个月的趋势，这是原生 tooltip 很难优雅实现的。

自绘浮层要注意的是定位逻辑：监听鼠标 move 事件，通过chart.convertToPixel({ seriesIndex: 0 }, params.value)换算屏幕坐标，再根据视口边缘动态翻转浮层的位置，防止它挤出屏幕外被裁掉。

4.3 视角控制和自动旋转的平衡

默认地图刚加载时如果直接立着不动，冲击力有限，我觉得加一个自动旋转会好很多。viewControl 里的autoRotate: true会让地图绕 Y 轴缓慢自转，配合autoRotateSpeed: 8控制转速，再加载完数据后让视觉自动扫一圈，特别适合汇报开场。

但长期开 autoRotate 会有一个问题：用户想仔细看某一个区域时，地图一直在自己转，交互体验会变得烦躁。所以我的做法是加载之后自动旋转 6 秒，然后自动关闭，用户一旦开始拖拽地图就立刻停掉自动旋转。这个在 init 后 setTimeout 里 setOption 即可实现，整体动效由"动"转"静"，节奏感也更好。

5. 常见问题与性能优化实录

5.1 地图卡顿和首屏加载慢

大屏项目最尴尬的一刻是：地图数据还没 load 完，领导已经盯着屏幕看空气了。性能我从三个方向去优化。

第一，地图 GeoJSON 数据压缩和抽稀。全国地图的边界坐标往往有几万个点，很多点肉眼根本分辨不出来。用 simplify 算法把坐标点抽稀到 1%，地图轮廓几乎看不出区别，文件体积能缩到原来的 1/10 以内。

第二，series 里不要塞多余的数据。尤其是 scatter3D，每个点都会创建独立的 3D 几何体，几十个点没问题，几千个点就可能让帧率掉到 10 以下。如果数据量确实大到这个程度，改用 heatmap 或者聚类，而不是硬扛。

第三，黑色背景大屏可以作为天然的优化优势。让大屏使用暗色背景，地图外其他区域不渲染透明材质，能省掉很多 blend 计算。配合 anisotropy 各向异性光照，能把暗色背景下的立体感再拉高一层。

5.2 5个图层叠加层级和渲染顺序错乱

这是踩坑最多的地方。有的同学歇力把 5 个 series 按顺序一写，发现柱子跑到地图底下，或者散点被飞线遮挡，就问为什么看不到。答案要先理解 ECharts 的 z-level 渲染顺序。

同一层级的 series，后定义的会覆盖先定义的。所以 series 内部顺序应该是：地图主体（map3D）、柱状层、散点层、飞线层、涟漪层。如果你把飞线放在 map3D 前面，飞线就会被地图主体整个挡住。千万别乱序。

如果遇到不同 series 之间因为 z 值冲突导致的渲染半透明错乱，可以显式给每个系列分配zlevel，让 zlevel 不同的系列分铜渲染。但要注意 zlevel 不连续时可能会多出额外的 canvas 合成开销，所以能用 z 控制就用 z，实在不行再动 zlevel。

5.3 常见报错速查

5.4 关于纹理贴图的建议

想让地图更艳一些，很多同学喜欢给地图贴纹理，比如把省份贴上木纹、磨砂颗粒甚至国旗图案。ECharts-GL 的 texture 支持确实有，但用下来我的经验是：正式项目里少用。

纹理贴图的好处是质感丰富，代价是文件体积增加（长宽 512 或 1024 的贴图动辄几百 KB），且材质复杂后渲染帧率下降明显。大屏项目的观感优先级永远是"轮廓清晰 > 动效顺滑 > 质感精致"，纯色加光照阴影已经能做出非常高级的效果。真想提升质感，我建议优先调光照和投影，而不是堆纹理。

6. 项目扩展方向与我的实操体会

6.1 这套方案还能往哪扩展

当前项目做的是中国省级地图，但整套架构和五层叠加的思路完全可以横向迁移到其他粒度。想看市级数据就换市级 GeoJSON；想做世界地图就换成世界各国的 GeoJSON。地图底座换了，散点、柱状、飞线、涟漪的逻辑不用动一行代码，因为它们依赖的只是"跟 coordinateSystem: 'geo3D' 对齐"这个抽象前提。

更进阶的扩展方向是把地图跟真实业务数据联动。比如飞线层的数据不要写死，而是从 WebSocket 推送实时订单轨迹；柱状层的高度绑定数据库里某个业务表的 count 值；点击省份后弹窗拉取该省份的所有门店散点。这套方案最值钱的不是 3D 效果本身，而是图层解耦之后，数据接入的成本被压到了最低。

6.2 我踩过的几个坑和摸索出的心得

第一，ECharts-GL 的配置项学习曲线比 2D 陡得多，但它的排查套路很成熟：先静态再动态、先单层再多层。图层叠加做出来之后一坨乱麻，不要直接去看全部 option，把其他 series 注释掉，只留一个图层逐个排查，效率会高很多。

第二，大屏上的颜色一定不要用低饱和色。3D 地图有光照参与计算，同样的蓝色在光照弱的位置会暗一大截，看起来像是脏了。我的调色原则是：主色用亮饱和色，副色用高对比色，背景彻底压黑，这样无论光照怎么转动，视觉焦点不会散。

第三，地图坐标系的坑最难识别。开发环境跑得好好的，部署上线后散点位置全部偏移，基本就是 GeoJSON 坐标系和业务坐标系的基准不统一。最好的办法是在开发第一天就确认整体采用哪个坐标系，并且把全国数据和省份数据来源固定在同一个渠道，不要混用多个来源的地图数据。

第四，真要深挖性能的时候，优先看 WebGL 层面的瓶颈，不要只看 JS 代码。ECharts-GL 渲染是 GPU 密集的，series 数量、shading 模型、antialias 开关、纹理贴图尺寸，这些才是影响帧率的大头。数据项不多但很卡，基本就是材质和细分参数开太高了。

最后说一句实在的：3D 地图可视化这件事，很多团队上来就追求视觉炸裂，我建议还是先把这个5层叠加的地图底座跑起来，然后一层层去加能和业务对上话的数据。地图再炫，最终的价值还是落到"领导一眼看懂业务趋势"这六个字上。方向对了，细节慢慢磨，这套方案会给你的大屏项目省下大量不必要的折腾时间。