Skip to content

About

Manes 全域运行视窗:基于 React 与 Three.js 的离线中国行政区三维大屏原型

Resources

Stars

0 stars

Watchers

0 watching

Forks

Repository files navigation

MANES · 全域运行视窗

Manes工作室 · 构域标志

Manes工作室。品牌采用已选定的③「构域 / SPATIAL CORE」标志:开放等轴空间、中央 M 负形与暖白 / 香槟三平面,沿用烟灰玻璃视觉。页面和浏览器图标统一使用精修矢量稿。品牌资源与生成提示词。旧默认品牌会自动迁移为 MANES,用户自定义名称和已保存画布保持不变。

根据用户提供的 1 - 1.mov 与配套 JPEG 复刻的交互原型。保留烟灰玻璃、暖白字体与共享三维场景,采用文字和细线导航,地图支持旋转、缩放和逐级下钻。

当前以 main 维护一套共享代码,通过 base / daoyan 项目配置选择默认画布、品牌和车辆功能。基线版默认展示设备、在线率、流量趋势、区域排行与运行事件;道研版保留左侧三卡和车辆地图。两版共用 UI、配色、字体、编辑器和地图能力,各自保存画布与模板。配置、开发、迁移和回退步骤见 双项目维护说明。

本地运行

建议使用 Node.js 24;自动检查使用 Node.js 24,本轮已使用 Node.js 24.15.0 和 26.8.2 验证。

npm ci
npm run dev:base -- --host 127.0.0.1
# 另一个终端可同时启动道研,默认端口 5175
npm run dev:daoyan -- --host 127.0.0.1

已附完整的本地地图数据与字体。运行时不需要地图 API Key、互联网字体、在线底图或外部 HDR。

npm run verify
# 也可只构建指定项目
npm run build:base
npm run build:daoyan
npm run preview -- --host 127.0.0.1 --port 5174

默认 npm run dev / npm run build 选择基线。两版独立静态产物分别位于 releases/base/client、releases/daoyan/client,以对应目录为网站根目录即可。dist 和 npm run preview 指向最后一次构建的项目;同时构建使用 npm run build:all。直接双击 index.html 的 file:// 方式不支持读取 GeoJSON,应使用 HTTP 静态服务器。当前资源路径从 / 开始;若部署到子目录,需要同时调整 Vite base 和数据请求前缀。

模板附带的 Sites worker 文件保留;当前交付未进行外网发布。

