当前位置：首页 > news >正文

OpenLayers地图交互 -- 章节十六：双击缩放交互详解

news 2025/9/29 8:11:52

前言

在前面的章节中，我们学习了OpenLayers中绘制交互、选择交互、修改交互、捕捉交互、范围交互、指针交互、拖拽平移交互、键盘平移交互、拖拽旋转交互、拖拽缩放交互和鼠标滚轮缩放交互等核心地图交互技术。本文将深入探讨OpenLayers中双击缩放交互（DoubleClickZoomInteraction）的应用技术，这是WebGIS开发中一项经典且实用的地图导航功能。双击缩放交互允许用户通过双击地图的方式快速放大到指定位置，为用户提供了简单直观的地图缩放体验，特别适合快速定位和详细查看特定区域的应用场景。通过一个完整的示例，我们将详细解析双击缩放交互的创建、配置和优化等关键技术。

项目结构分析

模板结构

<template><!--地图挂载dom--><div id="map"></div>
</template>

模板结构详解：

极简设计: 采用最简洁的模板结构，专注于双击缩放交互功能的核心演示
地图容器: id="map" 作为地图的唯一挂载点，全屏显示地图内容
纯交互体验: 通过双击直接控制地图缩放和定位，不需要额外的UI控件
专注核心功能: 突出双击缩放作为地图快速导航的重要性

依赖引入详解

import {Map, View} from 'ol'
import {OSM} from 'ol/source';
import {Tile as TileLayer} from 'ol/layer';
import {defaults as defaultInteractions, DoubleClickZoom} from 'ol/interaction';

依赖说明：

Map, View: OpenLayers的核心类，Map负责地图实例管理，View控制地图视图参数
DoubleClickZoom: 双击缩放交互类，提供双击控制地图缩放功能（本文重点）
defaultInteractions: 默认交互集合，可以统一配置双击缩放交互的启用状态
OSM: OpenStreetMap数据源，提供免费的基础地图服务
TileLayer: 瓦片图层类，用于显示栅格地图数据

属性说明表格

1. 依赖引入属性说明

属性名称	类型	说明	用途
Map	Class	地图核心类	创建和管理地图实例
View	Class	地图视图类	控制地图显示范围、投影、缩放和中心点
DoubleClickZoom	Class	双击缩放交互类	提供双击控制地图缩放功能
defaultInteractions	Function	默认交互工厂函数	统一配置默认交互集合
OSM	Source	OpenStreetMap数据源	提供基础地图瓦片服务
TileLayer	Layer	瓦片图层类	显示栅格瓦片数据

2. 双击缩放交互配置属性说明

属性名称	类型	默认值	说明
duration	Number	250	缩放动画持续时间（毫秒）
delta	Number	1	缩放增量（缩放级别变化量）

3. 双击缩放行为说明

操作方式	缩放效果	中心点变化	说明
普通双击	放大delta级别	移动到双击位置	标准放大操作
Shift+双击	缩小delta级别	移动到双击位置	缩小操作（部分浏览器支持）

4. 默认交互配置说明

配置项	类型	默认值	说明
doubleClickZoom	Boolean	true	是否启用双击缩放
mouseWheelZoom	Boolean	true	是否启用滚轮缩放
shiftDragZoom	Boolean	true	是否启用Shift+拖拽缩放
dragPan	Boolean	true	是否启用拖拽平移

5. 动画配置选项说明

动画时长	用户体验	适用场景	推荐值
100-300ms	快速响应	频繁操作场景	250ms
500-800ms	平滑过渡	演示展示场景	600ms
1000ms+	慢速动画	教学培训场景	1000ms

核心代码详解

1. 数据属性初始化

data() {return {}
}

属性详解：

简化数据结构: 双击缩放交互作为基础功能，状态管理由OpenLayers内部处理
内置状态管理: 双击检测和缩放状态完全由OpenLayers内部管理，包括双击时间间隔判断和动画处理
专注交互体验: 重点关注双击操作的响应性和动画效果

2. 地图基础配置

// 初始化地图
this.map = new Map({target: 'map',                  // 指定挂载dom，注意必须是idinteractions: defaultInteractions({doubleClickZoom: false,     // 是否需要鼠标滚轮缩放}),layers: [new TileLayer({source: new OSM()       // 加载OpenStreetMap}),],view: new View({center: [113.24981689453125, 23.126468438108688], // 视图中心位置projection: "EPSG:4326",    // 指定投影zoom: 12                    // 缩放到的级别})
});

地图配置详解：

挂载配置: 指定DOM元素ID，确保地图正确渲染
交互配置:

- doubleClickZoom: false: 禁用默认的双击缩放功能
- 为自定义双击缩放交互让路，避免冲突

图层配置: 使用OSM作为基础底图，提供地理参考背景
视图配置:

- 中心点：广州地区坐标，适合演示双击缩放
- 投影系统：WGS84地理坐标系，通用性强
- 缩放级别：12级，城市级别视野，适合缩放操作

3. 双击缩放交互创建

// 使用双击地图
let doubleClickZoom = new DoubleClickZoom({duration: 1000,                 // 双击缩放的动画时间delta: 5                        // 缩放增量
});
this.map.addInteraction(doubleClickZoom);

双击缩放配置详解：

动画时长:

- duration: 1000: 设置为1秒的动画时间
- 提供平滑的视觉过渡效果
- 适合演示和教学场景

缩放增量:

- delta: 5: 每次双击放大5个缩放级别
- 比默认的1级别变化更明显
- 适合快速到达详细视图

交互特点:

- 提供快速的定位缩放功能
- 支持以双击位置为中心的缩放
- 动画效果流畅自然

4. 完整的双击缩放实现

mounted() {// 初始化地图this.map = new Map({target: 'map',interactions: defaultInteractions({doubleClickZoom: false,  // 禁用默认双击缩放}),layers: [new TileLayer({source: new OSM()}),],view: new View({center: [113.24981689453125, 23.126468438108688],projection: "EPSG:4326",zoom: 12})});// 创建自定义双击缩放交互let doubleClickZoom = new DoubleClickZoom({duration: 1000,              // 动画持续时间delta: 5                     // 缩放增量});this.map.addInteraction(doubleClickZoom);// 监听缩放事件this.map.getView().on('change:resolution', () => {const zoom = this.map.getView().getZoom();console.log('当前缩放级别:', zoom.toFixed(2));});// 监听双击事件（用于调试）this.map.on('dblclick', (event) => {const coordinate = event.coordinate;console.log('双击位置:', coordinate);});
}

应用场景代码演示

1. 智能双击缩放系统

