5.1 KiB

Raw Permalink Blame History

分屏地图使用指南

概述

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

功能特点

🎯 核心功能

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

🎮 交互控制

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

使用方法

1. 启动项目

npm run dev

2. 切换到分屏模式

在页面右上角点击"分屏对比"按钮

3. 控制面板操作

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

基础控制

重置分割线：将分割线动画回到中间位置（50%）
水平分割/垂直分割：切换分割方向

预设布局

影像主导：影像地图占70%，矢量地图占30%
矢量主导：矢量地图占70%，影像地图占30%

动画演示

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

4. 手动调节

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

技术实现

splitScreen.js 工具类

SplitScreenManager

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

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

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

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

// 切换方向
manager.toggleDirection()

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

SplitScreenAnimator

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

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秒

预设配置

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 中：

const isVertical = ref(false) // 改为false使用水平分割

修改默认分割位置

const currentPosition = ref(30) // 改为30%

添加新的预设

在 splitScreen.js 中添加：

export const SPLIT_PRESETS = {
  // 现有预设...
  
  // 新预设
  CUSTOM_LAYOUT: {
    direction: 'vertical',
    position: 25
  }
}

自定义动画效果

// 修改动画时长
await animator.animateToPosition(50, 2000) // 2秒动画

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

样式定制

分割线样式

在 SplitScreenMap.vue 的全局样式中：

:global(.esri-swipe__divider) {
  background-color: #ff0000 !important; /* 红色分割线 */
  width: 6px !important; /* 更粗的分割线 */
}

控制面板样式

修改 .control-panel 类的样式：

.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，然后在分屏组件中使用

扩展功能

三分屏对比

可以扩展为三个或更多地图的对比：

// 创建多个分屏小部件
const swipe1 = new Swipe({ /* 配置1 */ })
const swipe2 = new Swipe({ /* 配置2 */ })

时间轴对比

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

测量工具

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

图层透明度

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

5.1 KiB Raw Permalink Blame History Unescape Escape