4.3 要素选择

📦 基于 OpenLayers 10.5.0+ 最新 API✅ Context7 文档验证通过🔄 包含最新选择交互特性

🎯 学习目标

本章节将深入介绍 OpenLayers 的要素选择功能，包括 Select 交互的配置优化、多选和批量操作、选择样式和反馈等。完成本章学习后，你将掌握：

• Select 交互的创建和高级配置
• 多种选择模式和条件设置
• 选择样式的定制和动态更新
• 批量选择和操作功能
• 选择事件的处理和响应
• 性能优化和最佳实践

🌟 要素选择概述

要素选择是地图交互的核心功能之一，允许用户选择和操作地图上的要素。OpenLayers 10.x 提供了强大的 Select 交互，支持单选、多选、条件选择等多种模式。

🆕 OpenLayers 10.5.0+ 选择新特性

Context7 验证的最新 API

// ✅ 最新的 Select 交互配置
import { Select } from 'ol/interaction';
import { click, pointerMove, altKeyOnly, shiftKeyOnly } from 'ol/events/condition';

const selectInteraction = new Select({
  // ✅ 条件函数：支持多种选择条件
  condition: click,

  // ✅ 添加条件：支持多选
  addCondition: shiftKeyOnly,

  // ✅ 移除条件：支持取消选择
  removeCondition: altKeyOnly,

  // ✅ 切换条件：支持切换选择状态
  toggleCondition: shiftKeyOnly,

  // ✅ 多选模式：支持多个要素同时选择
  multi: false,

  // ✅ 命中容差：使用 CSS 像素
  hitTolerance: 5,

  // ✅ 图层过滤：只选择特定图层的要素
  layers: [vectorLayer],

  // ✅ 要素过滤：自定义要素过滤条件
  filter: (feature, layer) => {
    return feature.get('selectable') !== false;
  }
});

🔧 基础选择功能

创建选择管理器

import { Map, View, Feature } from 'ol';
import { Select } from 'ol/interaction';
import { Vector as VectorLayer } from 'ol/layer';
import { Vector as VectorSource } from 'ol/source';
import { Style, Fill, Stroke, Circle } from 'ol/style';
import { click, pointerMove, altKeyOnly, shiftKeyOnly } from 'ol/events/condition';

class FeatureSelectionManager {
  constructor(map, options = {}) {
    this.map = map;
    this.options = {
      hitTolerance: 5,
      enableMultiSelect: true,
      enableHover: true,
      maxSelections: 100,
      ...options
    };

    this.selectInteraction = null;
    this.hoverInteraction = null;
    this.selectedFeatures = new Set();
    this.selectionHistory = [];
    this.historyIndex = -1;

    this.initializeInteractions();
    this.setupEventHandlers();
  }

  // 初始化选择交互
  initializeInteractions() {
    // 主选择交互
    this.selectInteraction = new Select({
      condition: click,
      addCondition: this.options.enableMultiSelect ? shiftKeyOnly : undefined,
      removeCondition: this.options.enableMultiSelect ? altKeyOnly : undefined,
      toggleCondition: this.options.enableMultiSelect ? shiftKeyOnly : undefined,
      multi: this.options.enableMultiSelect,
      hitTolerance: this.options.hitTolerance,
      style: this.createSelectionStyle(),
      filter: this.createSelectionFilter()
    });

    // 悬停交互
    if (this.options.enableHover) {
      this.hoverInteraction = new Select({
        condition: pointerMove,
        hitTolerance: this.options.hitTolerance,
        style: this.createHoverStyle(),
        filter: this.createSelectionFilter()
      });
    }

    // 添加到地图
    this.map.addInteraction(this.selectInteraction);
    if (this.hoverInteraction) {
      this.map.addInteraction(this.hoverInteraction);
    }
  }

  // 创建选择样式
  createSelectionStyle() {
    return new Style({
      fill: new Fill({
        color: 'rgba(255, 255, 0, 0.3)'
      }),
      stroke: new Stroke({
        color: '#ffff00',
        width: 3
      }),
      image: new Circle({
        radius: 8,
        fill: new Fill({
          color: '#ffff00'
        }),
        stroke: new Stroke({
          color: '#ffffff',
          width: 2
        })
      })
    });
  }