使用

  • 左键拖动旋转,右键拖动平移,滚轮缩放。右侧按钮支持放大、缩小、旋转、俯视,顶栏罗盘恢复初始视角。
  • 点击区域下钻;左上区域名称可打开选择器并搜索名称或六位代码;面包屑及返回按钮可返回父级。
  • 基线导航沿用图层预设:运行总览恢复默认图层,数据监测开启热力,交通网络聚焦道路,区域管理打开区域选择器。道研为「运行总览 / 数据监测 / 聚集分析 / 交通网络 / 区域管理」五项导航,普通导航保留所选时间窗与图层组合;运行总览返回全国,区域管理打开选择器。导航名称可配置。道研界面说明按 2026-10-02 本地工作树,HEAD 99c0e87 之后的导航/侧轴改版尚未另行提交,不代表已发布;既有本地验收见 导航与侧边时间轴验收。
  • 图层面板可控制离线道路底图、道路、监测光柱、区域连线、热力、标签,并切换质感与流畅模式。离线道路底图默认关闭;开启后贴合行政区表面,跟随旋转、缩放和下钻。图片自带的道路与地名不能单独隐藏。
  • 全国 → 湖北省 → 十堰市 → 丹江口市可查看精细道路样区;区域选择器也有快捷入口。
  • 数据说明中保留来源链接和渲染统计。统计是手动快照,含反射等通道,并非 FPS。
  • 道研新浏览器预设仍使用提供的 5 辆车种子;既有演示浏览器记录曾接入并保存完整 10,000 条模拟原始批次,不能将记录条数写成默认车辆数。实际显示数量取所选 GPS 时间窗去重并隔离位置冲突后的有效车辆。开启「车辆点位」后,点击号牌标签、信息框查看全部 15 个字段;重叠标签通过引线错开。地图下方定位入口随「聚集标签」开关定位簇或车辆,详情可定位单车。
  • 初始车辆数据位于 src/projects/daoyan-vehicles.json,是 GPS 时间 2026/9/13 00:00 的固定快照,不是实时数据。同一车辆源供地图、数据监测三卡(窗内有效车辆、分窗车辆数、数据质量)及独立「聚集分析」页联动;通用总数、状态占比和速度排行仍可选用。聚集热区只叠加当前窗聚集成员的 GPS 密度,不计噪声车辆,空数据不回退演示节点;「车辆点位」独立开关。通用速度列表与地图同步显示选中标记,通用车辆总数卡保留纯数字雕塑、金属渐变和浮雕阴影,不显示车辆模型或图标。沿用原字段 PALTE_COLOR,海拔、里程空值显示“未提供”,报警和状态保留完整二进制字符串;未推断编码含义或做未经确认的坐标系转换。
  • daoyan 项目模式隐藏 Logo、品牌字标和浏览器品牌图标;base 保留 MANES 品牌。两版组件卡片、弹窗和悬浮框默认使用细亮边、角部反射与柔和投影,并随主题配色变化。共用标题、导航、地图信息和操作的对齐、柔和渐隐压光与透光磨砂卡片,光柱和连线开关收纳在图层面板内。

可复用大屏编辑器

道研现支持 Excel 批处理后接入 DBSCAN 聚集分析:npm run cluster:vehicles -- --input <原始.xlsx> --output <结果目录> --python <含openpyxl的Python>。按 GPS 时间分窗,同车同窗取最新有效点;内核默认 1 km / 3 辆 / 5 分钟为初试参数,未知坐标系不猜测转换。通过独立「聚集分析」页查看统计,地图与分析页共用侧边时间轴;点击/竖向拖动/键盘切窗,悬停或聚焦时间卡可播放、暂停,末窗停止,全部已载入非空窗均可访问且时间轴内部不滚动。「页面设置 → 聚集算法」调整参数;已清洗 dashboard.json 只含最新窗,改窗须接完整原始批次或从原 Excel 重算。字段、算法、导入步骤、结果协议和规模边界见 道研 DBSCAN 对接方案。

