我基于已经发布到 npm 的两个包，几个小时就做了一个完整的示例项目 screen-demo，直接搭出 4 套不同行业方向的大屏。目标是：开箱即用、可配置、可二次开发。
两个核心依赖：
@lius1314/china-map-3d-designerv1.1.5 ------ 3D 中国地图设计器 SDK@lius1314/visual-dashboard-scaffoldv1.2.3 ------ 可视化大屏脚手架 SDK
下面逐个看看这 4 套大屏长什么样、用了哪些能力。
一、智慧文旅景区运营大屏
行业方向：文旅 / 景区 / 城市运营
这套大屏采用蓝紫科技风，顶部标题使用渐变字体，底部 Dock 导航可以在四个子页面之间切换：
- 文旅总览：左右两侧分布实时客流趋势、热门景区排行、游客来源占比、服务响应趋势、服务能力雷达、景区指标 TOP 排行；中间是 3D 景区客流态势图。
- 客流感知：左侧三块 3D 翻转卡片 + 右侧大幅 3D 地图，突出客流热点。
- 趋势研判：左右对称布局，八块指标卡围绕中间地图，适合宏观趋势分析。
- 服务运营：左侧服务分类菜单 + 顶部关键指标 + 中间服务运营台。
技术亮点：
- 底部 Dock 使用
visual-dashboard-scaffold的footer行为配置，点击切换页面。 - 中间 3D 地图使用
china-map-3d-designer的纯展示模式，接入景区客流数据。 - 卡片背景、标题装饰、入场动画全部通过配置面板调整，没有硬编码 CSS。
二、智慧物流园区运营大屏
行业方向：物流 / 园区 / 供应链
绿色系主题，整体布局更紧凑，强调订单、仓储、运力、履约等核心业务指标：
- 左侧：订单吞吐趋势、仓储周转排行、准时履约 KPI
- 右侧：运力结构占比、活跃车辆趋势、干线业务 TOP 排行
- 中间：干线运输态势图（3D 地图）
这套大屏把 visual-dashboard-scaffold 的像素布局优势发挥得比较充分：左右两侧卡片严格对齐设计稿位置，中间地图占据核心视觉区。整体没有底部导航，适合单页长时间展示。
三、工业物联网设备运维大屏
行业方向：工业 / 物联网 / 设备运维
青蓝色工业风，中间是全国设备监控态势图，左右三块指标卡对称排布：
- 左侧：设备在线趋势、设备工单事件、产线热力排行
- 右侧：服务能力雷达、设备类型占比、SLA 达成率
这套大屏重点展示了如何把设备状态、告警事件、SLA 等运维数据映射到 3D 地图上。地图上的柱图和散点由 china-map-3d-designer 的 MapDataInput 数据驱动，区域数值高低一眼可见。
四、绿色能源低碳运营大屏
行业方向：能源 / 双碳 / 电力
银白 + 浅蓝冷色调，科技感更强，也是页面最多的一套大屏：
- 能源总览：左右负荷趋势、能源站点排行、资源结构占比、低碳能力雷达，中间能源低碳态势图。
- 负荷监控：大幅 3D 地图 + 顶部能源核心指标 + 两侧排行和趋势。
- 趋势研判：八块指标卡 + 中间态势地图 + 底部态势趋势。
- 系统管理：左侧调度菜单 + 右侧能源节点资源表。
- 运维工单：全屏工单台。
- 广东省能源视角 ：单独展示省级地图，演示
china-map-3d-designer的initialRegion固定区域能力。
底部 Dock 同样支持多页面切换，并且包含一个独立的省级地图入口。
两个 npm 包分别解决什么问题
@lius1314/china-map-3d-designer
基于 Three.js 的 3D 中国地图可视化设计器 SDK，主要职责是地图本身：
- 3D 省级 / 市级地图渲染，支持双击下钻；
- 顶面、侧面、边界、粒子、柱图、飞线、散点、标签等 9 大图层可配；
- 设计器模式所见即所得，导出 JSON 即可用于生产；
- 支持固定显示某省（如广东省能源视角）。
如果你想深入了解 3D 地图设计器本身的设计理念、主题预设和配置工作流，可以看我之前写的这篇文章：
@lius1314/visual-dashboard-scaffold
可视化大屏脚手架，主要职责是"把地图和图表装配成完整大屏"：
- 编辑模式下拖拽、缩放、复制、删除区块；
- 多页面路由与底部 Dock 导航；
- 头部、中间、底部三层布局，全局与页面配置分离；
- 区块注册机制，ECharts、3D 地图、业务表格都能接；
- 主题、背景、卡片、字体、图标资源内置；
- 配置导入导出、本地持久化、页面参数传递、事件通信。
如果你需要的是一套"能自己调布局、能导出配置、能交付给业务方"的大屏框架，可以看下这篇文章：
为什么是"开箱即用"
screen-demo 这个项目已经把两件事情做完了：
- 静态资源同步 ：
visual-dashboard-scaffold的主题图、china-map-3d-designer的 GeoJSON 都已经通过postinstall脚本自动复制到public/目录。 - 默认配置写好 ：4 套大屏的 JSON 配置分别放在
src/config/default-dashboard-theme1.json~theme4.json，直接引入即可渲染。
你只需要：
bash
npm install
npm run dev就能看到 4 套大屏。替换数据、调整布局、增删页面，都可以在编辑模式下完成。
适合谁用
- 需要快速出 Demo 的前端 / 可视化开发；
- 做智慧文旅、智慧物流、工业互联网、能源双碳方向的项目；
- 希望把"大屏框架"和"业务图表"拆开的团队；
- 想基于成熟 npm 包做二次交付的开发者。
写在最后
screen-demo 不是从零写 4 个大屏，而是验证一种思路：把通用能力下沉到 npm 包，业务层只做配置和数据。这样同一个团队可以在不同项目里复用同一套大屏框架，而 3D 地图部分也可以独立迭代。
如果你对 3D 地图设计器感兴趣，推荐阅读我之前的付费文章；如果你更需要完整的大屏编排与交付能力，可以看这篇文章同步发表的文章呀。
相关资源：
- npm：
@lius1314/china-map-3d-designerv1.1.5 - npm：
@lius1314/visual-dashboard-scaffoldv1.2.3 - 示例项目：
screen-demo
示例源码我已经放在公众号（柳杉前端）同名文章底部了，如果你需要的话可以去获取呀。
免责声明
本项目内置的图片资源（背景图、卡片素材、头部标题装饰、图标等）及字体文件（优设标题黑、阿里巴巴普惠体、DS-Digital、庞门正道标题体、思源黑体等）均来源于网络，仅供学习和参考使用，不得用于商业用途。如有侵犯您的版权，请联系作者进行删除。