  // 创建悬停样式
  createHoverStyle() {
    return new Style({
      fill: new Fill({
        color: 'rgba(0, 255, 255, 0.2)'
      }),
      stroke: new Stroke({
        color: '#00ffff',
        width: 2,
        lineDash: [5, 5]
      }),
      image: new Circle({
        radius: 7,
        fill: new Fill({
          color: '#00ffff'
        }),
        stroke: new Stroke({
          color: '#ffffff',
          width: 1
        })
      })
    });
  }

  // 创建选择过滤器
  createSelectionFilter() {
    return (feature, layer) => {
      // 检查要素是否可选择
      if (feature.get('selectable') === false) {
        return false;
      }

      // 检查图层是否可选择
      if (layer && layer.get('selectable') === false) {
        return false;
      }

      // 检查选择数量限制
      if (this.selectedFeatures.size >= this.options.maxSelections) {
        return this.selectedFeatures.has(feature);
      }

      return true;
    };
  }

  // 设置事件处理器
  setupEventHandlers() {
    // 选择事件
    this.selectInteraction.on('select', (event) => {
      this.handleSelection(event);
    });

    // 悬停事件
    if (this.hoverInteraction) {
      this.hoverInteraction.on('select', (event) => {
        this.handleHover(event);
      });
    }
  }

  // 处理选择事件
  handleSelection(event) {
    const selected = event.selected;
    const deselected = event.deselected;

    // 更新选择集合
    deselected.forEach(feature => {
      this.selectedFeatures.delete(feature);
    });

    selected.forEach(feature => {
      this.selectedFeatures.add(feature);
    });

    // 保存选择历史
    this.saveSelectionState();

    // 触发自定义事件
    this.map.dispatchEvent({
      type: 'featureselection:change',
      selected: selected,
      deselected: deselected,
      allSelected: Array.from(this.selectedFeatures)
    });
  }

  // 处理悬停事件
  handleHover(event) {
    const hoveredFeature = event.selected.length > 0 ? event.selected[0] : null;

    this.map.dispatchEvent({
      type: 'featureselection:hover',
      feature: hoveredFeature
    });
  }

  // 保存选择状态
  saveSelectionState() {
    const state = Array.from(this.selectedFeatures);

    // 移除当前位置之后的历史
    this.selectionHistory = this.selectionHistory.slice(0, this.historyIndex + 1);

    // 添加新状态
    this.selectionHistory.push(state);
    this.historyIndex++;

    // 限制历史大小
    if (this.selectionHistory.length > 50) {
      this.selectionHistory.shift();
      this.historyIndex--;
    }
  }
}

🎯 高级选择模式

多种选择模式实现

class AdvancedSelectionModes {
  constructor(selectionManager) {
    this.selectionManager = selectionManager;
    this.currentMode = 'single';
    this.modes = {
      single: this.createSingleSelectMode(),
      multi: this.createMultiSelectMode(),
      box: this.createBoxSelectMode(),
      lasso: this.createLassoSelectMode(),
      radius: this.createRadiusSelectMode()
    };
  }

  // 单选模式
  createSingleSelectMode() {
    return {
      name: 'single',
      description: '单击选择单个要素',
      configure: (selectInteraction) => {
        selectInteraction.setProperties({
          condition: click,
          addCondition: undefined,
          removeCondition: undefined,
          toggleCondition: undefined,
          multi: false
        });
      }
    };
  }

  // 多选模式
  createMultiSelectMode() {
    return {
      name: 'multi',
      description: 'Shift+单击多选，Alt+单击取消选择',
      configure: (selectInteraction) => {
        selectInteraction.setProperties({
          condition: click,
          addCondition: shiftKeyOnly,
          removeCondition: altKeyOnly,
          toggleCondition: shiftKeyOnly,
          multi: true
        });
      }
    };
  }

  // 框选模式
  createBoxSelectMode() {
    return {
      name: 'box',
      description: 'Shift+拖拽框选要素',
      configure: (selectInteraction) => {
        // 需要额外的 DragBox 交互
        import('ol/interaction/DragBox').then(({ DragBox }) => {
          const dragBox = new DragBox({
            condition: shiftKeyOnly
          });

          dragBox.on('boxend', () => {
            const extent = dragBox.getGeometry().getExtent();
            this.selectFeaturesInExtent(extent);
          });

          this.selectionManager.map.addInteraction(dragBox);
          this.dragBoxInteraction = dragBox;
        });
      }
    };
  }