基线点击右上角齿轮「设置大屏」直接进入自由画布;道研经「页面设置 → 外观与数据 → 编辑主题、布局与数据源」进入同一画布编辑器。支持 28 种业务组件和一个共享三维地图,每个画布最多 40 个业务组件。可添加、修改、复制、删除、单选八向缩放和精确输入尺寸,支持多选整组移动、锁定、隐藏、图层顺序、撤销/重做与预览。保存画布后在当前浏览器生效,未保存退出会提示。

  • 基础组件:指标卡、仪表盘、折线图、面积图、柱状图、条形图、饼图、环形图、表格、目标进度、状态矩阵、公告、数字时钟。
  • 28 种业务组件加地图,按指标、趋势、占比、统计和内容分组。新增饼图、玫瑰图、分组柱状图、堆叠面积图、百分比堆叠图、直方图、箱线图、瀑布图;十五种专业图表复用 Apache ECharts。可配置图例、标签、配色,以及适用图表的轴名称、单位、平滑和区间缩放。
  • 按 Shift/⌘/Ctrl 点击多选。网格步长为 0.5–5%,磁吸按 2–16 CSS 像素匹配画布及可见组件的边与中心;按住 Alt 临时关闭吸附。支持六种对齐、水平/垂直等距、同宽/同高;锁定项不参与移动、批量排列和删除。
  • 「全局设置 → 中文字体」可切换 MiSans(默认)与霞鹜文楷;点击「应用设置」预览,再「保存画布」保留。字体随模板导入导出,支持撤销/重做。
  • 全局名称、导航文字和时钟可配置;组件可更换内容、材质、单位、1–100 条记录、表格列/列名。
  • 六套内置布局:运行总览、双侧监测、数据分析、业务洞察、趋势与占比、统计与增减;可另存最多 10 份本地模板。JSON 导入导出包含布局、数据绑定和静态数据,最大 2 MB。旧 v1 和缺少扩展选项的 v2 配置可导入,显式保存才写入浏览器本地存储。
  • 数据源支持静态 JSON、CSV 与 HTTP GET。识别数据后可选择多数组路径、预览字段类型与空值、检查适配结果,再按明确映射推荐创建组件;源与组件一次写入草稿,可整体撤销。点路径映射、求和/平均/首条汇总和 {adcode} 区域参数均可配置。
  • 专业图表校验必填字段及需要唯一的类别组合,缺值与缺少的趋势点不会伪补 0。自定义组件切换类型保留业务单位和映射,改接外部源时清除演示单位与轴名称。
  • 组件库、属性、模板、数据源与设置的加载失败仅影响各自面板,画布草稿与保存工具继续保留;错误弹窗可关闭后保存。
  • 数据错误可见,更新失败保留上次数据;自定义数据不会回退为示例。数据源或区域变更时取消过期请求,隐藏页面暂停轮询。

道研“行驶与静止”分离饼图仍可用于通用组件或已有自定义画布,外引连线直接展示状态、数量和占比,带厚度阴影;扇区及读数联动车辆地图。先将「车辆分析视图」切回「通用图表」,再在组件类型中选择饼图。现行数据监测默认三卡为窗内有效车辆、分窗车辆数、数据质量,聚集统计、趋势和簇明细在独立「聚集分析」页查看。

使用步骤、各类图表的字段契约和接口约定见 编辑与对接指南。附带 基础监测示例与 专业图表示例,后者用九个命名数组覆盖十五种专业图,均为固定虚构演示快照。模板保存在本地浏览器;跨设备通过 JSON 迁移。服务端配置中心、用户权限、鉴权代理和真实监控业务仍需项目实施。

技术与性能

React 19、Three.js r186、React Three Fiber 9、Drei 10、Vite 6。基础指标与图表使用 SVG / CSS,十五种专业图表使用按需加载的 ECharts 6.1;界面沿用 CSS 玻璃与排版,图标为 Phosphor。英文与指标数字使用本地 Manrope / Michroma,中文可选本地 MiSans / 霞鹜文楷 GB Lite;字库和许可见 public/fonts/。

单个共享 WebGL 场景位于所有玻璃组件后方。地图为真实 GeoJSON 挤出网格,保留多岛和内环;道路按类别合并线段,省区多岛按材质合并绘制组,保留点击区域能力。

  • 按需渲染:没有默认自动旋转或常驻动画循环。
  • 单次生成环境与接触阴影;地面模糊反射使用 512px 渲染目标。
  • 质感模式最多约 369 万场景像素,流畅模式最多约 207 万场景像素;恢复视角、切换质量与窗口缩放统一沿用该预算,UI 仍按浏览器原生分辨率绘制。
  • 当前行政区与道路按需读取,不一次下载并创建所有区县网格;切换后释放旧几何。
  • 相机裁剪范围在每个实际绘制帧按当前位置更新,覆盖下钻过渡、滚轮、按钮缩放与平移;补缝底层使用深度偏移,避免区级下钻后缩放出现三角形遮挡。仍保持按需绘制。
  • 离线底图开启后才读取 public/roadmap:保留一张全国概览纹理,视野变化停止 160ms 后,按视野中心原图像素的屏幕投影尺寸及实际渲染像素比选择细节层级。细节覆盖整个可见画布(含卡片后方),裁到已有瓦片范围,仅受显卡纹理尺寸限制;缺失位置保留概览。底图表面保留原图对比度,免受灯光、金属反光与色调映射冲淡,侧面仍保留三维材质。切换、关闭时取消旧请求并释放纹理,复用现有行政区网格与绘制调用。
  • 独立时钟和 memo 业务模块隔离更新。行政区 hover 下沉到各自组件,避免整个场景协调以及接触阴影重复计算。
  • 专业图表及 ECharts 独立分块,只有使用时加载;字段识别和推荐随编辑面板加载。专业图实例随尺寸、数据和配置更新,卸载时释放,并尊重系统减少动态效果的设置。
  • HTTP 按配置间隔轮询,同源多组件共享结果,页面隐藏时暂停;时钟独立更新。质量、反射和地图几何参数保留基线值。
  • 单选和多选拖动用浏览器帧回调预览位置,松手时只提交一步历史;地图移动与缩放同时调整相机构图。

