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

OpenLayers地图交互 -- 章节六：范围交互详解

news 2025/9/22 7:01:29

前言

在前面的文章中，我们学习了OpenLayers中绘制交互、选择交互、修改交互和捕捉交互的应用技术。本文将深入探讨OpenLayers中范围交互（ExtentInteraction）的应用技术，这是WebGIS开发中实现区域选择、范围查询和空间分析的核心技术。范围交互功能允许用户通过拖拽矩形框的方式定义地理范围，广泛应用于数据查询、地图导航、空间分析和可视化控制等场景。通过合理配置范围样式和触发条件，我们可以为用户提供直观、高效的空间范围选择体验。通过一个完整的示例，我们将详细解析范围交互的创建、样式配置和事件处理等关键技术。

项目结构分析

模板结构

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

模板结构详解：

简洁设计: 采用最简洁的模板结构，专注于范围交互功能演示
地图容器: id="map" 作为地图的唯一挂载点，全屏显示地图
无额外UI: 不包含工具栏或控制面板，通过键盘交互触发功能
纯交互体验: 突出范围交互的核心功能，避免UI干扰

依赖引入详解

import {Map, View} from 'ol'
import {Extent} from 'ol/interaction';
import {shiftKeyOnly} from 'ol/events/condition';
import {OSM} from 'ol/source';
import {Tile as TileLayer} from 'ol/layer';
import {Fill, Icon, Stroke, Style} from 'ol/style';
import marker from './data/marker.png'

依赖说明：

Map, View: OpenLayers的核心类，Map负责地图实例管理，View控制地图视图参数
Extent: 范围交互类，提供矩形范围选择功能
shiftKeyOnly: 事件条件类，定义Shift键触发的交互条件
OSM: OpenStreetMap数据源，提供基础地图瓦片服务
TileLayer: 瓦片图层类，用于显示栅格地图数据
Fill, Icon, Stroke, Style: 样式类，用于配置范围框和指针的视觉样式
marker: 图标资源，用于自定义指针样式

属性说明表格

1. 依赖引入属性说明

属性名称	类型	说明	用途
Map	Class	地图核心类	创建和管理地图实例
View	Class	地图视图类	控制地图显示范围、投影和缩放
Extent	Class	范围交互类	提供矩形范围选择功能
shiftKeyOnly	Condition	Shift键条件	定义Shift键触发的事件条件
OSM	Source	OpenStreetMap数据源	提供基础地图瓦片服务
TileLayer	Layer	瓦片图层类	显示栅格瓦片数据
Fill	Style	填充样式类	配置范围框的填充颜色和透明度
Icon	Style	图标样式类	配置指针的图标显示样式
Stroke	Style	边框样式类	配置范围框的边框颜色和宽度
Style	Style	样式基类	组合各种样式属性

2. 范围交互配置属性说明

属性名称	类型	默认值	说明
condition	Condition	always	触发范围选择的条件
boxStyle	Style	-	范围框的样式配置
pointerStyle	Style	-	指针的样式配置
extent	Array	-	初始范围坐标
wrapX	Boolean	false	是否在X轴方向环绕

3. 事件条件类型说明

条件类型	说明	应用场景
always	始终触发	默认拖拽模式
shiftKeyOnly	仅Shift键按下	避免误操作的保护模式
altKeyOnly	仅Alt键按下	特殊选择模式
click	点击事件	点击触发范围选择
doubleClick	双击事件	双击触发范围选择

4. 范围数据格式说明

数据类型	格式	说明	示例
extent	Array	范围坐标数组	[minX, minY, maxX, maxY]
extentInternal	Array	内部范围坐标	经过投影转换的坐标
coordinates	Array	矩形顶点坐标	[[x1,y1], [x2,y2], [x3,y3], [x4,y4]]

核心代码详解

1. 数据属性初始化

data() {return {}
}

属性详解：

简化数据结构: 范围交互不需要复杂的数据状态管理
状态由交互控制: 范围选择状态完全由交互对象内部管理
专注功能演示: 突出范围交互的核心功能，避免数据复杂性干扰

2. 样式配置系统

