站点定位与功能总览

本项目是一个基于 Astro 5+ 构建的极简高扩展性个人技术小站，集成了 Markdown 内容集合博客系统与基于 PostgreSQL / PostGIS (osmchina) 驱动的自制 GeoJSON 交互式地图体系。

一、极简博客站功能实现

  • Astro 基础架构：采用最新 Astro 5+ 静态构建（SSG 模式），零臃肿配置。
  • 内容集合 (Content Collections)：通过 src/content.config.ts 定义 blog 集合，结合 glob loader 自动加载 src/blog/**/*.md 文章。
  • 博客专用布局：定制 BlogPostLayout.astro，提供清晰的文章头、元信息标签、优雅的正文排版及暗色自适应代码块。
  • 动态路由与目录页：
    • /blog：自动按文章发布日期倒序排序的博客文章列表页。
    • /blog/[...slug]：动态路由匹配并渲染对应的 Markdown 文章。
  • 全局共享导航与明暗主题切换：
    • Navigation.astro 贯穿全站，包含首页、博客、地图入口。
    • 内置昼夜主题切换按钮，支持 localStorage 本地偏好记忆与系统色彩偏好侦测。
    • 配置 Shiki 双主题（亮色 github-light / 暗色 github-dark），彻底解决代码阅读对比度问题。
  • 极简首页：src/pages/index.astro 纯粹简洁，提供直接直达博客和地图的导流入口。

二、OSM 数据库的使用与参考文档

三、自制地图体系与“零代码”动态路由架构

  • GeoJSON 内容集合：在 src/content.config.ts 中配置 map 集合，指向 src/map/**/*.json，支持 name、description、category、tags、updated_at 等元数据校验。
  • 地图专属双 Tab 布局 (MapLayout.astro)：
    • 地图视图 Tab (slot="map")：100% 填满视口容器，无多余边距干扰，充分释放屏幕空间用于地图漫游交互。
    • 数据属性 Tab (slot="data")：独立滚动面板，展示图层统计、业务说明与各要素明细属性表格。
  • 高性能 ECharts 地图渲染组件 (GeoJsonMap.astro)：
    • 支持多边形底图 + 矢量线路（Lines）混合分层渲染与高亮光晕效果。
    • 深度联动全站明暗模式，切换主题时无需刷新自动响应调整色盘。
  • 零代码（Zero-Code）通用动态路由机制：
    • 目录页 src/pages/map/index.astro 与详情页 src/pages/map/[…slug].astro 实现完全通用化。
    • 后端 Python 脚本生成新的 GeoJSON 时自动注入顶层元数据；前端无需编写或修改任何一行代码，即可自动完成目录索引、路径路由与多视图渲染。
  • 已落地的特色专题地图案例：
    1. 成都市区县行政区划 (/map/chengdu-districts)：成都 20 个区县级边界多边形底图。
    2. 成都市地铁线路网络 (/map/chengdu-metro)：提取缝合全部 17 条地铁/市域铁路线网，带官方代表色与里程。
    3. 成都市区县与地铁网络综合图 (/map/chengdu-metro-and-districts)：区县底图与全网地铁线的多图层叠加。
    4. 318国道沿线市级城市地图 (/map/g318-cities)：精准提取 318 国道（沪聂线）全线 7,200+ 公里及沿线穿过的 30 个地级市/州。
    5. 318国道沿线区县级行政区地图 (/map/g318-counties)：横跨上海至西藏边陲的 96 个区县精细脉络底图。