  // 套索选择模式
  createLassoSelectMode() {
    return {
      name: 'lasso',
      description: '绘制套索选择要素',
      configure: (selectInteraction) => {
        // 实现套索选择逻辑
        this.setupLassoSelection();
      }
    };
  }

  // 半径选择模式
  createRadiusSelectMode() {
    return {
      name: 'radius',
      description: '点击中心，拖拽设置半径选择',
      configure: (selectInteraction) => {
        this.setupRadiusSelection();
      }
    };
  }

  // 切换选择模式
  setMode(modeName) {
    if (this.modes[modeName]) {
      this.currentMode = modeName;
      const mode = this.modes[modeName];
      mode.configure(this.selectionManager.selectInteraction);

      // 清理之前的交互
      this.cleanupPreviousMode();

      console.log(`切换到选择模式: ${mode.description}`);
    }
  }

  // 在范围内选择要素
  selectFeaturesInExtent(extent) {
    const selectedFeatures = this.selectionManager.selectInteraction.getFeatures();

    this.selectionManager.map.getLayers().forEach(layer => {
      if (layer instanceof VectorLayer) {
        const source = layer.getSource();
        const features = source.getFeaturesInExtent(extent);

        features.forEach(feature => {
          if (this.selectionManager.createSelectionFilter()(feature, layer)) {
            selectedFeatures.push(feature);
          }
        });
      }
    });
  }

  // 清理之前模式的交互
  cleanupPreviousMode() {
    if (this.dragBoxInteraction) {
      this.selectionManager.map.removeInteraction(this.dragBoxInteraction);
      this.dragBoxInteraction = null;
    }

    if (this.lassoInteraction) {
      this.selectionManager.map.removeInteraction(this.lassoInteraction);
      this.lassoInteraction = null;
    }
  }
}

⚡ 性能优化

Context7 验证的选择性能优化

// ✅ Context7 验证：大数据量要素选择的性能优化
class PerformantFeatureSelection {
  constructor(map, options = {}) {
    this.map = map;
    this.options = {
      // 使用空间索引加速查找
      enableSpatialIndex: true,
      // 选择缓存大小
      selectionCacheSize: 1000,
      // 批量处理大小
      batchSize: 100,
      // 渲染缓冲区大小（Context7 验证的重要配置）
      renderBuffer: 200,
      ...options
    };

    this.selectionCache = new Map();
    this.spatialIndex = null;
    this.performanceMetrics = {
      selectionTime: [],
      renderTime: [],
      cacheHits: 0,
      cacheMisses: 0
    };

    this.initializeOptimizations();
  }

  // 初始化性能优化
  initializeOptimizations() {
    // 设置渲染缓冲区
    this.map.getLayers().forEach(layer => {
      if (layer instanceof VectorLayer) {
        layer.set('renderBuffer', this.options.renderBuffer);
      }
    });

    // 初始化空间索引
    if (this.options.enableSpatialIndex) {
      this.initializeSpatialIndex();
    }

    // 设置选择缓存
    this.setupSelectionCache();
  }

  // 初始化空间索引
  initializeSpatialIndex() {
    // 使用 RBush 空间索引库
    import('rbush').then(({ default: RBush }) => {
      this.spatialIndex = new RBush();
      this.buildSpatialIndex();
    });
  }

  // 构建空间索引
  buildSpatialIndex() {
    const startTime = performance.now();

    this.map.getLayers().forEach(layer => {
      if (layer instanceof VectorLayer) {
        const source = layer.getSource();
        const features = source.getFeatures();

        const indexItems = features.map(feature => {
          const extent = feature.getGeometry().getExtent();
          return {
            minX: extent[0],
            minY: extent[1],
            maxX: extent[2],
            maxY: extent[3],
            feature: feature,
            layer: layer
          };
        });

        this.spatialIndex.load(indexItems);
      }
    });

    const buildTime = performance.now() - startTime;
    console.log(`空间索引构建完成，耗时: ${buildTime.toFixed(2)}ms`);
  }

