物流路由地图展示项目

一个用于物流网络可视化的前端项目，包含两套展示页面：

1. 在线高德地图版：适合路由线路与站点联动展示
2. 离线 ECharts 版：适合本地演示和无外网场景

核心能力

在线高德地图（app/map.html）

1. 站点标注展示（冷链机构 / 大网分拨 / 仓链）
2. 分类筛选与数量统计
3. 路由搜索与高亮（按路由 ID、名称、温层、班次关键词）
4. 路由显示控制（显示全部、隐藏、仅直达）
5. 分拨中心辐射线模式（点击站点查看关联线路）
6. 路由信息卡片（温层、里程、T+、经停、清仓时间）
7. 地图视图控制（重置视图、适应全量标记）

离线 ECharts 地图（app/index.html）

1. 中国地图离线渲染（assets/china.json）
2. 点位分类显示（云冷 / 仓链 / 大网）
3. 按温层筛选路由
4. 选择单条路由显示线路动画
5. Tooltip 展示机构信息与关联班次

项目结构

map/
├── README.md
├── start-server.sh
├── start-server.ps1
├── failed.json
└── app/
    ├── map.html                 # 在线高德地图版入口
    ├── map-app.js               # 在线高德版交互逻辑
    ├── index.html               # 离线 ECharts 版入口
    ├── js/app.js                # 离线版交互逻辑
    ├── css/style.css
    ├── assets/
    │   ├── echarts.min.js
    │   └── china.json
    ├── data/
    │   ├── all-points.json      # 在线版主点位数据
    │   ├── points.json          # 离线版点位数据
    │   ├── routes.json          # 路由数据（两版共用）
    │   └── *.xlsx               # 原始业务数据
    ├── API_KEY_问题解决.md
    ├── process_all_data.py
    ├── merge_data.py
    ├── geocode_points.py
    ├── process_routes_enhanced.py
    ├── update_canglian_data.py
    ├── add_missing_stations.py
    ├── test_amap_key.py
    └── test_amap_signature.py

快速开始

环境要求

1. Python 3.9+
2. 现代浏览器（Chrome / Edge / Safari / Firefox）

启动本地服务

项目根目录已提供启动脚本，默认端口 8080：

# macOS / Linux
./start-server.sh

# Windows PowerShell
.\start-server.ps1

也可手动启动：

cd app
python3 -m http.server 8080

页面访问地址

1. 在线高德地图版：http://localhost:8080/map.html
2. 离线 ECharts 版：http://localhost:8080/index.html

注意：必须通过 http:// 访问，不能直接双击 HTML（file:// 会触发跨域限制）。

数据格式说明

点位数据（app/data/all-points.json）

[
  {
    "id": "佛山分拨中心",
    "name": "佛山分拨中心",
    "province": "广东省",
    "city": "佛山市",
    "lon": 113.1678,
    "lat": 23.0938,
    "category": "冷链机构"
  }
]

路由数据（app/data/routes.json）

[
  {
    "id": "广州-上海-0200-冷藏",
    "name": "广州-上海",
    "temp": "冷藏",
    "distance_km": 1600.0,
    "t_plus": "2日03:59",
    "legs": [
      {
        "trip": "广州-杭州-上海0200",
        "from": "广州分拨中心",
        "to": "上海分拨中心",
        "depart": "1日02:00",
        "arrive": "2日03:59",
        "clearance_time": "02:00:00"
      }
    ]
  }
]

数据处理脚本

在 app/ 目录下执行。

1. process_all_data.py：读取 Excel，地理编码并生成多份 points 文件
2. merge_data.py：合并分类点位到 all-points.json
3. process_routes_enhanced.py：处理路由数据
4. update_canglian_data.py：更新仓链数据
5. add_missing_stations.py：补充缺失站点

常见流程：

cd app
python3 process_all_data.py
python3 merge_data.py

高德 Key 配置说明

在线版依赖高德 JavaScript API 与地理编码 API。

1. app/map.html 中配置 JS API key 与 securityJsCode
2. Python 脚本中配置地理编码 AMAP_KEY 与 AMAP_SECRET
3. 推荐将密钥改为环境变量读取，避免硬编码进仓库

详细排查可参考：app/API_KEY_问题解决.md

常见问题

1. 地图空白或 API 报错
   检查高德 Key 是否开通 Web 端 JS API，并核对安全密钥。

2. 数据请求失败（404 / CORS）
   确认是通过本地 HTTP 服务启动，而不是 file:// 打开页面。

3. 路由线显示异常
   检查 routes.json 的 from/to 站点名是否能在点位数据中匹配到坐标。

后续建议

1. 增加“起终点输入 + 自动路径规划”模式（调用高德路径规划 API）
2. 增加路由维度筛选（温层、时效、距离区间、班次）
3. 增加数据校验脚本（站点缺失、重名、孤立路线）
4. 将 API Key 与业务配置迁移到 .env