// 初始化鼠标指针样式
const image = new Icon({src: marker,                    // 图标资源路径anchor: [0.75, 0.5],           // 图标锚点位置rotateWithView: true,          // 是否随地图旋转
})let pointerStyle = new Style({image: image,                   // 使用自定义图标
});// 初始化范围盒子样式
let boxStyle = new Style({stroke: new Stroke({color: 'blue',              // 边框颜色lineDash: [4],              // 虚线样式width: 3,                   // 边框宽度}),fill: new Fill({color: 'rgba(0, 0, 255, 0.1)', // 填充颜色和透明度}),
});

样式配置详解：

指针样式配置：

- 使用自定义图标作为范围选择时的鼠标指针
- anchor: 设置图标锚点，控制图标与鼠标位置的对齐
- rotateWithView: 图标随地图旋转，保持视觉一致性

范围框样式配置：

- 使用蓝色虚线边框，清晰标识选择范围
- lineDash: 虚线模式，区分于实体几何要素
- fill: 半透明填充，不遮挡底图内容
- 颜色选择考虑对比度和视觉舒适性

3. 地图初始化

// 初始化地图
this.map = new Map({target: 'map',                  // 指定挂载domlayers: [new TileLayer({source: new OSM()       // 加载OpenStreetMap基础地图}),],view: new View({center: [113.24981689453125, 23.126468438108688], // 视图中心位置projection: "EPSG:4326",    // 指定投影坐标系zoom: 12                    // 缩放级别})
});

地图配置详解：

基础配置：

- 单一图层设计，专注于范围交互功能
- 使用OSM提供稳定的基础地图服务

视图设置：

- 中心点定位在广州地区，便于演示和测试
- 使用WGS84坐标系，确保坐标的通用性
- 适中的缩放级别，平衡细节显示和操作便利性

4. 范围交互创建

// 创建Extent交互控件
let extent = new Extent({condition: shiftKeyOnly,        // 激活范围绘制交互控件的条件boxStyle: boxStyle,             // 绘制范围框的样式pointerStyle: pointerStyle,     // 用于绘制范围的光标样式
});this.map.addInteraction(extent);

范围交互配置详解：

触发条件：

- shiftKeyOnly: 只有按住Shift键时才能拖拽选择范围
- 避免与地图平移操作冲突，提供明确的交互意图

样式配置：

- boxStyle: 范围框的视觉样式，影响用户体验
- pointerStyle: 鼠标指针样式，提供视觉反馈

交互集成：

- 添加到地图实例，自动处理鼠标事件
- 与地图的其他交互协调工作

5. 范围数据获取

// 激活Extent交互控件（可选）
// extent.setActive(true);// 延时获取范围数据（演示用）
setTimeout(() => {let extent1 = extent.getExtent();           // 获取当前范围console.log(extent1);let extentInternal = extent.getExtentInternal(); // 获取内部范围console.log(extentInternal);
}, 8000);

数据获取详解：

范围获取方法：

- getExtent(): 获取用户选择的地理范围
- getExtentInternal(): 获取内部处理后的范围数据

数据格式：

- 返回[minX, minY, maxX, maxY]格式的坐标数组
- 坐标系与地图视图的投影一致

使用时机：

- 通常在用户完成范围选择后获取
- 可结合事件监听实现实时获取

应用场景代码演示

1. 高级范围选择配置

多模式范围选择：

// 创建多种触发条件的范围选择
const extentConfigurations = {// 标准模式：Shift键触发standard: new Extent({condition: shiftKeyOnly,boxStyle: new Style({stroke: new Stroke({color: 'blue',lineDash: [4],width: 2}),fill: new Fill({color: 'rgba(0, 0, 255, 0.1)'})})}),// 快速模式：Alt键触发quick: new Extent({condition: altKeyOnly,boxStyle: new Style({stroke: new Stroke({color: 'green',lineDash: [2],width: 1}),fill: new Fill({color: 'rgba(0, 255, 0, 0.1)'})})}),// 精确模式：Ctrl+Shift键触发precise: new Extent({condition: function(event) {return event.originalEvent.ctrlKey && event.originalEvent.shiftKey;},boxStyle: new Style({stroke: new Stroke({color: 'red',width: 3}),fill: new Fill({color: 'rgba(255, 0, 0, 0.15)'})})})
};// 切换范围选择模式
const switchExtentMode = function(mode) {// 移除所有现有的范围交互map.getInteractions().forEach(interaction => {if (interaction instanceof Extent) {map.removeInteraction(interaction);}});// 添加指定模式的范围交互if (extentConfigurations[mode]) {map.addInteraction(extentConfigurations[mode]);showModeIndicator(mode);}
};

智能范围约束：

// 带约束的范围选择
const constrainedExtent = new Extent({condition: shiftKeyOnly,boxStyle: boxStyle,pointerStyle: pointerStyle
});// 添加范围约束
constrainedExtent.on('extentchanged', function(event) {const extent = event.extent;const [minX, minY, maxX, maxY] = extent;// 最小范围约束const minWidth = 1000;   // 最小宽度（米）const minHeight = 1000;  // 最小高度（米）if ((maxX - minX) < minWidth || (maxY - minY) < minHeight) {// 范围太小，扩展到最小尺寸const centerX = (minX + maxX) / 2;const centerY = (minY + maxY) / 2;const adjustedExtent = [centerX - minWidth / 2,centerY - minHeight / 2,centerX + minWidth / 2,centerY + minHeight / 2];event.extent = adjustedExtent;showConstraintMessage('范围已调整到最小尺寸');}// 最大范围约束const maxArea = 1000000000; // 最大面积（平方米）const area = (maxX - minX) * (maxY - minY);if (area > maxArea) {event.preventDefault();showConstraintMessage('选择范围过大，请缩小选择区域');}
});

2. 范围选择事件处理

完整的事件监听系统：

// 范围选择开始事件
extent.on('extentstart', function(event) {console.log('开始选择范围');// 显示选择提示showSelectionTips(true);// 记录开始时间event.target.startTime = new Date();// 禁用其他地图交互disableOtherInteractions();
});// 范围选择进行中事件
extent.on('extentchanged', function(event) {const currentExtent = event.extent;// 实时显示范围信息updateExtentInfo(currentExtent);// 实时验证范围validateExtent(currentExtent);// 计算范围面积const area = calculateExtentArea(currentExtent);displayAreaInfo(area);
});// 范围选择结束事件
extent.on('extentend', function(event) {console.log('范围选择完成');const finalExtent = event.extent;// 隐藏选择提示showSelectionTips(false);// 计算选择时长const duration = new Date() - event.target.startTime;console.log('选择耗时:', duration + 'ms');// 处理范围选择结果handleExtentSelection(finalExtent);// 重新启用其他交互enableOtherInteractions();
});// 范围选择取消事件
extent.on('extentcancel', function(event) {console.log('范围选择已取消');// 清理UI状态clearSelectionUI();// 重新启用其他交互enableOtherInteractions();
});

范围数据处理：

// 范围数据处理函数
const handleExtentSelection = function(extent) {const [minX, minY, maxX, maxY] = extent;// 计算范围属性const extentInfo = {bounds: extent,center: [(minX + maxX) / 2, (minY + maxY) / 2],width: maxX - minX,height: maxY - minY,area: (maxX - minX) * (maxY - minY),perimeter: 2 * ((maxX - minX) + (maxY - minY))};// 显示范围信息displayExtentStatistics(extentInfo);// 执行基于范围的操作performExtentBasedOperations(extent);
};// 基于范围的操作
const performExtentBasedOperations = function(extent) {// 查询范围内的要素const featuresInExtent = queryFeaturesInExtent(extent);console.log('范围内要素数量:', featuresInExtent.length);// 缩放到范围map.getView().fit(extent, {padding: [50, 50, 50, 50],duration: 1000});// 高亮范围内的要素highlightFeaturesInExtent(featuresInExtent);// 触发自定义事件map.dispatchEvent({type: 'extentselected',extent: extent,features: featuresInExtent});
};

3. 范围选择工具集成

工具栏集成：

// 创建范围选择工具栏
const createExtentToolbar = function() {const toolbar = document.createElement('div');toolbar.className = 'extent-toolbar';toolbar.innerHTML = `<div class="toolbar-group"><button id="extent-select" class="tool-button"><span class="icon">📦</span><span class="label">选择范围</span></button><button id="extent-clear" class="tool-button"><span class="icon">🗑️</span><span class="label">清除范围</span></button><button id="extent-export" class="tool-button"><span class="icon">📤</span><span class="label">导出范围</span></button></div><div class="extent-info"><span id="extent-coordinates"></span><span id="extent-area"></span></div>`;// 绑定工具栏事件setupToolbarEvents(toolbar);return toolbar;
};// 工具栏事件处理
const setupToolbarEvents = function(toolbar) {// 激活范围选择toolbar.querySelector('#extent-select').addEventListener('click', () => {toggleExtentInteraction(true);});// 清除范围toolbar.querySelector('#extent-clear').addEventListener('click', () => {clearCurrentExtent();});// 导出范围toolbar.querySelector('#extent-export').addEventListener('click', () => {exportCurrentExtent();});
};

预设范围管理：

// 预设范围管理器
class PresetExtentManager {constructor() {this.presets = new Map();this.loadPresets();}// 添加预设范围addPreset(name, extent, description) {const preset = {name: name,extent: extent,description: description,createdAt: new Date(),thumbnail: this.generateThumbnail(extent)};this.presets.set(name, preset);this.savePresets();this.updatePresetUI();}// 应用预设范围applyPreset(name) {const preset = this.presets.get(name);if (preset) {// 设置范围到交互extent.setExtent(preset.extent);// 缩放地图到范围map.getView().fit(preset.extent, {padding: [20, 20, 20, 20],duration: 1000});return true;}return false;}// 删除预设范围removePreset(name) {if (this.presets.delete(name)) {this.savePresets();this.updatePresetUI();return true;}return false;}// 生成缩略图generateThumbnail(extent) {// 生成范围的缩略图表示return {bounds: extent,center: [(extent[0] + extent[2]) / 2, (extent[1] + extent[3]) / 2],zoom: this.calculateOptimalZoom(extent)};}// 持久化存储savePresets() {const presetsData = Array.from(this.presets.entries());localStorage.setItem('openlayers_extent_presets', JSON.stringify(presetsData));}// 加载预设loadPresets() {const saved = localStorage.getItem('openlayers_extent_presets');if (saved) {const presetsData = JSON.parse(saved);this.presets = new Map(presetsData);}}
}

4. 范围可视化增强

动态范围显示：

// 增强的范围可视化
class EnhancedExtentVisualization {constructor(map) {this.map = map;this.overlayLayer = this.createOverlayLayer();this.animationFrame = null;}// 创建覆盖图层createOverlayLayer() {const source = new VectorSource();const layer = new VectorLayer({source: source,style: this.createDynamicStyle(),zIndex: 1000});this.map.addLayer(layer);return layer;}// 动态样式createDynamicStyle() {return function(feature, resolution) {const properties = feature.getProperties();const animationPhase = properties.animationPhase || 0;return new Style({stroke: new Stroke({color: `rgba(255, 0, 0, ${0.5 + 0.3 * Math.sin(animationPhase)})`,width: 3 + Math.sin(animationPhase),lineDash: [10, 5]}),fill: new Fill({color: `rgba(255, 0, 0, ${0.1 + 0.05 * Math.sin(animationPhase)})`})});};}// 显示动画范围showAnimatedExtent(extent) {const feature = new Feature({geometry: new Polygon([[[extent[0], extent[1]],[extent[2], extent[1]],[extent[2], extent[3]],[extent[0], extent[3]],[extent[0], extent[1]]]]),animationPhase: 0});this.overlayLayer.getSource().addFeature(feature);this.startAnimation(feature);}// 启动动画startAnimation(feature) {const animate = () => {const phase = feature.get('animationPhase') + 0.1;feature.set('animationPhase', phase);if (phase < Math.PI * 4) { // 动画2秒this.animationFrame = requestAnimationFrame(animate);} else {this.stopAnimation(feature);}};animate();}// 停止动画stopAnimation(feature) {if (this.animationFrame) {cancelAnimationFrame(this.animationFrame);this.animationFrame = null;}// 移除动画要素this.overlayLayer.getSource().removeFeature(feature);}
}

范围标注系统：

// 范围标注管理
class ExtentAnnotationManager {constructor(map) {this.map = map;this.annotations = [];this.annotationLayer = this.createAnnotationLayer();}// 创建标注图层createAnnotationLayer() {const source = new VectorSource();const layer = new VectorLayer({source: source,style: this.createAnnotationStyle(),zIndex: 1001});this.map.addLayer(layer);return layer;}// 标注样式createAnnotationStyle() {return function(feature) {const properties = feature.getProperties();return new Style({text: new Text({text: properties.label || '',font: '14px Arial',fill: new Fill({ color: 'black' }),stroke: new Stroke({ color: 'white', width: 3 }),offsetY: -15,backgroundFill: new Fill({ color: 'rgba(255, 255, 255, 0.8)' }),backgroundStroke: new Stroke({ color: 'black', width: 1 }),padding: [2, 4, 2, 4]}),image: new CircleStyle({radius: 5,fill: new Fill({ color: 'red' }),stroke: new Stroke({ color: 'white', width: 2 })})});};}// 添加范围标注addExtentAnnotation(extent, label, description) {const center = [(extent[0] + extent[2]) / 2,(extent[1] + extent[3]) / 2];const annotation = new Feature({geometry: new Point(center),label: label,description: description,extent: extent,type: 'extent-annotation'});this.annotationLayer.getSource().addFeature(annotation);this.annotations.push(annotation);return annotation;}// 更新标注updateAnnotation(annotation, newLabel, newDescription) {annotation.set('label', newLabel);annotation.set('description', newDescription);// 触发样式更新annotation.changed();}// 移除标注removeAnnotation(annotation) {this.annotationLayer.getSource().removeFeature(annotation);const index = this.annotations.indexOf(annotation);if (index > -1) {this.annotations.splice(index, 1);}}
}

5. 范围分析工具

空间分析集成：

// 基于范围的空间分析工具
class ExtentAnalysisTools {constructor(map, dataLayers) {this.map = map;this.dataLayers = dataLayers;this.analysisResults = new Map();}// 范围内要素统计analyzeExtentStatistics(extent) {const results = {totalFeatures: 0,featuresByType: new Map(),totalArea: 0,averageSize: 0,density: 0};this.dataLayers.forEach(layer => {const source = layer.getSource();const featuresInExtent = source.getFeaturesInExtent(extent);results.totalFeatures += featuresInExtent.length;featuresInExtent.forEach(feature => {const geomType = feature.getGeometry().getType();const count = results.featuresByType.get(geomType) || 0;results.featuresByType.set(geomType, count + 1);// 计算要素面积（如果是面要素）if (geomType === 'Polygon' || geomType === 'MultiPolygon') {const area = feature.getGeometry().getArea();results.totalArea += area;}});});// 计算衍生指标if (results.totalFeatures > 0) {results.averageSize = results.totalArea / results.totalFeatures;}const extentArea = (extent[2] - extent[0]) * (extent[3] - extent[1]);results.density = results.totalFeatures / extentArea;return results;}// 范围比较分析compareExtents(extent1, extent2, label1 = 'Range A', label2 = 'Range B') {const stats1 = this.analyzeExtentStatistics(extent1);const stats2 = this.analyzeExtentStatistics(extent2);const comparison = {extents: { [label1]: extent1, [label2]: extent2 },statistics: { [label1]: stats1, [label2]: stats2 },differences: {featureCountDiff: stats2.totalFeatures - stats1.totalFeatures,areaDiff: stats2.totalArea - stats1.totalArea,densityDiff: stats2.density - stats1.density},similarity: this.calculateExtentSimilarity(stats1, stats2)};return comparison;}// 计算范围相似度calculateExtentSimilarity(stats1, stats2) {// 基于要素数量、面积、密度的相似度计算const featureRatio = Math.min(stats1.totalFeatures, stats2.totalFeatures) /Math.max(stats1.totalFeatures, stats2.totalFeatures);const areaRatio = Math.min(stats1.totalArea, stats2.totalArea) /Math.max(stats1.totalArea, stats2.totalArea);const densityRatio = Math.min(stats1.density, stats2.density) /Math.max(stats1.density, stats2.density);return (featureRatio + areaRatio + densityRatio) / 3;}// 生成分析报告generateAnalysisReport(extent, statistics) {const report = {extent: extent,statistics: statistics,timestamp: new Date(),summary: this.generateSummary(statistics),recommendations: this.generateRecommendations(statistics)};return report;}// 生成摘要generateSummary(statistics) {return `分析区域包含 ${statistics.totalFeatures} 个要素，总面积 ${(statistics.totalArea / 1000000).toFixed(2)} 平方公里，要素密度 ${statistics.density.toFixed(4)} 个/平方米。`;}// 生成建议generateRecommendations(statistics) {const recommendations = [];if (statistics.density > 0.001) {recommendations.push('该区域要素密度较高，建议进行数据简化处理');}if (statistics.totalFeatures > 1000) {recommendations.push('要素数量较多，建议使用聚合显示');}if (statistics.totalArea < 1000) {recommendations.push('分析区域较小，可能需要扩大范围');}return recommendations;}
}

最佳实践建议

1. 性能优化

大数据范围查询优化：

// 优化大数据量的范围查询
class OptimizedExtentQuery {constructor(map) {this.map = map;this.spatialIndex = new Map(); // 空间索引this.queryCache = new Map();   // 查询缓存}// 建立空间索引buildSpatialIndex(features) {const gridSize = 1000; // 网格大小features.forEach(feature => {const extent = feature.getGeometry().getExtent();const gridKeys = this.getGridKeys(extent, gridSize);gridKeys.forEach(key => {if (!this.spatialIndex.has(key)) {this.spatialIndex.set(key, []);}this.spatialIndex.get(key).push(feature);});});}// 优化的范围查询queryFeaturesInExtent(extent) {const cacheKey = extent.join(',');// 检查缓存if (this.queryCache.has(cacheKey)) {return this.queryCache.get(cacheKey);}// 使用空间索引查询const candidates = this.getSpatialCandidates(extent);const results = candidates.filter(feature => {return ol.extent.intersects(feature.getGeometry().getExtent(), extent);});// 缓存结果this.queryCache.set(cacheKey, results);// 限制缓存大小if (this.queryCache.size > 100) {const oldestKey = this.queryCache.keys().next().value;this.queryCache.delete(oldestKey);}return results;}// 获取空间候选要素getSpatialCandidates(extent) {const gridKeys = this.getGridKeys(extent, 1000);const candidates = new Set();gridKeys.forEach(key => {const features = this.spatialIndex.get(key) || [];features.forEach(feature => candidates.add(feature));});return Array.from(candidates);}
}

渲染性能优化：

// 范围选择的渲染优化
const optimizeExtentRendering = function() {// 使用防抖减少重绘频率const debouncedRender = debounce(function(extent) {updateExtentDisplay(extent);}, 100);// 根据缩放级别调整详细程度const adaptiveDetail = function(zoom) {if (zoom > 15) {return 'high';   // 高详细度} else if (zoom > 10) {return 'medium'; // 中等详细度} else {return 'low';    // 低详细度}};// 优化样式计算const cachedStyles = new Map();const getCachedStyle = function(styleKey) {if (!cachedStyles.has(styleKey)) {cachedStyles.set(styleKey, computeStyle(styleKey));}return cachedStyles.get(styleKey);};
};

2. 用户体验优化

交互引导系统：

// 范围选择引导系统
class ExtentSelectionGuide {constructor(map) {this.map = map;this.guideOverlay = this.createGuideOverlay();this.isGuideActive = false;}// 创建引导覆盖层createGuideOverlay() {const element = document.createElement('div');element.className = 'extent-guide-overlay';element.innerHTML = `<div class="guide-content"><h3>范围选择指南</h3><ol><li>按住 <kbd>Shift</kbd> 键</li><li>在地图上拖拽鼠标</li><li>松开鼠标完成选择</li></ol><button id="guide-close">我知道了</button></div>`;const overlay = new Overlay({element: element,positioning: 'center-center',autoPan: false,className: 'extent-guide'});return overlay;}// 显示引导showGuide() {if (!this.isGuideActive) {this.map.addOverlay(this.guideOverlay);this.guideOverlay.setPosition(this.map.getView().getCenter());this.isGuideActive = true;// 自动隐藏setTimeout(() => {this.hideGuide();}, 5000);}}// 隐藏引导hideGuide() {if (this.isGuideActive) {this.map.removeOverlay(this.guideOverlay);this.isGuideActive = false;}}
}

状态反馈系统：

// 完善的状态反馈
class ExtentStatusFeedback {constructor() {this.statusElement = this.createStatusElement();this.currentStatus = 'ready';}// 创建状态元素createStatusElement() {const element = document.createElement('div');element.className = 'extent-status-indicator';element.innerHTML = `<div class="status-content"><span class="status-icon">📍</span><span class="status-text">准备选择范围</span><div class="status-progress"><div class="progress-bar"></div></div></div>`;document.body.appendChild(element);return element;}// 更新状态updateStatus(status, message, progress = 0) {this.currentStatus = status;const statusText = this.statusElement.querySelector('.status-text');const statusIcon = this.statusElement.querySelector('.status-icon');const progressBar = this.statusElement.querySelector('.progress-bar');statusText.textContent = message;progressBar.style.width = progress + '%';// 更新图标const icons = {ready: '📍',selecting: '🎯',processing: '⏳',complete: '✅',error: '❌'};statusIcon.textContent = icons[status] || '📍';// 更新样式this.statusElement.className = `extent-status-indicator status-${status}`;}// 显示进度showProgress(current, total) {const progress = (current / total) * 100;this.updateStatus('processing', `处理中... (${current}/${total})`, progress);}
}

3. 数据管理

范围历史管理：

// 范围选择历史管理
class ExtentHistoryManager {constructor(maxHistory = 20) {this.history = [];this.currentIndex = -1;this.maxHistory = maxHistory;}// 添加历史记录addToHistory(extent, metadata = {}) {// 移除当前索引之后的历史this.history.splice(this.currentIndex + 1);const record = {extent: extent,timestamp: new Date(),metadata: metadata,id: this.generateId()};this.history.push(record);// 限制历史长度if (this.history.length > this.maxHistory) {this.history.shift();} else {this.currentIndex++;}}// 撤销操作undo() {if (this.currentIndex > 0) {this.currentIndex--;return this.history[this.currentIndex];}return null;}// 重做操作redo() {if (this.currentIndex < this.history.length - 1) {this.currentIndex++;return this.history[this.currentIndex];}return null;}// 获取历史记录getHistory() {return this.history.map((record, index) => ({...record,isCurrent: index === this.currentIndex}));}// 生成唯一IDgenerateId() {return 'extent_' + Date.now() + '_' + Math.random().toString(36).substr(2, 9);}
}

数据导出功能：

// 范围数据导出
class ExtentDataExporter {constructor() {this.supportedFormats = ['geojson', 'kml', 'wkt', 'json'];}// 导出为GeoJSONexportAsGeoJSON(extent, properties = {}) {const feature = {type: 'Feature',properties: {name: '选择范围',description: '用户选择的地理范围',area: this.calculateArea(extent),perimeter: this.calculatePerimeter(extent),timestamp: new Date().toISOString(),...properties},geometry: {type: 'Polygon',coordinates: [[[extent[0], extent[1]],[extent[2], extent[1]],[extent[2], extent[3]],[extent[0], extent[3]],[extent[0], extent[1]]]]}};return JSON.stringify(feature, null, 2);}// 导出为KMLexportAsKML(extent, name = '选择范围') {const kml = `<?xml version="1.0" encoding="UTF-8"?>
<kml xmlns="http://www.opengis.net/kml/2.2"><Document><name>${name}</name><Placemark><name>${name}</name><description>用户选择的地理范围</description><Polygon><outerBoundaryIs><LinearRing><coordinates>${extent[0]},${extent[1]},0${extent[2]},${extent[1]},0${extent[2]},${extent[3]},0${extent[0]},${extent[3]},0${extent[0]},${extent[1]},0</coordinates></LinearRing></outerBoundaryIs></Polygon></Placemark></Document>
</kml>`;return kml;}// 导出为WKTexportAsWKT(extent) {return `POLYGON((${extent[0]} ${extent[1]}, ${extent[2]} ${extent[1]}, ` +`${extent[2]} ${extent[3]}, ${extent[0]} ${extent[3]}, ` +`${extent[0]} ${extent[1]}))`;}// 下载文件downloadFile(content, filename, mimeType) {const blob = new Blob([content], { type: mimeType });const url = URL.createObjectURL(blob);const link = document.createElement('a');link.href = url;link.download = filename;document.body.appendChild(link);link.click();document.body.removeChild(link);URL.revokeObjectURL(url);}// 计算面积calculateArea(extent) {return (extent[2] - extent[0]) * (extent[3] - extent[1]);}// 计算周长calculatePerimeter(extent) {return 2 * ((extent[2] - extent[0]) + (extent[3] - extent[1]));}
}