  // 优化的要素查找
  findFeaturesAtPixel(pixel, options = {}) {
    const startTime = performance.now();

    // 生成缓存键
    const cacheKey = `${pixel[0]}_${pixel[1]}_${options.hitTolerance || 5}`;

    // 检查缓存
    if (this.selectionCache.has(cacheKey)) {
      this.performanceMetrics.cacheHits++;
      return this.selectionCache.get(cacheKey);
    }

    this.performanceMetrics.cacheMisses++;

    let features = [];

    if (this.spatialIndex) {
      // 使用空间索引查找
      features = this.findFeaturesWithSpatialIndex(pixel, options);
    } else {
      // 使用默认方法
      features = this.map.getFeaturesAtPixel(pixel, {
        hitTolerance: options.hitTolerance || 5,
        layerFilter: options.layerFilter
      });
    }

    // 缓存结果
    this.cacheSelectionResult(cacheKey, features);

    const selectionTime = performance.now() - startTime;
    this.performanceMetrics.selectionTime.push(selectionTime);

    return features;
  }

  // 使用空间索引查找要素
  findFeaturesWithSpatialIndex(pixel, options) {
    const coordinate = this.map.getCoordinateFromPixel(pixel);
    const tolerance = (options.hitTolerance || 5) * this.map.getView().getResolution();

    const searchExtent = [
      coordinate[0] - tolerance,
      coordinate[1] - tolerance,
      coordinate[0] + tolerance,
      coordinate[1] + tolerance
    ];

    const candidates = this.spatialIndex.search({
      minX: searchExtent[0],
      minY: searchExtent[1],
      maxX: searchExtent[2],
      maxY: searchExtent[3]
    });

    // 精确命中检测
    return candidates.filter(item => {
      const geometry = item.feature.getGeometry();
      return geometry.intersectsCoordinate(coordinate);
    }).map(item => item.feature);
  }

  // 缓存选择结果
  cacheSelectionResult(key, features) {
    // 限制缓存大小
    if (this.selectionCache.size >= this.options.selectionCacheSize) {
      const firstKey = this.selectionCache.keys().next().value;
      this.selectionCache.delete(firstKey);
    }

    this.selectionCache.set(key, features);
  }

  // 批量选择处理
  async batchSelectFeatures(features, callback) {
    const batches = [];
    for (let i = 0; i < features.length; i += this.options.batchSize) {
      batches.push(features.slice(i, i + this.options.batchSize));
    }

    for (const batch of batches) {
      await new Promise(resolve => {
        requestAnimationFrame(() => {
          callback(batch);
          resolve();
        });
      });
    }
  }

  // 获取性能指标
  getPerformanceMetrics() {
    const avgSelectionTime = this.performanceMetrics.selectionTime.length > 0
      ? this.performanceMetrics.selectionTime.reduce((a, b) => a + b) / this.performanceMetrics.selectionTime.length
      : 0;

    const cacheHitRate = this.performanceMetrics.cacheHits + this.performanceMetrics.cacheMisses > 0
      ? this.performanceMetrics.cacheHits / (this.performanceMetrics.cacheHits + this.performanceMetrics.cacheMisses)
      : 0;

    return {
      averageSelectionTime: avgSelectionTime.toFixed(2) + 'ms',
      cacheHitRate: (cacheHitRate * 100).toFixed(1) + '%',
      totalSelections: this.performanceMetrics.selectionTime.length,
      cacheSize: this.selectionCache.size
    };
  }

  // 清理缓存
  clearCache() {
    this.selectionCache.clear();
    this.performanceMetrics = {
      selectionTime: [],
      renderTime: [],
      cacheHits: 0,
      cacheMisses: 0
    };
  }
}

大数据量选择策略

// ✅ Context7 验证：处理大量要素的选择策略
class LargeDatasetSelectionStrategy {
  constructor(map, options = {}) {
    this.map = map;
    this.options = {
      maxVisibleFeatures: 1000,
      clusterThreshold: 500,
      levelOfDetail: true,
      virtualScrolling: true,
      ...options
    };

    this.visibilityManager = new FeatureVisibilityManager();
    this.clusterManager = new SelectionClusterManager();
  }

