mcpField
G
geospatial-frontend

geospatial-frontend

github.com/isaaccorley设计与 UI7953 次安装12 周前更新
代码仓库

关于 geospatial-frontend

用于构建以地图为中心的地理空间演示 Web 应用的技能，采用地球视图界面。内容规定了原生 TypeScript 与 MapLibre 架构、空间数据加载模式、交互式绘图和引导教程。

主要功能

  1. 01MapLibre GL JS 地球界面
  2. 02GeoJSON 图层与绘图工具
  3. 03DuckDB-WASM 空间过滤
  4. 04Web Worker 计算模式
  5. 05交互式聚光引导教程
  6. 06响应式面板布局

适用场景

  1. 01构建地理空间演示应用
  2. 02展示卫星底图与 GeoJSON
  3. 03对 Parquet 数据进行空间过滤
  4. 04引导用户操作地图

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/isaaccorley/geospatial-skills --skill geospatial-frontend

安装后在 Claude Code 中输入/geospatial-frontend确认已加载。

附带文件references/design-system.mdreferences/user-preferences.md

详细介绍

地理空间前端演示构建器

构建精致的地图中心型演示 Web 应用。源自生产环境中的地理空间检索演示，采用经过实战验证的设计模式。

架构

  • 技术栈：Vite + 原生 TypeScript + MapLibre GL JS（地球仪）+ DuckDB-WASM + 纯 CSS
  • 无框架：不使用 React、Vue、Tailwind、CSS-in-JS。采用纯语义化 HTML + CSS 自定义属性 + 原生 TS。
  • 地图优先：地球仪就是应用本身。其他所有内容都以透明 HUD 的形式浮在其上。
  • 唯一事实来源：全局 state 对象；updateView() 负责重新渲染；通过指纹比对避免重复构建 DOM。

设计系统

完整的令牌规范（颜色、字体、阴影、间距、圆角、动画、组件）请参阅 references/design-system.md。

核心风格：浓缩咖啡色 + 象牙白 + 铁锈色。仅支持深色模式。采用玻璃拟态浮动面板。灵感来自 Anthropic Salon 美学。

UI 规则

经过实战验证的模式、已确认的功能和设计规则请参阅 references/user-preferences.md。

布局

viewport (100vw x 100vh, fixed)
  ::before  starfield
  ::after   vignette
  #map      MapLibre globe canvas
  brand     top-left (spinning rings + logotype)
  search    top-center (glassmorphed geocoder)
  status    top-center-below (pulsing LED + message)
  panel-L   left (query: draw controls, exemplars, results)
  panel-R   right (explore/discoveries, optional)
  tutorial  overlay + spotlight + card (z:1000+)

面板使用 position: fixed，采用玻璃拟态效果并留有充足内边距。地图铺满下方的整个视口。

地图集成

  • 使用 MapLibre GL JS，并设置 projection: "globe"（3D 地球仪，而非平面）
  • 使用 Sentinel-2 无云瓦片（或类似的卫星底图）
  • 图层堆叠顺序：AOI 填充/描边 -> 草稿图层 -> 结果填充/描边 -> 带光晕的圆形点 -> 悬停预览
  • 绘制：矩形（按住 Shift 并拖动，同时使用 DOM 覆盖层）+ 多边形（点击添加，双击完成）
  • 飞行动画：使用 globe.flyTo()，curve 为 1.4，speed 为 1.2
  • GeoJSON 源：所有数据均采用 GeoJSON；使用基于表达式的绘制属性实现动态样式

数据流水线模式

  • DuckDB-WASM 加载 Parquet 清单和分片
  • 通过 ST_Intersects 或边界框包含关系进行空间筛选
  • 使用 Web Worker 执行繁重计算（嵌入距离、评分）
  • 并行获取分片，并限制并发数
  • 分两阶段加载数据：先加载元数据，再按需加载嵌入数据

教程系统

包含 5–7 步的交互式聚光灯引导流程，用于模拟真实操作：

  • 使用盒阴影聚光灯（0 0 0 9999px rgba(...)）在目标元素上方挖出一个洞
  • 通过 getBoundingClientRect() 自动定位卡片，并应用玻璃面板样式
  • 模拟点击并添加动态波纹效果
  • 按 Enter 键进入下一步；如果用户跳过步骤，则自动放置示例
  • 将完成状态存储在 localStorage 中
  • 必须是可交互的实时演示——模拟缩放、绘制、放置示例和切换视图模式

响应式布局

仅设置两个断点：

  • 1100px：缩小面板，隐藏次要导航
  • 900px：面板折叠为底部居中的堆叠布局，最大高度为视口的 40–45%

文件组织

将文件控制在约 500 行以内。按职责拆分：

  • main.ts -- 应用状态、DOM、事件处理器、教程
  • map.ts -- MapLibre 设置、图层、绘制、相机
  • types.ts -- 接口
  • util.ts -- 几何处理、颜色插值、格式化
  • scoring-worker.ts -- 用于计算的 Web Worker
  • styles.css -- 所有 CSS（纯 CSS，无预处理器）
  • index.html -- 入口文件，包含字体预加载和 meta 标签

评论

支持 Markdown