# Vue 3 + ArcGIS + 天地图分屏对比项目

这是一个基于Vue 3和ArcGIS API for JavaScript的天地图分屏对比项目。项目实现了同时显示矢量地图和影像地图的分屏功能，支持多种交互和动画效果。

## ✨ 功能特点

### 🗺️ 地图功能
- ✅ 天地图矢量地图和影像地图加载
- ✅ 普通地图模式：支持图层切换
- ✅ **分屏对比模式**：同时显示两种地图类型
- ✅ 垂直/水平分割方向切换
- ✅ 可拖拽调整分割比例

### 🎮 交互控制
- ✅ 分割线位置实时显示
- ✅ 一键重置到中间位置
- ✅ 预设布局快速切换
- ✅ 平滑动画过渡效果
- ✅ 摆动演示动画

### 🎨 界面设计
- ✅ 响应式设计，适配移动端
- ✅ 现代化UI控件
- ✅ 实时状态显示
- ✅ 直观的操作反馈

## 🚀 快速开始

### 1. 安装依赖
```bash
npm install
```

### 2. 配置天地图API Key
**重要：需要天地图API Key才能正常显示地图**

编辑 `src/config/tianditu.js`：
```javascript
export const TIANDITU_CONFIG = {
  API_KEY: '你的天地图API_KEY',  // 替换这里
  // ... 其他配置
}
```

获取API Key：
1. 访问 [天地图开发者控制台](https://console.tianditu.gov.cn/)
2. 注册并创建应用
3. 获取API Key

详细配置说明：[TIANDITU_SETUP.md](./TIANDITU_SETUP.md)

### 3. 启动开发服务器
```bash
npm run dev
```

访问 http://localhost:5173

### 4. 构建生产版本
```bash
npm run build
```

## 📁 项目结构

```
geo/
├── src/
│   ├── components/
│   │   ├── TiandituMap.vue      # 普通天地图组件
│   │   ├── SplitScreenMap.vue   # 分屏对比组件
│   │   └── HelloWorld.vue       # 示例组件
│   ├── config/
│   │   └── tianditu.js          # 天地图配置
│   ├── utils/
│   │   └── splitScreen.js       # 分屏工具类 ⭐
│   ├── App.vue                  # 主应用（模式切换）
│   └── main.js                  # 应用入口
├── TIANDITU_SETUP.md           # 天地图配置指南
├── SPLIT_SCREEN_GUIDE.md       # 分屏功能使用指南 ⭐
├── vite.config.js              # Vite配置（ArcGIS支持）
└── package.json
```

## 🎯 核心功能说明

### 普通地图模式
- 矢量地图：道路、建筑、行政区划
- 影像地图：高清卫星影像
- 图层切换：右上角按钮切换

### 分屏对比模式 ⭐
- **同时显示**：左侧矢量，右侧影像（或上下分布）
- **实时对比**：相同区域不同图层的直观对比
- **交互同步**：缩放、平移操作同步到两个图层
- **分割线控制**：拖拽调整显示比例

### 高级功能
- **动画过渡**：平滑的位置变化动画
- **预设布局**：影像主导/矢量主导快速切换
- **摆动演示**：分割线摆动效果展示
- **实时反馈**：显示当前分割位置和方向

## 🛠️ 技术栈

- **前端框架**：Vue 3 (Composition API)
- **构建工具**：Vite
- **地图引擎**：ArcGIS API for JavaScript
- **地图服务**：天地图 (国家地理信息公共服务平台)
- **核心功能**：ArcGIS Swipe Widget

## 📖 使用指南

### 基础操作
1. 页面右上角切换"普通地图"/"分屏对比"
2. 分屏模式下，左上角控制面板进行操作
3. 拖拽分割线手动调整比例

### 控制面板功能
- **重置分割线**：动画回到50%中间位置
- **方向切换**：垂直分割 ↔ 水平分割
- **影像主导**：影像占70%显示区域
- **矢量主导**：矢量占70%显示区域
- **摆动演示**：分割线摆动动画效果

### 高级定制
详细的自定义配置和扩展功能请查看：
- [分屏功能使用指南](./SPLIT_SCREEN_GUIDE.md)
- [天地图配置指南](./TIANDITU_SETUP.md)

## 🎨 界面预览

### 普通地图模式
- 右上角图层切换按钮
- 支持矢量/影像地图切换

### 分屏对比模式
- 左上角功能丰富的控制面板
- 实时显示分割状态信息
- 多种预设布局和动画效果

## 🔧 开发说明

### 核心文件
- `splitScreen.js`：分屏功能核心工具类
- `SplitScreenMap.vue`：分屏地图组件
- `tianditu.js`：天地图服务配置

### 自定义开发
```javascript
// 使用分屏管理器
import { SplitScreenManager } from './utils/splitScreen.js'

const manager = new SplitScreenManager(view)
manager.createSwipe(leadingLayers, trailingLayers)

// 使用动画器
import { SplitScreenAnimator } from './utils/splitScreen.js'

const animator = new SplitScreenAnimator(manager)
await animator.animateToPosition(75, 1000)
```

## 🐛 常见问题

### Q: 地图显示空白？
A: 检查天地图API Key是否正确配置

### Q: 分屏功能不工作？
A: 确认ArcGIS API版本支持Swipe小部件

### Q: 动画效果卡顿？
A: 检查浏览器性能，可调整动画时长

详细问题解答请查看 [SPLIT_SCREEN_GUIDE.md](./SPLIT_SCREEN_GUIDE.md)

## 📚 相关文档

- [ArcGIS API for JavaScript](https://developers.arcgis.com/javascript/latest/)
- [ArcGIS Swipe Widget](https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-Swipe.html)
- [天地图官网](https://www.tianditu.gov.cn/)
- [Vue 3 官方文档](https://v3.vuejs.org/)

## 📄 许可证

MIT License