# super_map

**Repository Path**: cm0943/super_map

## Basic Information

- **Project Name**: super_map
- **Description**: 基于vue3，ts，vite，高德地图，实现的多功能地图组件
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: leaflet
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 1
- **Created**: 2025-09-02
- **Last Updated**: 2025-09-02

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Super Map 互动地图演示项目

在线 demo: http://117.72.71.157/

## 技术架构

- **前端框架**：Vue 3 + Vite
- **地图引擎**：Leaflet
- **空间计算**：turf.js
- **轨迹动画**：leaflet-trackplayer
- **UI 组件**：Element Plus

## 主要功能

- 地图多图层切换（矢量、卫星、天地图）
- 地图拾点、用户输入坐标批量标点
- 地图画线、用户输入坐标画线
- 地图手动画多边形、用户输入坐标绘制多边形
- 线段长度、多边形面积计算（turf.js）
- 点/线/面点击弹窗展示经纬度、长度/面积及结构化地址（高德 API）
- 结构化地址查询（高德逆地理编码）
- 线段轨迹播放（leaflet-trackplayer，自定义图标）
- 轨迹播放状态管理、清除轨迹
- 交互友好的工具箱面板

## 本地运行流程

1. **克隆项目**
   ```bash
   git clone <本项目地址>
   cd super_map
   ```
2. **安装依赖**
   ```bash
   npm install
   ```
3. **配置密钥**
   - 复制 `.env.example` 为 `.env`：
     ```bash
     cp .env.example .env
     ```
   - 填写你自己的高德地图（VITE_AMAP_KEY）和天地图（VITE_TD_KEY）密钥。
   - 密钥获取方式请参考各平台官方文档。
4. **启动项目**
   ```bash
   npm run dev
   ```
   默认访问地址：http://localhost:5173

## 注意事项

- **密钥安全**：请勿将 `.env` 文件提交到 git，密钥仅供本地开发使用。
- **API 配额**：高德/天地图 API 有调用配额限制，建议申请自己的开发者密钥。
- **浏览器兼容性**：推荐使用最新版 Chrome/Edge。
- **地图服务可用性**：如遇地图加载异常，请检查网络和密钥有效性。

## 相关依赖

- [Vue 3](https://vuejs.org/)
- [Vite](https://vitejs.dev/)
- [Leaflet](https://leafletjs.com/)
- [turf.js](https://turfjs.org/)
- [leaflet-trackplayer](https://github.com/ioslh/leaflet-trackplayer)
- [Element Plus](https://element-plus.org/)

---

如需二次开发或功能扩展，欢迎提 issue 或 PR。