// 智能双击缩放管理器
class SmartDoubleClickZoomSystem {constructor(map) {this.map = map;this.zoomSettings = {enableSmartZoom: true,      // 启用智能缩放adaptiveDelta: true,        // 自适应缩放增量contextAwareZoom: true,     // 上下文感知缩放showZoomFeedback: true,     // 显示缩放反馈enableZoomLimits: true,     // 启用缩放限制recordZoomHistory: true     // 记录缩放历史};this.zoomHistory = [];this.clickHistory = [];this.currentContext = 'normal';this.setupSmartDoubleClickZoom();}// 设置智能双击缩放setupSmartDoubleClickZoom() {this.createSmartZoomModes();this.createZoomIndicator();this.bindDoubleClickEvents();this.createZoomUI();this.setupContextDetection();}// 创建智能缩放模式createSmartZoomModes() {// 标准模式：正常双击缩放this.standardZoom = new ol.interaction.DoubleClickZoom({duration: 500,delta: 2});// 快速模式：大幅度缩放this.fastZoom = new ol.interaction.DoubleClickZoom({duration: 300,delta: 4});// 精确模式：小幅度缩放this.preciseZoom = new ol.interaction.DoubleClickZoom({duration: 800,delta: 1});// 动态模式：根据上下文调整this.dynamicZoom = new ol.interaction.DoubleClickZoom({duration: 400,delta: this.calculateDynamicDelta()});// 默认启用标准模式this.map.addInteraction(this.standardZoom);this.currentMode = 'standard';}// 计算动态缩放增量calculateDynamicDelta() {const currentZoom = this.map.getView().getZoom();// 根据当前缩放级别调整增量if (currentZoom < 5) {return 3; // 低级别时大幅缩放} else if (currentZoom < 12) {return 2; // 中级别时中等缩放} else {return 1; // 高级别时小幅缩放}}// 创建缩放指示器createZoomIndicator() {if (!this.zoomSettings.showZoomFeedback) return;this.zoomIndicator = document.createElement('div');this.zoomIndicator.className = 'doubleclick-zoom-indicator';this.zoomIndicator.innerHTML = `<div class="zoom-feedback"><div class="zoom-animation" id="zoomAnimation"><div class="zoom-ripple"></div><div class="zoom-icon">⚡</div></div><div class="zoom-info" id="zoomInfo"><span class="zoom-from" id="zoomFrom">12</span><span class="zoom-arrow">→</span><span class="zoom-to" id="zoomTo">17</span></div></div>`;this.zoomIndicator.style.cssText = `position: absolute;top: 0;left: 0;width: 100%;height: 100%;pointer-events: none;z-index: 1000;display: none;`;// 添加指示器样式this.addZoomIndicatorStyles();// 添加到地图容器this.map.getTargetElement().appendChild(this.zoomIndicator);}// 添加缩放指示器样式addZoomIndicatorStyles() {const style = document.createElement('style');style.textContent = `.doubleclick-zoom-indicator .zoom-feedback {position: absolute;transform: translate(-50%, -50%);}.doubleclick-zoom-indicator .zoom-animation {position: relative;width: 60px;height: 60px;display: flex;align-items: center;justify-content: center;}.doubleclick-zoom-indicator .zoom-ripple {position: absolute;width: 100%;height: 100%;border: 3px solid #4CAF50;border-radius: 50%;background: rgba(76, 175, 80, 0.1);animation: doubleClickRipple 0.8s ease-out;}.doubleclick-zoom-indicator .zoom-icon {font-size: 24px;color: #4CAF50;z-index: 1;animation: doubleClickPulse 0.6s ease-out;}.doubleclick-zoom-indicator .zoom-info {position: absolute;top: 70px;left: 50%;transform: translateX(-50%);background: rgba(76, 175, 80, 0.9);color: white;padding: 5px 10px;border-radius: 15px;font-size: 12px;white-space: nowrap;animation: doubleClickSlideUp 0.5s ease-out;}.doubleclick-zoom-indicator .zoom-arrow {margin: 0 5px;}@keyframes doubleClickRipple {0% {transform: scale(0.3);opacity: 1;}100% {transform: scale(1.5);opacity: 0;}}@keyframes doubleClickPulse {0% {transform: scale(0.5);}50% {transform: scale(1.3);}100% {transform: scale(1);}}@keyframes doubleClickSlideUp {0% {transform: translateX(-50%) translateY(20px);opacity: 0;}100% {transform: translateX(-50%) translateY(0);opacity: 1;}}`;document.head.appendChild(style);}// 绑定双击事件bindDoubleClickEvents() {// 监听双击事件this.map.on('dblclick', (event) => {this.handleDoubleClick(event);});// 监听缩放开始this.map.on('movestart', () => {this.onZoomStart();});// 监听缩放结束this.map.on('moveend', () => {this.onZoomEnd();});// 监听单击事件（用于检测双击模式）this.map.on('singleclick', (event) => {this.recordClick(event);});}// 处理双击事件handleDoubleClick(event) {const coordinate = event.coordinate;const pixel = event.pixel;// 记录双击信息this.recordDoubleClick(coordinate);// 显示缩放反馈this.showZoomFeedback(pixel);// 检测上下文this.detectZoomContext(coordinate);// 应用自适应缩放if (this.zoomSettings.adaptiveDelta) {this.applyAdaptiveZoom(coordinate);}}// 记录双击信息recordDoubleClick(coordinate) {const doubleClickInfo = {coordinate: coordinate,timestamp: Date.now(),zoomBefore: this.map.getView().getZoom(),context: this.currentContext};this.zoomHistory.push(doubleClickInfo);// 限制历史长度if (this.zoomHistory.length > 20) {this.zoomHistory.shift();}}// 记录单击事件recordClick(event) {this.clickHistory.push({coordinate: event.coordinate,timestamp: Date.now()});// 限制历史长度if (this.clickHistory.length > 10) {this.clickHistory.shift();}}// 显示缩放反馈showZoomFeedback(pixel) {if (!this.zoomSettings.showZoomFeedback) return;const feedback = this.zoomIndicator.querySelector('.zoom-feedback');const zoomFrom = document.getElementById('zoomFrom');const zoomTo = document.getElementById('zoomTo');const currentZoom = Math.round(this.map.getView().getZoom());const targetZoom = currentZoom + this.calculateCurrentDelta();if (zoomFrom) zoomFrom.textContent = currentZoom;if (zoomTo) zoomTo.textContent = targetZoom;// 设置位置feedback.style.left = `${pixel[0]}px`;feedback.style.top = `${pixel[1]}px`;// 显示反馈this.zoomIndicator.style.display = 'block';// 重新触发动画const animation = document.getElementById('zoomAnimation');if (animation) {animation.style.animation = 'none';requestAnimationFrame(() => {animation.style.animation = '';});}// 隐藏反馈setTimeout(() => {this.zoomIndicator.style.display = 'none';}, 1000);}// 计算当前缩放增量calculateCurrentDelta() {switch (this.currentMode) {case 'fast':return 4;case 'precise':return 1;case 'dynamic':return this.calculateDynamicDelta();default:return 2;}}// 检测缩放上下文detectZoomContext(coordinate) {// 检测是否在特殊区域（如建筑物、水体等）// 这里可以根据坐标查询相关的地理信息const features = this.map.getFeaturesAtPixel(this.map.getPixelFromCoordinate(coordinate));if (features && features.length > 0) {this.currentContext = 'feature';} else {this.currentContext = 'normal';}}// 应用自适应缩放applyAdaptiveZoom(coordinate) {// 根据上下文调整缩放行为if (this.currentContext === 'feature') {// 在要素上双击，使用精确缩放this.switchToMode('precise');} else {// 在空白区域双击，使用标准缩放this.switchToMode('standard');}}// 切换缩放模式switchToMode(mode) {if (this.currentMode === mode) return;// 移除当前模式this.removeCurrentMode();// 添加新模式switch (mode) {case 'standard':this.map.addInteraction(this.standardZoom);break;case 'fast':this.map.addInteraction(this.fastZoom);break;case 'precise':this.map.addInteraction(this.preciseZoom);break;case 'dynamic':// 更新动态增量this.dynamicZoom.setDelta(this.calculateDynamicDelta());this.map.addInteraction(this.dynamicZoom);break;}this.currentMode = mode;this.updateModeDisplay();}// 移除当前模式removeCurrentMode() {const interactions = [this.standardZoom, this.fastZoom, this.preciseZoom, this.dynamicZoom];interactions.forEach(interaction => {this.map.removeInteraction(interaction);});}// 更新模式显示updateModeDisplay() {const modeDisplay = document.getElementById('currentMode');if (modeDisplay) {const modeNames = {'standard': '标准模式','fast': '快速模式','precise': '精确模式','dynamic': '动态模式'};modeDisplay.textContent = modeNames[this.currentMode] || '未知模式';}}// 缩放开始处理onZoomStart() {// 记录缩放开始信息this.zoomStartInfo = {zoom: this.map.getView().getZoom(),time: Date.now()};}// 缩放结束处理onZoomEnd() {// 计算缩放统计if (this.zoomStartInfo) {const zoomStats = this.calculateZoomStatistics();this.updateZoomStatistics(zoomStats);}}// 计算缩放统计calculateZoomStatistics() {const currentZoom = this.map.getView().getZoom();const zoomDelta = currentZoom - this.zoomStartInfo.zoom;const duration = Date.now() - this.zoomStartInfo.time;return {zoomDelta: zoomDelta,duration: duration,mode: this.currentMode,context: this.currentContext};}// 更新缩放统计updateZoomStatistics(stats) {console.log('双击缩放统计:', stats);}// 设置上下文检测setupContextDetection() {// 可以在这里添加更复杂的上下文检测逻辑// 比如根据地图层级、要素类型等进行判断}// 创建缩放控制UIcreateZoomUI() {const panel = document.createElement('div');panel.className = 'doubleclick-zoom-panel';panel.innerHTML = `<div class="panel-header">双击缩放控制</div><div class="current-mode">当前模式: <span id="currentMode">标准模式</span></div><div class="zoom-modes"><h4>缩放模式:</h4><div class="mode-buttons"><button id="standardMode" class="mode-btn active">标准</button><button id="fastMode" class="mode-btn">快速</button><button id="preciseMode" class="mode-btn">精确</button><button id="dynamicMode" class="mode-btn">动态</button></div></div><div class="zoom-settings"><label><input type="checkbox" id="enableSmartZoom" checked> 启用智能缩放</label><label><input type="checkbox" id="adaptiveDelta" checked> 自适应增量</label><label><input type="checkbox" id="showZoomFeedback" checked> 显示缩放反馈</label><label><input type="checkbox" id="contextAwareZoom" checked> 上下文感知</label></div><div class="zoom-stats"><h4>缩放统计:</h4><div class="stats-info"><p>双击次数: <span id="doubleClickCount">0</span></p><p>平均增量: <span id="averageDelta">0</span></p><p>最常用模式: <span id="mostUsedMode">--</span></p></div></div><div class="zoom-actions"><button id="resetZoomStats">重置统计</button><button id="exportZoomHistory">导出历史</button></div>`;panel.style.cssText = `position: fixed;top: 20px;left: 20px;background: white;border: 1px solid #ccc;border-radius: 4px;padding: 15px;box-shadow: 0 2px 10px rgba(0,0,0,0.1);z-index: 1000;max-width: 280px;font-size: 12px;`;document.body.appendChild(panel);// 绑定控制事件this.bindZoomControls(panel);// 初始更新统计this.updateZoomStatistics();}// 绑定缩放控制事件bindZoomControls(panel) {// 模式按钮panel.querySelector('#standardMode').addEventListener('click', () => {this.switchToMode('standard');this.updateModeButtons('standardMode');});panel.querySelector('#fastMode').addEventListener('click', () => {this.switchToMode('fast');this.updateModeButtons('fastMode');});panel.querySelector('#preciseMode').addEventListener('click', () => {this.switchToMode('precise');this.updateModeButtons('preciseMode');});panel.querySelector('#dynamicMode').addEventListener('click', () => {this.switchToMode('dynamic');this.updateModeButtons('dynamicMode');});// 设置项panel.querySelector('#enableSmartZoom').addEventListener('change', (e) => {this.zoomSettings.enableSmartZoom = e.target.checked;});panel.querySelector('#adaptiveDelta').addEventListener('change', (e) => {this.zoomSettings.adaptiveDelta = e.target.checked;});panel.querySelector('#showZoomFeedback').addEventListener('change', (e) => {this.zoomSettings.showZoomFeedback = e.target.checked;});panel.querySelector('#contextAwareZoom').addEventListener('change', (e) => {this.zoomSettings.contextAwareZoom = e.target.checked;});// 动作按钮panel.querySelector('#resetZoomStats').addEventListener('click', () => {this.resetZoomStatistics();});panel.querySelector('#exportZoomHistory').addEventListener('click', () => {this.exportZoomHistory();});}// 更新模式按钮updateModeButtons(activeButtonId) {const buttons = document.querySelectorAll('.mode-btn');buttons.forEach(btn => btn.classList.remove('active'));const activeButton = document.getElementById(activeButtonId);if (activeButton) {activeButton.classList.add('active');}}// 重置缩放统计resetZoomStatistics() {if (confirm('确定要重置缩放统计吗？')) {this.zoomHistory = [];this.updateZoomStatistics();}}// 导出缩放历史exportZoomHistory() {if (this.zoomHistory.length === 0) {alert('暂无缩放历史可导出');return;}const data = {exportTime: new Date().toISOString(),zoomHistory: this.zoomHistory,settings: this.zoomSettings};const blob = new Blob([JSON.stringify(data, null, 2)], {type: 'application/json'});const url = URL.createObjectURL(blob);const a = document.createElement('a');a.href = url;a.download = `doubleclick_zoom_history_${new Date().toISOString().slice(0, 10)}.json`;a.click();URL.revokeObjectURL(url);}// 更新缩放统计显示updateZoomStatistics() {const doubleClickCount = document.getElementById('doubleClickCount');const averageDelta = document.getElementById('averageDelta');const mostUsedMode = document.getElementById('mostUsedMode');if (doubleClickCount) {doubleClickCount.textContent = this.zoomHistory.length;}if (averageDelta && this.zoomHistory.length > 0) {const totalDelta = this.zoomHistory.reduce((sum, item) => {return sum + (item.zoomAfter - item.zoomBefore || 0);}, 0);const avgDelta = totalDelta / this.zoomHistory.length;averageDelta.textContent = avgDelta.toFixed(2);}if (mostUsedMode && this.zoomHistory.length > 0) {const modeCount = {};this.zoomHistory.forEach(item => {modeCount[item.context] = (modeCount[item.context] || 0) + 1;});const mostUsed = Object.keys(modeCount).reduce((a, b) => modeCount[a] > modeCount[b] ? a : b);mostUsedMode.textContent = mostUsed || '--';}}
}// 使用智能双击缩放系统
const smartDoubleClickZoom = new SmartDoubleClickZoomSystem(map);

2. 双击缩放增强系统

// 双击缩放增强系统
class DoubleClickZoomEnhancementSystem {constructor(map) {this.map = map;this.enhancementSettings = {enableMultiLevelZoom: true,     // 启用多级缩放enableZoomToFeature: true,      // 启用缩放到要素enableSmartCenter: true,        // 启用智能居中enableZoomAnimation: true,      // 启用缩放动画enableZoomSound: false,         // 启用缩放音效enableHapticFeedback: false     // 启用触觉反馈};this.zoomLevels = [1, 3, 6, 9, 12, 15, 18, 20];this.currentLevelIndex = 4; // 默认从级别12开始this.setupDoubleClickEnhancements();}// 设置双击缩放增强setupDoubleClickEnhancements() {this.createEnhancedDoubleClick();this.setupMultiLevelZoom();this.setupFeatureZoom();this.setupSmartCenter();this.setupZoomAnimation();this.createEnhancementUI();}// 创建增强双击处理createEnhancedDoubleClick() {// 禁用默认双击缩放const defaultDoubleClick = this.map.getInteractions().getArray().find(interaction => interaction instanceof ol.interaction.DoubleClickZoom);if (defaultDoubleClick) {this.map.removeInteraction(defaultDoubleClick);}// 创建自定义双击处理this.map.on('dblclick', (event) => {this.handleEnhancedDoubleClick(event);});}// 处理增强双击事件handleEnhancedDoubleClick(event) {event.preventDefault();const coordinate = event.coordinate;const pixel = event.pixel;// 检测双击目标const target = this.detectDoubleClickTarget(pixel);// 根据目标类型选择缩放策略switch (target.type) {case 'feature':this.zoomToFeature(target.feature, coordinate);break;case 'empty':this.performMultiLevelZoom(coordinate);break;case 'cluster':this.zoomToCluster(target.cluster, coordinate);break;default:this.performStandardZoom(coordinate);break;}// 提供反馈this.provideFeedback(target.type, coordinate);}// 检测双击目标detectDoubleClickTarget(pixel) {const features = this.map.getFeaturesAtPixel(pixel);if (features && features.length > 0) {const feature = features[0];// 检查是否为聚合要素if (feature.get('features') && feature.get('features').length > 1) {return {type: 'cluster',cluster: feature,count: feature.get('features').length};} else {return {type: 'feature',feature: feature};}}return {type: 'empty'};}// 缩放到要素zoomToFeature(feature, coordinate) {if (!this.enhancementSettings.enableZoomToFeature) {this.performStandardZoom(coordinate);return;}const geometry = feature.getGeometry();if (geometry) {const extent = geometry.getExtent();// 计算合适的缩放级别const targetZoom = this.calculateOptimalZoomForExtent(extent);// 执行缩放this.map.getView().fit(extent, {duration: 800,maxZoom: targetZoom,padding: [50, 50, 50, 50]});// 显示要素信息this.showFeatureInfo(feature, coordinate);} else {this.performStandardZoom(coordinate);}}// 缩放到聚合zoomToCluster(cluster, coordinate) {const features = cluster.get('features');if (features && features.length > 1) {// 计算所有要素的范围const extent = new ol.extent.createEmpty();features.forEach(feature => {ol.extent.extend(extent, feature.getGeometry().getExtent());});// 缩放到聚合范围this.map.getView().fit(extent, {duration: 1000,padding: [100, 100, 100, 100]});// 显示聚合信息this.showClusterInfo(cluster, coordinate);} else {this.performStandardZoom(coordinate);}}// 执行多级缩放performMultiLevelZoom(coordinate) {if (!this.enhancementSettings.enableMultiLevelZoom) {this.performStandardZoom(coordinate);return;}const currentZoom = this.map.getView().getZoom();// 找到下一个缩放级别let nextLevelIndex = this.zoomLevels.findIndex(level => level > currentZoom);if (nextLevelIndex === -1) {// 已经是最高级别，重置到最低级别nextLevelIndex = 0;}const targetZoom = this.zoomLevels[nextLevelIndex];// 执行缩放this.animateToZoom(coordinate, targetZoom);// 更新当前级别索引this.currentLevelIndex = nextLevelIndex;// 显示级别信息this.showLevelInfo(targetZoom);}// 执行标准缩放performStandardZoom(coordinate) {const currentZoom = this.map.getView().getZoom();const targetZoom = Math.min(20, currentZoom + 2);this.animateToZoom(coordinate, targetZoom);}// 动画缩放到指定级别animateToZoom(coordinate, targetZoom) {const view = this.map.getView();// 智能居中let targetCenter = coordinate;if (this.enhancementSettings.enableSmartCenter) {targetCenter = this.calculateSmartCenter(coordinate, targetZoom);}// 执行动画view.animate({center: targetCenter,zoom: targetZoom,duration: this.enhancementSettings.enableZoomAnimation ? 600 : 0});}// 计算智能居中位置calculateSmartCenter(coordinate, targetZoom) {// 这里可以根据地图内容、用户习惯等因素调整居中位置// 简化实现：稍微偏移以避免UI遮挡const mapSize = this.map.getSize();const pixel = this.map.getPixelFromCoordinate(coordinate);// 如果点击位置在边缘，调整居中位置const offsetX = pixel[0] < mapSize[0] * 0.2 ? mapSize[0] * 0.1 : pixel[0] > mapSize[0] * 0.8 ? -mapSize[0] * 0.1 : 0;const offsetY = pixel[1] < mapSize[1] * 0.2 ? mapSize[1] * 0.1 : pixel[1] > mapSize[1] * 0.8 ? -mapSize[1] * 0.1 : 0;const adjustedPixel = [pixel[0] + offsetX, pixel[1] + offsetY];return this.map.getCoordinateFromPixel(adjustedPixel);}// 计算范围的最佳缩放级别calculateOptimalZoomForExtent(extent) {const view = this.map.getView();const mapSize = this.map.getSize();const resolution = view.getResolutionForExtent(extent, mapSize);const zoom = view.getZoomForResolution(resolution);// 稍微缩小一点以提供边距return Math.max(1, Math.min(18, zoom - 0.5));}// 显示要素信息showFeatureInfo(feature, coordinate) {const info = this.extractFeatureInfo(feature);const popup = document.createElement('div');popup.className = 'feature-info-popup';popup.innerHTML = `<div class="popup-header">要素信息</div><div class="popup-content"><p><strong>类型:</strong> ${info.type}</p><p><strong>名称:</strong> ${info.name}</p><p><strong>属性:</strong> ${info.properties}</p></div><button class="popup-close" onclick="this.parentElement.remove()">×</button>`;popup.style.cssText = `position: fixed;top: 20px;right: 20px;background: white;border: 1px solid #ccc;border-radius: 4px;padding: 15px;box-shadow: 0 4px 12px rgba(0,0,0,0.15);z-index: 10000;max-width: 300px;font-size: 12px;`;document.body.appendChild(popup);// 3秒后自动关闭setTimeout(() => {if (popup.parentElement) {popup.parentElement.removeChild(popup);}}, 3000);}// 提取要素信息extractFeatureInfo(feature) {const properties = feature.getProperties();return {type: feature.getGeometry().getType(),name: properties.name || properties.title || '未命名',properties: Object.keys(properties).length + '个属性'};}// 显示聚合信息showClusterInfo(cluster, coordinate) {const features = cluster.get('features');const count = features.length;const popup = document.createElement('div');popup.className = 'cluster-info-popup';popup.innerHTML = `<div class="popup-header">聚合信息</div><div class="popup-content"><p><strong>要素数量:</strong> ${count}</p><p><strong>操作:</strong> 已缩放到聚合范围</p></div>`;popup.style.cssText = `position: fixed;bottom: 20px;left: 50%;transform: translateX(-50%);background: rgba(0, 0, 0, 0.8);color: white;padding: 10px 20px;border-radius: 4px;font-size: 12px;z-index: 10000;`;document.body.appendChild(popup);setTimeout(() => {document.body.removeChild(popup);}, 2000);}// 显示级别信息showLevelInfo(targetZoom) {const levelInfo = document.createElement('div');levelInfo.className = 'level-info-popup';levelInfo.innerHTML = `<div class="level-display"><span class="level-number">${Math.round(targetZoom)}</span><span class="level-label">级</span></div>`;levelInfo.style.cssText = `position: fixed;top: 50%;right: 20px;transform: translateY(-50%);background: rgba(76, 175, 80, 0.9);color: white;padding: 15px;border-radius: 8px;font-size: 16px;font-weight: bold;text-align: center;z-index: 10000;animation: levelSlideIn 0.3s ease-out;`;// 添加动画样式if (!document.querySelector('#levelAnimationStyle')) {const style = document.createElement('style');style.id = 'levelAnimationStyle';style.textContent = `@keyframes levelSlideIn {0% {transform: translateY(-50%) translateX(100px);opacity: 0;}100% {transform: translateY(-50%) translateX(0);opacity: 1;}}`;document.head.appendChild(style);}document.body.appendChild(levelInfo);setTimeout(() => {document.body.removeChild(levelInfo);}, 1500);}// 提供反馈provideFeedback(targetType, coordinate) {// 音效反馈if (this.enhancementSettings.enableZoomSound) {this.playZoomSound(targetType);}// 触觉反馈if (this.enhancementSettings.enableHapticFeedback && navigator.vibrate) {const vibrationPattern = {'feature': [50, 30, 50],'cluster': [100, 50, 100],'empty': [30]};navigator.vibrate(vibrationPattern[targetType] || [30]);}}// 播放缩放音效playZoomSound(targetType) {if (!this.audioContext) {this.audioContext = new (window.AudioContext || window.webkitAudioContext)();}const frequencies = {'feature': 800,'cluster': 600,'empty': 400};const frequency = frequencies[targetType] || 400;const oscillator = this.audioContext.createOscillator();const gainNode = this.audioContext.createGain();oscillator.connect(gainNode);gainNode.connect(this.audioContext.destination);oscillator.frequency.setValueAtTime(frequency, this.audioContext.currentTime);oscillator.type = 'sine';gainNode.gain.setValueAtTime(0.1, this.audioContext.currentTime);gainNode.gain.exponentialRampToValueAtTime(0.01, this.audioContext.currentTime + 0.3);oscillator.start(this.audioContext.currentTime);oscillator.stop(this.audioContext.currentTime + 0.3);}// 设置多级缩放setupMultiLevelZoom() {// 可以在这里自定义缩放级别this.zoomLevels = [1, 3, 6, 9, 12, 15, 18, 20];}// 设置要素缩放setupFeatureZoom() {// 可以在这里配置要素缩放的特殊逻辑}// 设置智能居中setupSmartCenter() {// 可以在这里配置智能居中的算法}// 设置缩放动画setupZoomAnimation() {// 可以在这里配置动画参数}// 创建增强控制UIcreateEnhancementUI() {const panel = document.createElement('div');panel.className = 'doubleclick-enhancement-panel';panel.innerHTML = `<div class="panel-header">双击增强控制</div><div class="enhancement-features"><h4>增强功能:</h4><label><input type="checkbox" id="enableMultiLevelZoom" checked> 多级缩放</label><label><input type="checkbox" id="enableZoomToFeature" checked> 缩放到要素</label><label><input type="checkbox" id="enableSmartCenter" checked> 智能居中</label><label><input type="checkbox" id="enableZoomAnimation" checked> 缩放动画</label><label><input type="checkbox" id="enableZoomSound"> 缩放音效</label><label><input type="checkbox" id="enableHapticFeedback"> 触觉反馈</label></div><div class="zoom-levels"><h4>缩放级别:</h4><div class="levels-display" id="levelsDisplay"></div><button id="customizeLevels">自定义级别</button></div><div class="enhancement-stats"><h4>使用统计:</h4><p>要素缩放: <span id="featureZoomCount">0</span> 次</p><p>聚合缩放: <span id="clusterZoomCount">0</span> 次</p><p>多级缩放: <span id="multiLevelZoomCount">0</span> 次</p></div>`;panel.style.cssText = `position: fixed;bottom: 20px;right: 20px;background: white;border: 1px solid #ccc;border-radius: 4px;padding: 15px;box-shadow: 0 2px 10px rgba(0,0,0,0.1);z-index: 1000;max-width: 280px;font-size: 12px;max-height: 400px;overflow-y: auto;`;document.body.appendChild(panel);// 更新级别显示this.updateLevelsDisplay();// 绑定增强控制事件this.bindEnhancementControls(panel);}// 更新级别显示updateLevelsDisplay() {const display = document.getElementById('levelsDisplay');if (display) {display.innerHTML = this.zoomLevels.map((level, index) => `<span class="level-item ${index === this.currentLevelIndex ? 'current' : ''}">${level}</span>`).join(' → ');}}// 绑定增强控制事件bindEnhancementControls(panel) {// 增强功能设置panel.querySelector('#enableMultiLevelZoom').addEventListener('change', (e) => {this.enhancementSettings.enableMultiLevelZoom = e.target.checked;});panel.querySelector('#enableZoomToFeature').addEventListener('change', (e) => {this.enhancementSettings.enableZoomToFeature = e.target.checked;});panel.querySelector('#enableSmartCenter').addEventListener('change', (e) => {this.enhancementSettings.enableSmartCenter = e.target.checked;});panel.querySelector('#enableZoomAnimation').addEventListener('change', (e) => {this.enhancementSettings.enableZoomAnimation = e.target.checked;});panel.querySelector('#enableZoomSound').addEventListener('change', (e) => {this.enhancementSettings.enableZoomSound = e.target.checked;});panel.querySelector('#enableHapticFeedback').addEventListener('change', (e) => {this.enhancementSettings.enableHapticFeedback = e.target.checked;});// 自定义级别按钮panel.querySelector('#customizeLevels').addEventListener('click', () => {this.customizeZoomLevels();});}// 自定义缩放级别customizeZoomLevels() {const currentLevels = this.zoomLevels.join(', ');const newLevels = prompt('请输入缩放级别（用逗号分隔）:', currentLevels);if (newLevels) {try {const levels = newLevels.split(',').map(level => parseFloat(level.trim())).filter(level => !isNaN(level));if (levels.length > 0) {this.zoomLevels = levels.sort((a, b) => a - b);this.currentLevelIndex = 0;this.updateLevelsDisplay();alert('缩放级别已更新');} else {alert('无效的缩放级别格式');}} catch (error) {alert('解析缩放级别时出错');}}}
}// 使用双击缩放增强系统
const doubleClickEnhancement = new DoubleClickZoomEnhancementSystem(map);

3. 移动设备双击优化系统

// 移动设备双击优化系统
class MobileDoubleClickOptimizer {constructor(map) {this.map = map;this.mobileSettings = {enableTouchOptimization: true,  // 启用触摸优化preventZoomBounce: true,        // 防止缩放反弹adaptiveThreshold: true,        // 自适应阈值gestureRecognition: true        // 手势识别};this.touchState = {lastTapTime: 0,lastTapPosition: null,tapCount: 0,isDoubleTap: false};this.setupMobileOptimization();}// 设置移动设备优化setupMobileOptimization() {this.detectMobileDevice();this.createMobileDoubleClick();this.setupTouchHandling();this.createMobileUI();}// 检测移动设备detectMobileDevice() {this.isMobile = /Android|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ||('ontouchstart' in window) ||(navigator.maxTouchPoints > 0);if (this.isMobile) {this.adaptForMobile();}}// 为移动设备适配adaptForMobile() {// 禁用默认双击缩放const mapElement = this.map.getTargetElement();mapElement.style.touchAction = 'pan-x pan-y';// 添加移动设备专用样式mapElement.style.userSelect = 'none';mapElement.style.webkitUserSelect = 'none';mapElement.style.webkitTouchCallout = 'none';console.log('检测到移动设备，已应用移动优化');}// 创建移动双击处理createMobileDoubleClick() {// 禁用默认双击缩放const defaultDoubleClick = this.map.getInteractions().getArray().find(interaction => interaction instanceof ol.interaction.DoubleClickZoom);if (defaultDoubleClick) {this.map.removeInteraction(defaultDoubleClick);}// 绑定触摸事件const mapElement = this.map.getTargetElement();mapElement.addEventListener('touchstart', (event) => {this.handleTouchStart(event);}, { passive: false });mapElement.addEventListener('touchend', (event) => {this.handleTouchEnd(event);}, { passive: false });}// 处理触摸开始handleTouchStart(event) {if (event.touches.length === 1) {const touch = event.touches[0];const now = Date.now();// 检查双击if (this.touchState.lastTapTime && (now - this.touchState.lastTapTime) < 300 &&this.calculateDistance({ x: touch.clientX, y: touch.clientY },this.touchState.lastTapPosition) < 50) {// 双击检测成功this.touchState.isDoubleTap = true;this.touchState.tapCount = 2;// 阻止默认行为event.preventDefault();} else {this.touchState.tapCount = 1;this.touchState.isDoubleTap = false;}this.touchState.lastTapTime = now;this.touchState.lastTapPosition = { x: touch.clientX, y: touch.clientY };}}// 处理触摸结束handleTouchEnd(event) {if (this.touchState.isDoubleTap && event.changedTouches.length === 1) {const touch = event.changedTouches[0];const coordinate = this.map.getCoordinateFromPixel([touch.clientX, touch.clientY]);// 执行移动设备优化的双击缩放this.performMobileDoubleClickZoom(coordinate, {x: touch.clientX,y: touch.clientY});// 重置状态this.touchState.isDoubleTap = false;this.touchState.tapCount = 0;}}// 执行移动设备双击缩放performMobileDoubleClickZoom(coordinate, screenPosition) {const view = this.map.getView();const currentZoom = view.getZoom();// 计算目标缩放级别let targetZoom;if (currentZoom < 10) {targetZoom = currentZoom + 3;} else if (currentZoom < 15) {targetZoom = currentZoom + 2;} else {targetZoom = Math.min(20, currentZoom + 1);}// 移动设备特殊处理：考虑屏幕尺寸const screenSize = this.getScreenSize();if (screenSize === 'small') {// 小屏幕设备，缩放幅度稍大targetZoom += 0.5;}// 执行缩放动画view.animate({center: coordinate,zoom: targetZoom,duration: 400 // 移动设备使用较短的动画时间});// 显示移动反馈this.showMobileFeedback(screenPosition, targetZoom);// 触觉反馈if (navigator.vibrate) {navigator.vibrate(50);}}// 获取屏幕尺寸类别getScreenSize() {const width = window.innerWidth;if (width < 480) {return 'small';} else if (width < 768) {return 'medium';} else {return 'large';}}// 显示移动反馈showMobileFeedback(screenPosition, targetZoom) {const feedback = document.createElement('div');feedback.className = 'mobile-zoom-feedback';feedback.innerHTML = `<div class="feedback-ripple"></div><div class="feedback-icon">🔍</div><div class="feedback-text">级别 ${Math.round(targetZoom)}</div>`;feedback.style.cssText = `position: fixed;left: ${screenPosition.x}px;top: ${screenPosition.y}px;transform: translate(-50%, -50%);z-index: 10000;pointer-events: none;`;// 添加移动反馈样式this.addMobileFeedbackStyles();document.body.appendChild(feedback);// 移除反馈setTimeout(() => {document.body.removeChild(feedback);}, 800);}// 添加移动反馈样式addMobileFeedbackStyles() {if (document.querySelector('#mobileFeedbackStyles')) return;const style = document.createElement('style');style.id = 'mobileFeedbackStyles';style.textContent = `.mobile-zoom-feedback {text-align: center;}.mobile-zoom-feedback .feedback-ripple {position: absolute;width: 60px;height: 60px;border: 3px solid #2196F3;border-radius: 50%;background: rgba(33, 150, 243, 0.1);animation: mobileRipple 0.8s ease-out;top: 50%;left: 50%;transform: translate(-50%, -50%);}.mobile-zoom-feedback .feedback-icon {font-size: 24px;color: #2196F3;animation: mobileIconPulse 0.6s ease-out;position: relative;z-index: 1;}.mobile-zoom-feedback .feedback-text {position: absolute;top: 70px;left: 50%;transform: translateX(-50%);background: rgba(33, 150, 243, 0.9);color: white;padding: 4px 8px;border-radius: 12px;font-size: 12px;white-space: nowrap;animation: mobileTextSlide 0.5s ease-out;}@keyframes mobileRipple {0% {transform: translate(-50%, -50%) scale(0.3);opacity: 1;}100% {transform: translate(-50%, -50%) scale(1.8);opacity: 0;}}@keyframes mobileIconPulse {0% {transform: scale(0.5);}50% {transform: scale(1.4);}100% {transform: scale(1);}}@keyframes mobileTextSlide {0% {transform: translateX(-50%) translateY(10px);opacity: 0;}100% {transform: translateX(-50%) translateY(0);opacity: 1;}}`;document.head.appendChild(style);}// 计算两点间距离calculateDistance(point1, point2) {if (!point1 || !point2) return Infinity;const dx = point2.x - point1.x;const dy = point2.y - point1.y;return Math.sqrt(dx * dx + dy * dy);}// 设置触摸处理setupTouchHandling() {// 防止缩放反弹if (this.mobileSettings.preventZoomBounce) {this.preventZoomBounce();}// 设置自适应阈值if (this.mobileSettings.adaptiveThreshold) {this.setupAdaptiveThreshold();}}// 防止缩放反弹preventZoomBounce() {const mapElement = this.map.getTargetElement();// 监听触摸移动，防止意外缩放mapElement.addEventListener('touchmove', (event) => {if (event.touches.length > 1) {// 多点触摸时允许缩放return;}// 单点触摸时防止反弹event.preventDefault();}, { passive: false });}// 设置自适应阈值setupAdaptiveThreshold() {// 根据设备特性调整双击检测阈值const devicePixelRatio = window.devicePixelRatio || 1;const screenSize = this.getScreenSize();// 调整双击检测的时间和距离阈值this.doubleTapThreshold = {time: screenSize === 'small' ? 400 : 300, // 小屏幕设备给更长的时间distance: 50 * devicePixelRatio // 根据像素密度调整距离};}// 创建移动UIcreateMobileUI() {if (!this.isMobile) return;const panel = document.createElement('div');panel.className = 'mobile-doubleclick-panel';panel.innerHTML = `<div class="panel-header">移动双击设置</div><div class="mobile-instructions"><h4>使用说明:</h4><p>📱 双击地图进行缩放</p><p>🔍 自动适配屏幕尺寸</p><p>📳 支持触觉反馈</p></div><div class="mobile-settings"><label><input type="checkbox" id="enableTouchOptimization" checked> 触摸优化</label><label><input type="checkbox" id="preventZoomBounce" checked> 防止反弹</label><label><input type="checkbox" id="adaptiveThreshold" checked> 自适应阈值</label><label><input type="checkbox" id="gestureRecognition" checked> 手势识别</label></div><div class="device-info"><h4>设备信息:</h4><p>屏幕尺寸: <span id="screenSize">--</span></p><p>像素比: <span id="pixelRatio">--</span></p><p>触摸支持: <span id="touchSupport">--</span></p></div>`;panel.style.cssText = `position: fixed;top: 60px;right: 20px;background: white;border: 1px solid #ccc;border-radius: 4px;padding: 15px;box-shadow: 0 2px 10px rgba(0,0,0,0.1);z-index: 1000;max-width: 250px;font-size: 12px;`;document.body.appendChild(panel);// 更新设备信息this.updateDeviceInfo();// 绑定移动控制事件this.bindMobileControls(panel);}// 更新设备信息updateDeviceInfo() {const screenSize = document.getElementById('screenSize');const pixelRatio = document.getElementById('pixelRatio');const touchSupport = document.getElementById('touchSupport');if (screenSize) screenSize.textContent = this.getScreenSize();if (pixelRatio) pixelRatio.textContent = (window.devicePixelRatio || 1).toFixed(2);if (touchSupport) touchSupport.textContent = this.isMobile ? '是' : '否';}// 绑定移动控制事件bindMobileControls(panel) {// 移动设置panel.querySelector('#enableTouchOptimization').addEventListener('change', (e) => {this.mobileSettings.enableTouchOptimization = e.target.checked;});panel.querySelector('#preventZoomBounce').addEventListener('change', (e) => {this.mobileSettings.preventZoomBounce = e.target.checked;});panel.querySelector('#adaptiveThreshold').addEventListener('change', (e) => {this.mobileSettings.adaptiveThreshold = e.target.checked;if (e.target.checked) {this.setupAdaptiveThreshold();}});panel.querySelector('#gestureRecognition').addEventListener('change', (e) => {this.mobileSettings.gestureRecognition = e.target.checked;});}
}// 使用移动设备双击优化系统
const mobileDoubleClickOptimizer = new MobileDoubleClickOptimizer(map);

最佳实践建议

1. 性能优化

// 双击缩放性能优化器
class DoubleClickZoomPerformanceOptimizer {constructor(map) {this.map = map;this.isZooming = false;this.optimizationSettings = {throttleDoubleClick: true,      // 节流双击事件reduceQualityDuringZoom: true,  // 缩放时降低质量preloadNextLevel: true,         // 预加载下一级别optimizeAnimation: true         // 优化动画};this.lastDoubleClickTime = 0;this.setupOptimization();}// 设置优化setupOptimization() {this.bindZoomEvents();this.setupDoubleClickThrottling();this.setupPreloading();this.monitorPerformance();}// 绑定缩放事件bindZoomEvents() {this.map.on('movestart', () => {this.startZoomOptimization();});this.map.on('moveend', () => {this.endZoomOptimization();});}// 开始缩放优化startZoomOptimization() {this.isZooming = true;if (this.optimizationSettings.reduceQualityDuringZoom) {this.reduceRenderQuality();}}// 结束缩放优化endZoomOptimization() {this.isZooming = false;// 恢复渲染质量this.restoreRenderQuality();// 预加载下一级别if (this.optimizationSettings.preloadNextLevel) {this.preloadNextLevel();}}// 设置双击节流setupDoubleClickThrottling() {if (!this.optimizationSettings.throttleDoubleClick) return;const originalDoubleClick = this.map.on;this.map.on = (type, listener) => {if (type === 'dblclick') {const throttledListener = (event) => {const now = Date.now();if (now - this.lastDoubleClickTime > 300) {listener(event);this.lastDoubleClickTime = now;}};return originalDoubleClick.call(this.map, type, throttledListener);} else {return originalDoubleClick.call(this.map, type, listener);}};}// 降低渲染质量reduceRenderQuality() {this.originalPixelRatio = this.map.pixelRatio_;this.map.pixelRatio_ = Math.max(1, this.originalPixelRatio * 0.8);}// 恢复渲染质量restoreRenderQuality() {if (this.originalPixelRatio) {this.map.pixelRatio_ = this.originalPixelRatio;}}// 预加载下一级别preloadNextLevel() {const currentZoom = this.map.getView().getZoom();const nextZoom = Math.min(20, currentZoom + 2);// 预加载下一级别的瓦片this.preloadTilesForZoom(nextZoom);}// 预加载指定级别的瓦片preloadTilesForZoom(zoom) {// 这里可以实现瓦片预加载逻辑console.log(`预加载缩放级别 ${zoom} 的瓦片`);}// 设置预加载setupPreloading() {// 可以在这里配置预加载策略}// 监控性能monitorPerformance() {let frameCount = 0;let lastTime = performance.now();const monitor = () => {if (this.isZooming) {frameCount++;const currentTime = performance.now();if (currentTime - lastTime >= 1000) {const fps = (frameCount * 1000) / (currentTime - lastTime);if (fps < 30) {this.enableAggressiveOptimization();} else if (fps > 50) {this.relaxOptimization();}frameCount = 0;lastTime = currentTime;}}requestAnimationFrame(monitor);};monitor();}// 启用激进优化enableAggressiveOptimization() {this.map.pixelRatio_ = 1;console.log('启用激进双击缩放优化');}// 放松优化relaxOptimization() {if (this.originalPixelRatio) {this.map.pixelRatio_ = Math.min(this.originalPixelRatio,this.map.pixelRatio_ * 1.1);}}
}

2. 用户体验优化

// 双击缩放体验增强器
class DoubleClickZoomExperienceEnhancer {constructor(map) {this.map = map;this.enhanceSettings = {showZoomPreview: true,         // 显示缩放预览provideFeedback: true,         // 提供反馈smoothAnimations: true,        // 平滑动画contextualZoom: true           // 上下文缩放};this.setupExperienceEnhancements();}// 设置体验增强setupExperienceEnhancements() {this.setupZoomPreview();this.setupFeedbackSystem();this.setupSmoothAnimations();this.setupContextualZoom();}// 设置缩放预览setupZoomPreview() {if (!this.enhanceSettings.showZoomPreview) return;this.createPreviewOverlay();this.bindPreviewEvents();}// 创建预览覆盖层createPreviewOverlay() {this.previewOverlay = document.createElement('div');this.previewOverlay.className = 'doubleclick-preview-overlay';this.previewOverlay.innerHTML = `<div class="preview-circle" id="previewCircle"><div class="preview-content"><div class="zoom-indicator">+</div><div class="zoom-level" id="previewZoomLevel">15</div></div></div>`;this.previewOverlay.style.cssText = `position: absolute;top: 0;left: 0;width: 100%;height: 100%;pointer-events: none;z-index: 1000;display: none;`;// 添加预览样式this.addPreviewStyles();// 添加到地图容器this.map.getTargetElement().appendChild(this.previewOverlay);}// 添加预览样式addPreviewStyles() {const style = document.createElement('style');style.textContent = `.doubleclick-preview-overlay .preview-circle {position: absolute;width: 80px;height: 80px;border: 3px solid rgba(76, 175, 80, 0.8);border-radius: 50%;background: rgba(76, 175, 80, 0.1);display: flex;align-items: center;justify-content: center;transform: translate(-50%, -50%);animation: previewPulse 1s ease-in-out infinite;}.doubleclick-preview-overlay .preview-content {text-align: center;color: #4CAF50;}.doubleclick-preview-overlay .zoom-indicator {font-size: 24px;font-weight: bold;line-height: 1;}.doubleclick-preview-overlay .zoom-level {font-size: 12px;margin-top: 2px;}@keyframes previewPulse {0%, 100% {transform: translate(-50%, -50%) scale(1);opacity: 0.8;}50% {transform: translate(-50%, -50%) scale(1.1);opacity: 1;}}`;document.head.appendChild(style);}// 绑定预览事件bindPreviewEvents() {let previewTimer;this.map.on('singleclick', (event) => {// 单击时显示预览clearTimeout(previewTimer);previewTimer = setTimeout(() => {this.showZoomPreview(event.pixel);}, 200); // 延迟显示，避免与双击冲突});this.map.on('dblclick', (event) => {// 双击时隐藏预览clearTimeout(previewTimer);this.hideZoomPreview();});// 鼠标移动时隐藏预览this.map.on('pointermove', () => {clearTimeout(previewTimer);this.hideZoomPreview();});}// 显示缩放预览showZoomPreview(pixel) {const circle = document.getElementById('previewCircle');const levelElement = document.getElementById('previewZoomLevel');if (circle && levelElement) {const currentZoom = this.map.getView().getZoom();const targetZoom = Math.min(20, currentZoom + 2);circle.style.left = `${pixel[0]}px`;circle.style.top = `${pixel[1]}px`;levelElement.textContent = Math.round(targetZoom);this.previewOverlay.style.display = 'block';// 3秒后自动隐藏setTimeout(() => {this.hideZoomPreview();}, 3000);}}// 隐藏缩放预览hideZoomPreview() {if (this.previewOverlay) {this.previewOverlay.style.display = 'none';}}// 设置反馈系统setupFeedbackSystem() {if (!this.enhanceSettings.provideFeedback) return;this.createFeedbackIndicator();this.bindFeedbackEvents();}// 创建反馈指示器createFeedbackIndicator() {this.feedbackIndicator = document.createElement('div');this.feedbackIndicator.className = 'doubleclick-feedback';this.feedbackIndicator.style.cssText = `position: fixed;bottom: 20px;left: 50%;transform: translateX(-50%);background: rgba(0, 0, 0, 0.8);color: white;padding: 8px 16px;border-radius: 4px;font-size: 12px;z-index: 10000;display: none;`;document.body.appendChild(this.feedbackIndicator);}// 绑定反馈事件bindFeedbackEvents() {let feedbackTimer;this.map.on('dblclick', (event) => {const currentZoom = this.map.getView().getZoom().toFixed(1);const targetZoom = Math.min(20, parseFloat(currentZoom) + 2).toFixed(1);this.feedbackIndicator.textContent = `双击缩放: ${currentZoom} → ${targetZoom}`;this.feedbackIndicator.style.display = 'block';clearTimeout(feedbackTimer);feedbackTimer = setTimeout(() => {this.feedbackIndicator.style.display = 'none';}, 2000);});}// 设置平滑动画setupSmoothAnimations() {if (!this.enhanceSettings.smoothAnimations) return;// 为地图容器添加平滑过渡const mapElement = this.map.getTargetElement();mapElement.style.transition = 'transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94)';}// 设置上下文缩放setupContextualZoom() {if (!this.enhanceSettings.contextualZoom) return;this.contextualZoomHandler = new ContextualZoomHandler(this.map);}
}// 上下文缩放处理器
class ContextualZoomHandler {constructor(map) {this.map = map;this.setupContextualZoom();}// 设置上下文缩放setupContextualZoom() {this.map.on('dblclick', (event) => {this.handleContextualZoom(event);});}// 处理上下文缩放handleContextualZoom(event) {const features = this.map.getFeaturesAtPixel(event.pixel);if (features && features.length > 0) {// 有要素时，缩放到要素this.zoomToFeatureContext(features[0]);} else {// 无要素时，执行标准缩放this.performStandardZoom(event.coordinate);}}// 缩放到要素上下文zoomToFeatureContext(feature) {const geometry = feature.getGeometry();const extent = geometry.getExtent();this.map.getView().fit(extent, {duration: 600,padding: [20, 20, 20, 20],maxZoom: 18});}// 执行标准缩放performStandardZoom(coordinate) {const view = this.map.getView();const currentZoom = view.getZoom();const targetZoom = Math.min(20, currentZoom + 2);view.animate({center: coordinate,zoom: targetZoom,duration: 500});}
}