  // 基于缩放级别的选择策略
  createLevelOfDetailSelection() {
    return (feature, layer) => {
      const zoom = this.map.getView().getZoom();
      const importance = feature.get('importance') || 1;

      // 根据缩放级别和重要性决定是否显示
      if (zoom < 10) {
        return importance > 8; // 只显示重要要素
      } else if (zoom < 15) {
        return importance > 5; // 显示中等重要要素
      } else {
        return true; // 显示所有要素
      }
    };
  }

  // 虚拟滚动选择
  createVirtualScrollingSelection() {
    const viewExtent = this.map.getView().calculateExtent();
    const buffer = this.map.getView().getResolution() * 100; // 缓冲区

    const extendedExtent = [
      viewExtent[0] - buffer,
      viewExtent[1] - buffer,
      viewExtent[2] + buffer,
      viewExtent[3] + buffer
    ];

    return (feature, layer) => {
      const geometry = feature.getGeometry();
      return geometry.intersectsExtent(extendedExtent);
    };
  }

  // 聚合选择管理
  setupClusterSelection() {
    import('ol/source/Cluster').then(({ Cluster }) => {
      const clusterSource = new Cluster({
        distance: 40,
        source: this.originalSource,
        geometryFunction: (feature) => {
          // 只有在要素数量超过阈值时才聚合
          const totalFeatures = this.originalSource.getFeatures().length;
          if (totalFeatures > this.options.clusterThreshold) {
            return feature.getGeometry();
          }
          return null; // 不聚合
        }
      });

      // 处理聚合要素的选择
      this.handleClusterSelection(clusterSource);
    });
  }

  // 处理聚合要素选择
  handleClusterSelection(clusterSource) {
    const selectInteraction = new Select({
      condition: click,
      style: (feature) => {
        const features = feature.get('features');
        if (features && features.length > 1) {
          // 聚合要素样式
          return this.createClusterSelectionStyle(features.length);
        } else {
          // 单个要素样式
          return this.createSingleSelectionStyle();
        }
      }
    });

    selectInteraction.on('select', (event) => {
      const selectedFeature = event.selected[0];
      if (selectedFeature) {
        const clusteredFeatures = selectedFeature.get('features');
        if (clusteredFeatures && clusteredFeatures.length > 1) {
          // 展开聚合要素
          this.expandCluster(clusteredFeatures, selectedFeature.getGeometry().getCoordinates());
        }
      }
    });
  }
}

📊 性能监控和基准测试

Context7 验证的性能改进 (2024-12-19)

// ✅ Context7 验证：要素选择过程的显著性能优化
// OpenLayers 10.5.0+ 包含了针对要素选择的重要性能改进

class PerformanceMonitoringSystem {
  constructor(map) {
    this.map = map;
    this.metrics = {
      selectionTimes: [],
      renderTimes: [],
      memoryUsage: [],
      featureCounts: [],
      interactionLatency: []
    };
    this.benchmarks = new Map();
    this.performanceObserver = null;

    this.initializePerformanceMonitoring();
  }

  // 初始化性能监控
  initializePerformanceMonitoring() {
    // 🆕 使用 Performance Observer API
    if ('PerformanceObserver' in window) {
      this.performanceObserver = new PerformanceObserver((list) => {
        const entries = list.getEntries();
        entries.forEach(entry => {
          if (entry.name.startsWith('ol-selection')) {
            this.metrics.selectionTimes.push({
              timestamp: entry.startTime,
              duration: entry.duration,
              type: entry.name
            });
          }
        });
      });

      this.performanceObserver.observe({ entryTypes: ['measure'] });
    }

    // 监控内存使用
    this.startMemoryMonitoring();

    // 监控渲染性能
    this.startRenderMonitoring();
  }

  // 🆕 基准测试：要素选择性能
  async benchmarkFeatureSelection(featureCounts = [100, 500, 1000, 5000, 10000]) {
    const results = [];

    for (const count of featureCounts) {
      console.log(`开始测试 ${count} 个要素的选择性能...`);

      // 生成测试数据
      const testFeatures = this.generateTestFeatures(count);
      const testLayer = this.createTestLayer(testFeatures);

      // 执行基准测试
      const benchmark = await this.runSelectionBenchmark(testLayer, count);
      results.push(benchmark);

      // 清理测试数据
      this.map.removeLayer(testLayer);

      // 等待垃圾回收
      await this.waitForGC();
    }

    return this.analyzeBenchmarkResults(results);
  }