此前编辑器优化阶段的构建分块体积如下(历史记录,当前体积以构建输出为准;KB 为十进制,gzip 为压缩后体积):

分块 原始 KB gzip KB 加载方式
应用主包 359.61 110.72 首屏
三维地图引擎 1,038.73 283.90 地图可见时提前加载
专业图表与 ECharts 690.19 235.16 使用专业图表时
字段识别与推荐 dataInference 10.48 3.99 打开相关编辑面板时
共享专业图构建逻辑 professionalCharts 11.11 4.75 图表或推荐功能需要时

地图隐藏时不加载三维引擎、行政边界与道路;地图可见时与区域数据并行加载,材质、灯光和几何参数不变。分块体积用于检查加载边界,不代表现场设备帧率或全部首屏资源大小。

基线优化阶段,本机浏览器常规全国帧由 1355 次绘制调用降低至 347 次,同为 575817 个提交三角面;初次阴影生成的帧开销更高。已检查 1120×718、1920×1080、3840×2160 和窄窗口。未据此承诺现场所有设备恒定 60 FPS。

数据与范围

public/data 包含 3238 个层级索引条目、364 个行政区集合文件及逐区域道路文件。索引含全国、特别行政区等数据条目,并不等于当前官方行政区数量。区县叶节点复用父级集合,按 adcode 过滤。

  • 行政边界复用 Daoyan 项目,原始来源 DataV.GeoAtlas;全国省界另取同源集合。
  • 全国道路来自 Natural Earth 1:10m 概化主干路,不能作为完整全国高速、国道数据。
  • 离线道路底图来自用户提供的 roadmap 目录,含 13,822 张 256×256 PNG(约 61.3 MB),已原样复制到 public/roadmap/{z}/{x}/{y}.png,可用文件见 index.json。采用 XYZ / Web Mercator 寻址,在现有线性经纬度投影中逐像素重投影,避免直接拉伸图片。最高 10 级,更大倍率仅放大现有细节;原文件未附提供商、日期或坐标基准说明,未作测绘级坐标验收。
  • 丹江口复用危货项目已经取得的 OSM 道路,WGS84;包含 G70、G59、G209、G241、G316 等编号。道路断段保持独立,不把同名路线强行连成直线。
  • 边界源未声明 CRS,精确坐标一致性、行政区时效及现场业务完整性尚未验收;台湾数据仅到省级外轮廓,直辖市等按实际源数据层级展开。
  • 基线默认业务组件与地图光柱、连线、热力为固定演示,组件可绑定自定义数据。道研聚集光柱按当前窗算法簇中心每簇一柱,默认关闭;聚集热区只叠加聚集成员,重算中、失败或零簇时清空,不回退固定演示节点。区域连线仍为示意关联。内置排行按区域总量分配份额,环图含“其他”且总和守恒;附带示例 HTTP 文件不按 adcode 筛选,不代表生产设备清单。

