AI导哈

旅行数据可视化服务器

一个基于KML文件的旅行数据服务器，提供交互式地图可视化功能。

  • by myliu
  • HTML
  • 本地部署
  • 更新于
在 GitHub 查看 myliu/mingyu.org

使用说明

Mark O'Travel MCP服务器

一个MCP（模型上下文协议）服务器，从KML文件中公开旅行数据，以及一个生成交互式合唱可视化的构建时图生成器。

住在 明宇网

系统架构

┌─────────────────────────────────────────────────────────────┐
│                        doc.kml                              │
│              (Mark O'Travel export file)                    │
│         Places, UNESCO WHC sites, visit statuses            │
└──────────────┬──────────────────────┬───────────────────────┘
               │                      │
               ▼                      ▼
┌──────────────────────┐  ┌───────────────────────────────────┐
│   kml-parser.ts      │  │   kml-parser.ts                   │
│   (shared module)    │  │   (shared module)                 │
└──────────┬───────────┘  └──────────┬────────────────────────┘
           │                         │
           ▼                         ▼
┌──────────────────────┐  ┌───────────────────────────────────┐
│   index.ts           │  │   generate-map.ts                 │
│   MCP Server         │  │   Build Script                    │
│                      │  │                                   │
│ ┌──────────────────┐ │  │  1. Parse KML                     │
│ │ get_visited_     │ │  │  2. Filter to 195 UN countries    │
│ │ places           │ │  │  3. Normalize statuses            │
│ ├──────────────────┤ │  │  4. Group sub-regions by country  │
│ │ get_places_      │ │  │  5. Generate self-contained HTML  │
│ │ by_status        │ │  │                                   │
│ ├──────────────────┤ │  └──────────┬────────────────────────┘
│ │ search_places    │ │             │
│ ├──────────────────┤ │             ▼
│ │ get_travel_stats │ │  ┌───────────────────────────────────┐
│ └──────────────────┘ │  │   map.html (generated)            │
│                      │  │                                   │
│   stdio transport    │  │  ┌─────────────────────────────┐  │
│         ▲            │  │  │ Leaflet + CARTO tiles       │  │
└─────────┼────────────┘  │  │ GeoJSON country polygons    │  │
          │               │  │ Color-coded by status        │  │
          ▼               │  │ Click → sub-region panel     │  │
┌──────────────────────┐  │  │ Stats bar + legend           │  │
│   Claude / MCP       │  │  └─────────────────────────────┘  │
│   Client             │  └──────────┬────────────────────────┘
└──────────────────────┘             │
                                     ▼
                          ┌───────────────────────────────────┐
                          │   index.html (landing page)       │
                          │   mingyu.org                      │
                          │                                   │
                          │   Embeds map.html via <iframe>    │
                          │   GitHub Pages deployment         │
                          └───────────────────────────────────┘

数据流

  1. 来源: doc.kml --从Mark O'Travel应用程序导出。包含具有访问状态的地点（国家和次地区）和联合国教科文组织世界遗产。

  2. 解析器: kml-parser.ts --将KML/XML解析为类型化的共享模块 Place[] 和 WorldHeritageSite[] 阵列。MCP服务器和地图生成器都使用。

  3. MCP服务器 (index.ts)--将旅行数据作为工具通过stdio公开：

    • get_visited_places --所有参观过的地方
    • get_places_by_status --按状态ID筛选
    • search_places --跨地点和联合国教科文组织网站的子字符串搜索
    • get_travel_stats --汇总统计

  4. 地图生成器 (generate-map.ts)--构建时脚本，该脚本：

    • 过滤195个联合国成员国（2个字母的ISO代码）
    • 对损坏的状态ID进行标准化（例如。， 916343000 → 传输）
    • 母国下的2600多个子地区
    • 输出一个自包含的 map.html 所有数据都内联

  5. 可视化 (map.html)--从CDN加载交互式传单地图（运行时无npm依赖）：

    • 按状态着色的国家多边形：绿色（已访问）、红色（已居住）、橙色（过境）、灰色（未访问）
    • 单击任何国家，在侧面板中查看子区域细分
    • 统计栏和图例

  6. 着陆页 (index.html)--通过iframe将地图嵌入到 明宇网，与GitHub Pages一起部署。

项目结构

mingyu.org/
├── index.html              # Landing page (GitHub Pages root)
└── mcp-servers/
    ├── doc.kml             # Travel data (Mark O'Travel export)
    ├── map.html            # Generated interactive map
    ├── package.json
    ├── tsconfig.json
    └── src/
        ├── types.ts        # StatusId enum, Place/WHC interfaces
        ├── kml-parser.ts   # KML → typed data parser
        ├── index.ts        # MCP server (stdio transport)
        └── generate-map.ts # Build script → map.html

用法

# Install dependencies
npm install

# Build TypeScript
npm run build

# Generate the interactive map
npm run generate-map    # → produces map.html

# Start MCP server (for Claude / MCP clients)
npm run start

状态图例

状态 颜色 ID
已访问 绿色 4
住在红色 1
过渡 橙色 5

技术栈

  • 运行时：Node.js、TypeScript（ES2022模块）
  • 主控程序: @modelcontextprotocol/sdk --stdio服务器传输
  • KML解析: fast-xml-parser
  • 地图：传单（CDN）、CARTO磁贴服务器、GeoJSON国家边界
  • 托管：GitHub页面

相关 MCP