186 lines
5.2 KiB
Markdown
186 lines
5.2 KiB
Markdown
# 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 |