详细来源见 public/data/SOURCES.md,源文件散列见 public/data/provenance.json。

代码入口

  • src/projects/base.js / src/projects/daoyan.js:项目能力、品牌及默认画布;由 Vite 模式在构建时选定。
  • src/projects/daoyan-vehicles.json:道研新浏览器的 5 车种子快照,只进入道研构建;完整模拟原始批次入口为 public/data/vehicle-demo/run-30a4ad5d0638e063df74/observations.json,不是出厂默认车辆源。
  • src/VehicleAnalysis.jsx:独立聚集分析页、共享侧轴、四个车辆/聚集图层控件与页面设置。
  • src/useVehicleAnalysis.js / src/vehicleClustering.worker.js / src/vehicleClustering.js:Worker 接线及共享清洗、分窗、球面 DBSCAN 内核。
  • src/vehicles.js / src/useVehicleLayer.js / src/VehiclePanels.jsx:车辆校验、联动和界面;不内置业务快照。
  • src/App.jsx:画布与业务数据接线、独立时钟、区域导航。
  • src/DashboardEditor.jsx / src/layout.js:编辑操作、拖动缩放、历史记录。
  • src/EditorPanels.jsx / src/templateLibrary.js:组件库、属性面板、模板复用。
  • src/dataSources.js / src/useDataSources.js / src/DataSourcePanel.jsx:解析、字段映射、共享请求、数据源管理。
  • src/dataInference.js:数据列表识别、字段分析和组件建议,按编辑功能加载。
  • src/MapPanels.jsx:复用弹窗、区域选择与地图图层面板。
  • src/DashboardWidget.jsx / src/widgetData.js:复用指标、图表、表格与演示数据适配。
  • src/ProfessionalChart.jsx / src/professionalCharts.js:ECharts 按需渲染、专业图表共享校验与选项构建。
  • src/ConfigPanel.jsx / src/dashboardConfig.js:配置编辑、校验、持久化和默认方案。
  • src/widgets.css / src/config.css:模块与配置面板样式。
  • src/MapScene.jsx:网格、灯光、道路、相机、性能读数。
  • src/geo.js:投影、层级、内环与标签定位。
  • src/useRoadmap.js:本地瓦片选取、纹理加载与表面投影。实现依据:XYZ 瓦片寻址、Three.js 材质扩展。
  • src/styles.css:材质、排版、断点。
  • scripts/check.mjs:全量层级与环坐标检查、内环/多岛、道路编号检查。
  • scripts/prepare-geo.py:由用户原始数据重新准备离线包;该维护脚本依赖 Shapely 及脚本声明的本地源目录,不是页面运行依赖。

基线视觉核对见 设计验收;前一轮配置验收见 精细化验收;编辑器基础能力见 编辑器验收记录;本轮专业图表、精细排版和数据识别验证见 本轮验收记录。

道研 Git / SVN 协作(2026-10-20)

Git main 为正式主线,SVN dbscan 为双人协作入口。使用 npm run sync:status 查看共同版本、sync:pull 导入 SVN 增量并执行 Git 三方合并,完成双版本验收、提交和 Git 主线推送后再 sync:push。冲突、未保存改动、SVN 新提交或回执核对失败都会停止同步;完整步骤见 协作维护说明。

道研限行区域支持绘制与手动坐标编辑,规则随画布和模板保存、导入导出。默认规则集中在 src/projects/daoyan-restrictions.json;旧独立浏览器配置只读迁移。页面和 Excel 同时展示空间、GPS 时段与对象判定,完整原始批次按不同采样时刻生成连续命中事件。缺失信息与重复点不产生虚假命中。通用版的默认入口、品牌与存储保持独立。

About

Manes 全域运行视窗:基于 React 与 Three.js 的离线中国行政区三维大屏原型

Resources

Stars

0 stars

Watchers

0 watching

Forks

Releases

Packages

Contributors

Languages