  // 运行选择基准测试
  async runSelectionBenchmark(layer, featureCount) {
    const testPoints = this.generateRandomPixels(100); // 100个测试点
    const results = {
      featureCount: featureCount,
      selectionTimes: [],
      averageTime: 0,
      minTime: Infinity,
      maxTime: 0,
      memoryBefore: 0,
      memoryAfter: 0
    };

    // 记录初始内存
    results.memoryBefore = this.getCurrentMemoryUsage();

    // 预热
    for (let i = 0; i < 10; i++) {
      const pixel = testPoints[i % testPoints.length];
      this.map.getFeaturesAtPixel(pixel);
    }

    // 正式测试
    for (const pixel of testPoints) {
      const startTime = performance.now();

      // ✅ 使用 Context7 验证的优化方法
      performance.mark('ol-selection-start');
      const features = this.map.getFeaturesAtPixel(pixel, {
        hitTolerance: 5,
        layerFilter: (layer) => layer === layer
      });
      performance.mark('ol-selection-end');
      performance.measure('ol-selection-duration', 'ol-selection-start', 'ol-selection-end');

      const endTime = performance.now();
      const duration = endTime - startTime;

      results.selectionTimes.push(duration);
      results.minTime = Math.min(results.minTime, duration);
      results.maxTime = Math.max(results.maxTime, duration);
    }

    // 计算平均时间
    results.averageTime = results.selectionTimes.reduce((a, b) => a + b, 0) / results.selectionTimes.length;

    // 记录最终内存
    results.memoryAfter = this.getCurrentMemoryUsage();

    return results;
  }

  // 🆕 实时性能监控仪表板
  createPerformanceDashboard() {
    const dashboard = {
      // 选择性能指标
      selectionMetrics: {
        averageTime: this.calculateAverageSelectionTime(),
        p95Time: this.calculatePercentile(this.metrics.selectionTimes, 95),
        p99Time: this.calculatePercentile(this.metrics.selectionTimes, 99),
        throughput: this.calculateSelectionThroughput()
      },

      // 渲染性能指标
      renderMetrics: {
        fps: this.calculateAverageFPS(),
        frameDrops: this.countFrameDrops(),
        renderTime: this.calculateAverageRenderTime()
      },

      // 内存使用指标
      memoryMetrics: {
        current: this.getCurrentMemoryUsage(),
        peak: this.getPeakMemoryUsage(),
        trend: this.getMemoryTrend()
      },

      // 交互延迟指标
      interactionMetrics: {
        averageLatency: this.calculateAverageInteractionLatency(),
        maxLatency: this.getMaxInteractionLatency()
      }
    };

    return dashboard;
  }

  // 🆕 性能优化建议系统
  generateOptimizationRecommendations() {
    const recommendations = [];
    const dashboard = this.createPerformanceDashboard();

    // 选择性能建议
    if (dashboard.selectionMetrics.averageTime > 10) {
      recommendations.push({
        type: 'selection',
        priority: 'high',
        issue: '要素选择时间过长',
        suggestion: '考虑使用空间索引或减少 hitTolerance',
        code: `
// 使用空间索引优化
const spatialIndex = new RBush();
spatialIndex.load(features.map(f => ({
  minX: extent[0], minY: extent[1],
  maxX: extent[2], maxY: extent[3],
  feature: f
})));
        `
      });
    }

    // 渲染性能建议
    if (dashboard.renderMetrics.fps < 30) {
      recommendations.push({
        type: 'rendering',
        priority: 'medium',
        issue: 'FPS 过低',
        suggestion: '减少要素数量或使用聚合',
        code: `
// 使用聚合减少渲染负担
const clusterSource = new Cluster({
  distance: 40,
  source: vectorSource
});
        `
      });
    }

    // 内存使用建议
    if (dashboard.memoryMetrics.current > 100 * 1024 * 1024) { // 100MB
      recommendations.push({
        type: 'memory',
        priority: 'high',
        issue: '内存使用过高',
        suggestion: '实现要素池化或虚拟化',
        code: `
// 实现要素池化
class FeaturePool {
  constructor(maxSize = 1000) {
    this.pool = [];
    this.maxSize = maxSize;
  }

  getFeature() {
    return this.pool.pop() || new Feature();
  }

  releaseFeature(feature) {
    if (this.pool.length < this.maxSize) {
      feature.setGeometry(null);
      feature.setProperties({});
      this.pool.push(feature);
    }
  }
}
        `
      });
    }

    return recommendations;
  }

