# 分屏地图使用指南

## 概述

本项目实现了基于ArcGIS API for JavaScript的分屏地图功能，可以同时显示天地图的矢量地图和影像地图，支持多种交互和动画效果。

## 功能特点

### 🎯 核心功能
- **分屏对比**：同时显示矢量地图和影像地图
- **方向切换**：支持垂直分割和水平分割
- **位置调节**：可拖拽分割线调整显示比例
- **动画效果**：平滑的过渡动画和演示效果

### 🎮 交互控制
- **重置分割线**：一键回到50%中间位置
- **方向切换**：在垂直和水平分割间切换
- **预设布局**：快速切换到预定义布局
- **动画演示**：摆动效果展示分屏功能

## 使用方法

### 1. 启动项目
```bash
npm run dev
```

### 2. 切换到分屏模式
在页面右上角点击"分屏对比"按钮

### 3. 控制面板操作
分屏模式下，左上角会显示控制面板，包含以下功能：

#### 基础控制
- **重置分割线**：将分割线动画回到中间位置（50%）
- **水平分割/垂直分割**：切换分割方向

#### 预设布局
- **影像主导**：影像地图占70%，矢量地图占30%
- **矢量主导**：矢量地图占70%，影像地图占30%

#### 动画演示
- **摆动演示**：分割线摆动动画，展示分屏效果

### 4. 手动调节
- 拖拽分割线可以手动调整两种地图的显示比例
- 实时显示当前分割位置百分比

## 技术实现

### splitScreen.js 工具类

#### SplitScreenManager
分屏管理器，负责创建和管理分屏小部件：

```javascript
import { SplitScreenManager } from './utils/splitScreen.js'

// 创建管理器
const manager = new SplitScreenManager(view)

// 创建分屏
manager.createSwipe(leadingLayers, trailingLayers, options)

// 切换方向
manager.toggleDirection()

// 设置位置
manager.setPosition(75) // 75%
```

#### SplitScreenAnimator
动画控制器，提供平滑的动画效果：

```javascript
import { SplitScreenAnimator } from './utils/splitScreen.js'

// 创建动画器
const animator = new SplitScreenAnimator(manager)

// 动画到指定位置
await animator.animateToPosition(75, 1000) // 1秒动画到75%

// 摆动动画
await animator.wiggle(15, 3, 2000) // 摆动幅度15，3个周期，2秒
```

#### 预设配置
```javascript
import { SPLIT_PRESETS } from './utils/splitScreen.js'

// 可用预设
SPLIT_PRESETS.VERTICAL_SATELLITE_RIGHT    // 垂直分割，影像在右
SPLIT_PRESETS.HORIZONTAL_SATELLITE_BOTTOM // 水平分割，影像在下
SPLIT_PRESETS.SATELLITE_DOMINANT          // 影像占主导（70%）
SPLIT_PRESETS.VECTOR_DOMINANT             // 矢量占主导（70%）
```

## 自定义配置

### 修改默认分割方向
在 `SplitScreenMap.vue` 中：
```javascript
const isVertical = ref(false) // 改为false使用水平分割
```

### 修改默认分割位置
```javascript
const currentPosition = ref(30) // 改为30%
```

### 添加新的预设
在 `splitScreen.js` 中添加：
```javascript
export const SPLIT_PRESETS = {
  // 现有预设...
  
  // 新预设
  CUSTOM_LAYOUT: {
    direction: 'vertical',
    position: 25
  }
}
```

### 自定义动画效果
```javascript
// 修改动画时长
await animator.animateToPosition(50, 2000) // 2秒动画

// 修改摆动参数
await animator.wiggle(20, 4, 3000) // 摆动幅度20，4个周期，3秒
```

## 样式定制

### 分割线样式
在 `SplitScreenMap.vue` 的全局样式中：
```css
:global(.esri-swipe__divider) {
  background-color: #ff0000 !important; /* 红色分割线 */
  width: 6px !important; /* 更粗的分割线 */
}
```

### 控制面板样式
修改 `.control-panel` 类的样式：
```css
.control-panel {
  background: rgba(0, 0, 0, 0.8); /* 深色背景 */
  color: white;
  /* 其他样式... */
}
```

## 性能优化

### 图层管理
- 分屏时只加载必要的图层
- 避免重复创建相同的图层
- 及时销毁不需要的小部件

### 动画优化
- 使用 `requestAnimationFrame` 确保流畅动画
- 缓动函数提供自然的动画效果
- 避免在动画过程中创建新的分屏小部件

## 常见问题

### Q: 分屏功能不显示？
A: 检查ArcGIS API版本，确保支持Swipe小部件

### Q: 动画卡顿？
A: 检查浏览器性能，降低动画复杂度或时长

### Q: 自定义样式不生效？
A: 使用 `:global()` 选择器覆盖ArcGIS默认样式

### Q: 如何添加更多地图类型？
A: 在天地图配置中添加新的服务URL，然后在分屏组件中使用

## 扩展功能

### 三分屏对比
可以扩展为三个或更多地图的对比：
```javascript
// 创建多个分屏小部件
const swipe1 = new Swipe({ /* 配置1 */ })
const swipe2 = new Swipe({ /* 配置2 */ })
```

### 时间轴对比
结合时间滑块，对比不同时间的地图数据

### 测量工具
在分屏模式下添加距离和面积测量功能

### 图层透明度
添加图层透明度控制，实现更细致的对比效果

## 相关资源

- [ArcGIS Swipe Widget 文档](https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-Swipe.html)
- [天地图API文档](https://lbs.tianditu.gov.cn/server/MapService.html)
- [Vue 3 Composition API](https://v3.vuejs.org/guide/composition-api-introduction.html)