Back to home

GIStudio

SpatialHarness

SpatialHarness —— 纯本地 WebGIS 工作台:引擎可插拔(OpenLayers v1)、File System Access 直读本地磁盘、自动保存、QGIS 风格现代化 UI

Stars
0
Language
TypeScript
Created
Aug 15, 2026
Updated
Aug 15, 2026

Introduction

SpatialHarness

纯本地 WebGIS 工作台 —— 把桌面 GIS 装进浏览器。 模仿 QGIS 交互范式、采用通用 GIS 数据格式、现代化组件化架构。

CI License: MIT TypeScript

本地优先:数据全部保存在你自己的电脑上(磁盘文件夹或浏览器工作区),不经过任何服务器; 计算下发:格式解析与空间分析运行在 Web Worker,主线程不卡顿; 自动保存:所有操作自动保存,关闭浏览器也不丢失。

✨ 核心特性

特性说明
🗂️ 数据本地化File System Access API 直接读写本地磁盘文件夹(工程文件 + 数据文件);IndexedDB 作为浏览器内持久层,全浏览器可用
⚙️ 计算下发数据解析与空间分析全部运行在 Web Worker(comlink),主线程不卡顿
💾 自动保存任意变更 1.2s 防抖自动保存(双轨:IndexedDB 必写 + 磁盘尽力写),重启浏览器自动恢复
🧩 引擎可插拔引擎抽象层为核心(MapEngine 接口 + 注册表),OpenLayers 为 v1 实现;未来可注册 MapLibre GL 等新引擎,UI 零改动
🎨 QGIS 风格符号化单一符号 / 分类符号 / 渐变符号 + 标注,实时预览
📊 属性表虚拟滚动大表、排序、筛选、单元格直接编辑、与地图选择联动
🔬 空间分析工具箱缓冲区 / 相交 / 联合 / 差集 / 裁剪 / 融合 / 质心 / 字段统计 / 图层统计 / 外包矩形
✏️ 编辑与绘制绘制点线面、顶点编辑、属性编辑,支持撤销/重做(命令模式)

🚀 快速开始

pnpm install
pnpm dev          # http://localhost:5173 (推荐 Chrome / Edge)
pnpm test         # 单元测试(vitest)
pnpm build        # 类型检查 + 生产构建

首次使用:点击「新建工程」→ 可选「选择文件夹」作为磁盘保存位置 → 用「导入文件」或「打开数据文件夹」加载你的 GIS 数据。

📦 支持的格式

格式导入导出说明
GeoJSON原生格式,编辑后可直接写回
Shapefile.shp + .dbf + .prj(支持 .zip 包),自动坐标系归一化
KML
GPX
GeoTIFF栅格渲染(懒加载分块)
CSV自动识别经纬度列
工程文件project.webgis.json(含图层树/样式/视图/数据)

坐标系:内置 CGCS2000 / 西安80 / 北京54 常用带号 + .prj WKT 解析,导入时统一归一化到 EPSG:4326,原始坐标系保留在图层元信息。

🏗️ 架构一览

UI 层(React 组件)            → Toolbar / LayerPanel / AttributeTable / StylePanel / AnalysisPanel
状态管理层(zustand)           → project / selection / ui / history + engineBridge + persistence
核心层(core,引擎无关)        → engine接口 / layers模型 / style规范 / crs / datasource / analysis / storage
引擎适配层(engine/ol)        → OpenLayers v1(未来可插拔 MapLibre 等)

详细设计见 docs/ARCHITECTURE.md

🧪 验证

  • 单元测试:33 个用例(存储双轨往返、手写二进制 Shapefile fixture、turf 空间分析含多要素叠加语义、WKT 解析)
  • 冒烟测试scripts/smoke_test.py(Playwright)覆盖完整用户旅程:新建工程 → 导入 → 自动保存 → 识别 → 样式 → 分析 → 绘制 → 撤销/重做 → 刷新恢复

🤝 贡献

欢迎 PR。开发约定:

  • 业务逻辑只依赖 src/core/ 的引擎无关契约,禁止在 UI 层 import ol
  • 所有计算放入 src/core/*/worker.ts,主线程只调 service
  • 提交前保证:pnpm exec tsc -b --noEmit 零错误、pnpm test 全绿、pnpm build 成功

🗺️ 路线图

  • 引擎:MapLibre GL 适配器、Cesium 3D
  • 格式:GeoPackage、Shapefile 导出、gdal3.js WASM 栅格处理
  • 分析:网络分析、栅格计算器、热力图
  • 制图:打印布局、PNG 导出

📄 License

MIT © GIStudio