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

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

✨ 功能特点

🗺️ 地图功能

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

🎮 交互控制

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

🎨 界面设计

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

🚀 快速开始

1. 安装依赖

npm install

2. 配置天地图API Key

重要：需要天地图API Key才能正常显示地图

编辑 src/config/tianditu.js：

export const TIANDITU_CONFIG = {
  API_KEY: '你的天地图API_KEY',  // 替换这里
  // ... 其他配置
}

获取API Key：

1. 访问 天地图开发者控制台
2. 注册并创建应用
3. 获取API Key

详细配置说明：TIANDITU_SETUP.md

3. 启动开发服务器

npm run dev

访问 http://localhost:5173

4. 构建生产版本

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%显示区域
• 摆动演示：分割线摆动动画效果

高级定制

详细的自定义配置和扩展功能请查看：

• 分屏功能使用指南
• 天地图配置指南

🎨 界面预览

普通地图模式

• 右上角图层切换按钮
• 支持矢量/影像地图切换

分屏对比模式

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

🔧 开发说明

核心文件

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

自定义开发

// 使用分屏管理器
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

📚 相关文档

• ArcGIS API for JavaScript
• ArcGIS Swipe Widget
• 天地图官网
• Vue 3 官方文档

📄 许可证

MIT License