# 中国山河图

**Repository Path**: wangyidao/china-geo-map

## Basic Information

- **Project Name**: 中国山河图
- **Description**: 中国山河图：开源地理信息项目，汇聚中国自然与人文地理数据，可视化呈现祖国山河风貌，助力国土研究与公众认知。
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-08-07
- **Last Updated**: 2026-08-14

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 中国河流与山脉 · 交互地图

在地图上展示中国主要河流与山脉：**同河同色、支流近色**，标注发源地 / 流经地 / 入海口，
阴阳地名（山南水北为阳）、丰枯水期流量、水利工程、人工河道、湖泊，以及海拔分层设色与等高线。

## 架构

- **Vite + 原生 JS**，数据/逻辑沿用 `window.CGM` 全局模块，最小改动。
- **地图适配层**（`src/map/`）：统一接口，两种实现可切换：
  - `SvgAdapter`（**默认·离线**）：自绘简化中国轮廓 + 经纬网格，纯前端、零密钥，可离线运行。
  - `TmapAdapter`（**在线增强**）：配置 `VITE_MAP_KEY` 后启用腾讯 GL JS 真实底图。
- 关键修复：面板 / 图例**先于地图初始化**绑定；地图初始化包 `try/catch`，地图失败也不影响任何按钮。

## 本地运行

```bash
npm install
npm run dev        # 开发预览 http://localhost:5173
```

默认即离线示意底图，无需任何密钥，直接可用。

## 1) 部署为网站

```bash
npm run build      # 产物在 dist/（相对路径，可放任意子目录）
```

将 `dist/` 整体上传到任意静态托管（GitHub Pages / Netlify / Vercel / Nginx / OSS…）即可。
需要真实底图时：复制 `.env.example` 为 `.env`，设 `VITE_MAP_PROVIDER=tmap` 与 `VITE_MAP_KEY=你的腾讯Key`，再 `npm run build`。

## 2) 打包 Android APK（Capacitor）

```bash
npm install
npm run build
npm run cap:init   # 首次：npx cap add android（会生成 android/ 原生工程）
npm run android    # 同步并构建 APK（或 npx cap open android 用 Android Studio 出包）
```

> 离线模式下 APK 完全离线可用；联网模式下需配置 `VITE_MAP_KEY`。

## 3) 打包 Windows EXE（Electron）

```bash
npm install
npm run electron:build   # 生成 release/ 下的 NSIS 安装包（需本机有 Electron 构建环境）
# 或仅本地运行预览：
npm run electron:dev
```

> `electron` / `electron-builder` 体积较大，首次安装会下载对应二进制。

## 目录结构

```
china-geo-map/
  index.html             Vite 入口
  package.json          脚本与依赖
  vite.config.mjs        base:'./'
  .env.example           底图模式 / Key
  capacitor.config.ts    APK 配置
  electron/main.js       EXE 主进程
  electron-builder.yml   EXE 打包
  src/
    main.js              启动编排（先面板后地图）
    config.js color.js icons.js popup.js layer-manager.js
    map/  projection / china-outline / adapter / svg-adapter / tmap-adapter
    layers/  rivers / water / mountains / cities / terrain
    data/   meta rivers lakes hydro-projects mountains terrain cities
    css/style.css
```

## 说明

河流、山脉、湖泊、城市与国界均为**示意性手绘**，精度以教学示意为准；精确国界以国家标准地图为准。