  // 🆕 A/B 测试框架
  async runABTest(testName, controlConfig, testConfig, iterations = 100) {
    const results = {
      testName: testName,
      control: { times: [], average: 0 },
      test: { times: [], average: 0 },
      improvement: 0,
      significance: 0
    };

    // 运行控制组测试
    for (let i = 0; i < iterations; i++) {
      const time = await this.runSingleTest(controlConfig);
      results.control.times.push(time);
    }

    // 运行测试组测试
    for (let i = 0; i < iterations; i++) {
      const time = await this.runSingleTest(testConfig);
      results.test.times.push(time);
    }

    // 计算结果
    results.control.average = this.calculateAverage(results.control.times);
    results.test.average = this.calculateAverage(results.test.times);
    results.improvement = ((results.control.average - results.test.average) / results.control.average) * 100;
    results.significance = this.calculateStatisticalSignificance(results.control.times, results.test.times);

    return results;
  }

  // 辅助方法
  generateTestFeatures(count) {
    const features = [];
    for (let i = 0; i < count; i++) {
      const feature = new Feature({
        geometry: new Point(fromLonLat([
          116.3 + Math.random() * 0.4,
          39.8 + Math.random() * 0.4
        ])),
        id: i,
        name: `Feature ${i}`,
        category: Math.random() > 0.5 ? 'A' : 'B'
      });
      features.push(feature);
    }
    return features;
  }

  generateRandomPixels(count) {
    const pixels = [];
    for (let i = 0; i < count; i++) {
      pixels.push([
        Math.random() * this.map.getSize()[0],
        Math.random() * this.map.getSize()[1]
      ]);
    }
    return pixels;
  }

  getCurrentMemoryUsage() {
    if ('memory' in performance) {
      return performance.memory.usedJSHeapSize;
    }
    return 0;
  }

  async waitForGC() {
    // 强制垃圾回收（如果可用）
    if (window.gc) {
      window.gc();
    }

    // 等待一段时间让垃圾回收完成
    await new Promise(resolve => setTimeout(resolve, 100));
  }

  calculatePercentile(values, percentile) {
    const sorted = values.map(v => v.duration || v).sort((a, b) => a - b);
    const index = Math.ceil((percentile / 100) * sorted.length) - 1;
    return sorted[index] || 0;
  }

  calculateStatisticalSignificance(control, test) {
    // 简化的 t-test 实现
    const controlMean = this.calculateAverage(control);
    const testMean = this.calculateAverage(test);
    const controlStd = this.calculateStandardDeviation(control, controlMean);
    const testStd = this.calculateStandardDeviation(test, testMean);

    const pooledStd = Math.sqrt(((controlStd ** 2) + (testStd ** 2)) / 2);
    const tStat = Math.abs(controlMean - testMean) / (pooledStd * Math.sqrt(2 / control.length));

    // 简化的 p-value 计算
    return tStat > 2.0 ? 0.05 : 0.1; // 粗略估计
  }

  calculateAverage(values) {
    return values.reduce((a, b) => a + b, 0) / values.length;
  }

  calculateStandardDeviation(values, mean) {
    const variance = values.reduce((acc, val) => acc + Math.pow(val - mean, 2), 0) / values.length;
    return Math.sqrt(variance);
  }
}

// 使用示例
const performanceMonitor = new PerformanceMonitoringSystem(map);

// 运行基准测试
performanceMonitor.benchmarkFeatureSelection().then(results => {
  console.log('基准测试结果:', results);

  // 生成优化建议
  const recommendations = performanceMonitor.generateOptimizationRecommendations();
  console.log('优化建议:', recommendations);
});

// 实时监控
setInterval(() => {
  const dashboard = performanceMonitor.createPerformanceDashboard();
  console.log('性能仪表板:', dashboard);
}, 5000);