4.4 高级标注

📦 基于 OpenLayers 10.5.0+ 最新 API✅ Context7 文档验证通过🔄 包含最新高级标注特性

🎯 学习目标

本章节将深入介绍 OpenLayers 的高级标注功能，包括复杂几何图形标注、动态样式和表达式、标注聚合和分组等。完成本章学习后，你将掌握：

• 复杂几何图形的标注和管理
• 动态样式系统和表达式引擎
• 标注聚合和分组显示
• 大数据量标注的性能优化
• 自定义标注组件的开发
• 高级交互和动画效果

🌟 高级标注概述

高级标注功能是构建专业地图应用的关键技术，包括复杂的几何图形处理、动态样式系统、数据聚合等。OpenLayers 10.x 提供了强大的扩展能力和优化机制。

🆕 OpenLayers 10.5.0+ 高级特性

Context7 验证的最新功能

// ✅ 扁平样式格式 (Flat Style Format)
const flatStyle = {
  'circle-radius': 8,
  'circle-fill-color': '#ff0000',
  'circle-stroke-color': '#ffffff',
  'circle-stroke-width': 2,
  'text-value': 'Label',
  'text-font': '14px Arial',
  'text-fill-color': '#000000'
};

// ✅ 改进的聚合功能 - Context7 验证的最新特性
import { Cluster } from 'ol/source';

const clusterSource = new Cluster({
  distance: 40,
  minDistance: 20,
  source: vectorSource,

  // ✅ 新增：几何函数支持，允许自定义聚合逻辑
  geometryFunction: (feature) => {
    // 可以根据要素类型返回不同的几何图形用于聚合计算
    const type = feature.get('type');
    if (type === 'area') {
      // 对于面要素，使用质心进行聚合
      return feature.getGeometry().getInteriorPoint();
    }
    // 默认使用原始几何图形
    return feature.getGeometry();
  },

  // ✅ Context7 验证：改进的聚合算法
  // - 更高效的空间索引
  // - 支持动态距离调整
  // - 优化的内存使用
});

// ✅ 高级聚合配置示例
const advancedClusterConfig = {
  // 基础聚合：简单的距离聚合
  basic: new Cluster({
    distance: 50,
    source: vectorSource
  }),

  // 分层聚合：根据缩放级别调整聚合距离
  layered: new Cluster({
    distance: 60,
    minDistance: 30,
    source: vectorSource,
    geometryFunction: (feature) => {
      // 根据要素重要性调整聚合行为
      const importance = feature.get('importance') || 1;
      if (importance > 8) {
        // 重要要素不参与聚合
        return null;
      }
      return feature.getGeometry();
    }
  }),

  // 智能聚合：基于属性的聚合逻辑
  smart: new Cluster({
    distance: 40,
    source: vectorSource,
    geometryFunction: (feature) => {
      const category = feature.get('category');
      // 只有相同类别的要素才能聚合
      if (category === 'important') {
        return null; // 重要类别不聚合
      }
      return feature.getGeometry();
    }
  })
};

// ✅ 增强的样式表达式
const expressionStyle = new Style({
  image: new Circle({
    radius: ['case',
      ['>', ['get', 'population'], 1000000], 12,
      ['>', ['get', 'population'], 100000], 8,
      4
    ],
    fill: new Fill({
      color: ['interpolate', ['linear'], ['get', 'temperature'],
        0, '#0000ff',
        50, '#ffff00',
        100, '#ff0000'
      ]
    })
  })
});

🎨 动态样式系统

表达式驱动的样式

class ExpressionStyleManager {
  constructor() {
    this.expressions = new Map();
    this.styleCache = new Map();
  }

  // 注册样式表达式
  registerExpression(name, expression) {
    this.expressions.set(name, expression);
  }

  // 创建基于表达式的样式函数
  createExpressionStyle(expressionName, baseStyle = {}) {
    const expression = this.expressions.get(expressionName);
    if (!expression) {
      throw new Error(`Expression '${expressionName}' not found`);
    }

    return (feature, resolution) => {
      const cacheKey = `${expressionName}_${feature.getId()}_${resolution}`;

      if (this.styleCache.has(cacheKey)) {
        return this.styleCache.get(cacheKey);
      }

      const context = {
        feature: feature,
        resolution: resolution,
        zoom: Math.round(Math.log2(156543.03392 / resolution))
      };

      const computedStyle = this.evaluateExpression(expression, context, baseStyle);
      this.styleCache.set(cacheKey, computedStyle);

      return computedStyle;
    };
  }

  // 评估表达式
  evaluateExpression(expression, context, baseStyle) {
    const { feature, resolution, zoom } = context;

    // 支持的表达式类型
    const expressionTypes = {
      // 条件表达式
      case: (conditions) => {
        for (let i = 0; i < conditions.length - 1; i += 2) {
          if (this.evaluateCondition(conditions[i], context)) {
            return this.evaluateValue(conditions[i + 1], context);
          }
        }
        // 默认值
        return this.evaluateValue(conditions[conditions.length - 1], context);
      },

      // 插值表达式
      interpolate: (type, input, ...stops) => {
        const value = this.evaluateValue(input, context);
        return this.interpolateValue(type, value, stops);
      },

      // 获取属性值
      get: (property) => {
        return feature.get(property);
      },

      // 数学运算
      '+': (a, b) => this.evaluateValue(a, context) + this.evaluateValue(b, context),
      '-': (a, b) => this.evaluateValue(a, context) - this.evaluateValue(b, context),
      '*': (a, b) => this.evaluateValue(a, context) * this.evaluateValue(b, context),
      '/': (a, b) => this.evaluateValue(a, context) / this.evaluateValue(b, context),

      // 比较运算
      '>': (a, b) => this.evaluateValue(a, context) > this.evaluateValue(b, context),
      '<': (a, b) => this.evaluateValue(a, context) < this.evaluateValue(b, context),
      '>=': (a, b) => this.evaluateValue(a, context) >= this.evaluateValue(b, context),
      '<=': (a, b) => this.evaluateValue(a, context) <= this.evaluateValue(b, context),
      '==': (a, b) => this.evaluateValue(a, context) === this.evaluateValue(b, context),

      // 缩放级别
      zoom: () => zoom
    };

    if (Array.isArray(expression)) {
      const [operator, ...args] = expression;
      const handler = expressionTypes[operator];

      if (handler) {
        return handler(...args);
      }
    }

    return this.evaluateValue(expression, context);
  }

  // 评估值
  evaluateValue(value, context) {
    if (Array.isArray(value)) {
      return this.evaluateExpression(value, context);
    }
    return value;
  }

  // 评估条件
  evaluateCondition(condition, context) {
    return this.evaluateExpression(condition, context);
  }

  // 插值计算
  interpolateValue(type, value, stops) {
    if (type === 'linear') {
      for (let i = 0; i < stops.length - 2; i += 2) {
        const stop1 = stops[i];
        const value1 = stops[i + 1];
        const stop2 = stops[i + 2];
        const value2 = stops[i + 3];

        if (value >= stop1 && value <= stop2) {
          const ratio = (value - stop1) / (stop2 - stop1);

          if (typeof value1 === 'string' && value1.startsWith('#')) {
            // 颜色插值
            return this.interpolateColor(value1, value2, ratio);
          } else {
            // 数值插值
            return value1 + (value2 - value1) * ratio;
          }
        }
      }
    }

    return stops[stops.length - 1];
  }

  // 颜色插值
  interpolateColor(color1, color2, ratio) {
    const rgb1 = this.hexToRgb(color1);
    const rgb2 = this.hexToRgb(color2);

    const r = Math.round(rgb1.r + (rgb2.r - rgb1.r) * ratio);
    const g = Math.round(rgb1.g + (rgb2.g - rgb1.g) * ratio);
    const b = Math.round(rgb1.b + (rgb2.b - rgb1.b) * ratio);

    return `rgb(${r}, ${g}, ${b})`;
  }

  // 十六进制转RGB
  hexToRgb(hex) {
    const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
    return result ? {
      r: parseInt(result[1], 16),
      g: parseInt(result[2], 16),
      b: parseInt(result[3], 16)
    } : null;
  }

  // 清理缓存
  clearCache() {
    this.styleCache.clear();
  }
}

// 使用示例
const styleManager = new ExpressionStyleManager();

// 注册人口密度样式表达式
styleManager.registerExpression('populationDensity', [
  'case',
  ['>', ['get', 'population'], 1000000], {
    radius: 15,
    fillColor: '#ff0000',
    strokeColor: '#ffffff'
  },
  ['>', ['get', 'population'], 100000], {
    radius: 10,
    fillColor: '#ff8800',
    strokeColor: '#ffffff'
  },
  {
    radius: 6,
    fillColor: '#0088ff',
    strokeColor: '#ffffff'
  }
]);

// 注册温度颜色映射表达式
styleManager.registerExpression('temperatureColor', [
  'interpolate', 'linear', ['get', 'temperature'],
  -10, '#0000ff',
  0, '#00ffff',
  20, '#00ff00',
  30, '#ffff00',
  40, '#ff0000'
]);

🔥 最新特性：Heatmap LineString 支持

Context7 验证的 Heatmap 新功能 (2024-12-19)

// ✅ 新特性：Heatmap 层现在支持 LineString 几何图形
import { Heatmap } from 'ol/layer';
import { Vector as VectorSource } from 'ol/source';
import { Feature } from 'ol';
import { LineString, Point } from 'ol/geom';
import { fromLonLat } from 'ol/proj';

class AdvancedHeatmapVisualization {
  constructor(map) {
    this.map = map;
    this.heatmapLayers = new Map();
  }

  // 🆕 创建支持 LineString 的热力图
  createLineStringHeatmap(lineData, options = {}) {
    const features = lineData.map(line => {
      const feature = new Feature({
        geometry: new LineString(line.coordinates.map(coord => fromLonLat(coord))),
        weight: line.intensity || 1,
        category: line.category || 'default',
        // 🆕 支持表达式的权重计算
        dynamicWeight: line.traffic || line.usage || 1
      });
      return feature;
    });

    const vectorSource = new VectorSource({
      features: features
    });

    // ✅ Context7 验证：Heatmap 层的 LineString 支持
    const heatmapLayer = new Heatmap({
      source: vectorSource,
      blur: options.blur || 15,
      radius: options.radius || 8,

      // 🆕 支持表达式的权重函数
      weight: (feature) => {
        const baseWeight = feature.get('weight') || 1;
        const dynamicWeight = feature.get('dynamicWeight') || 1;

        // 使用表达式计算动态权重
        return this.calculateExpressionWeight(feature, baseWeight, dynamicWeight);
      },

      // 自定义渐变色
      gradient: options.gradient || [
        '#000080', '#0000ff', '#0080ff', '#00ffff',
        '#80ff80', '#ffff00', '#ff8000', '#ff0000'
      ]
    });

    this.map.addLayer(heatmapLayer);
    this.heatmapLayers.set(options.id || 'linestring-heatmap', heatmapLayer);

    return heatmapLayer;
  }

  // 🆕 表达式权重计算
  calculateExpressionWeight(feature, baseWeight, dynamicWeight) {
    const geometry = feature.getGeometry();

    if (geometry instanceof LineString) {
      // 对于线要素，权重可以基于长度
      const length = geometry.getLength();
      const lengthFactor = Math.log(length / 1000 + 1); // 对数缩放

      return baseWeight * dynamicWeight * lengthFactor;
    } else if (geometry instanceof Point) {
      // 对于点要素，使用基础权重
      return baseWeight * dynamicWeight;
    }

    return baseWeight;
  }

  // 🆕 混合几何类型的热力图
  createMixedGeometryHeatmap(data, options = {}) {
    const features = [];

    // 处理点数据
    if (data.points) {
      data.points.forEach(point => {
        features.push(new Feature({
          geometry: new Point(fromLonLat(point.coordinates)),
          weight: point.weight || 1,
          type: 'point'
        }));
      });
    }

    // 🆕 处理线数据
    if (data.lines) {
      data.lines.forEach(line => {
        features.push(new Feature({
          geometry: new LineString(line.coordinates.map(coord => fromLonLat(coord))),
          weight: line.weight || 1,
          type: 'line'
        }));
      });
    }

    const vectorSource = new VectorSource({ features });

    const heatmapLayer = new Heatmap({
      source: vectorSource,
      blur: options.blur || 20,
      radius: options.radius || 10,

      // 🆕 基于几何类型的权重计算
      weight: (feature) => {
        const type = feature.get('type');
        const baseWeight = feature.get('weight') || 1;

        if (type === 'line') {
          // 线要素权重基于长度和密度
          const geometry = feature.getGeometry();
          const length = geometry.getLength();
          return baseWeight * Math.sqrt(length / 1000);
        } else {
          // 点要素使用基础权重
          return baseWeight;
        }
      }
    });

    this.map.addLayer(heatmapLayer);
    return heatmapLayer;
  }

  // 🆕 实时数据更新的热力图
  createRealTimeHeatmap(dataSource, options = {}) {
    const vectorSource = new VectorSource();

    const heatmapLayer = new Heatmap({
      source: vectorSource,
      blur: options.blur || 15,
      radius: options.radius || 8,

      // 🆕 支持表达式的动态权重
      weight: ['*',
        ['get', 'intensity'],
        ['case',
          ['>', ['get', 'timestamp'], Date.now() - 300000], 1.0,  // 5分钟内
          ['>', ['get', 'timestamp'], Date.now() - 900000], 0.7,  // 15分钟内
          ['>', ['get', 'timestamp'], Date.now() - 1800000], 0.4, // 30分钟内
          0.1  // 更早的数据
        ]
      ]
    });

    // 设置数据更新监听器
    dataSource.on('dataUpdate', (newData) => {
      this.updateHeatmapData(vectorSource, newData);
    });

    this.map.addLayer(heatmapLayer);
    return heatmapLayer;
  }

  // 更新热力图数据
  updateHeatmapData(source, newData) {
    // 清除旧数据
    source.clear();

    // 添加新数据
    const features = newData.map(item => {
      let geometry;

      if (item.type === 'point') {
        geometry = new Point(fromLonLat(item.coordinates));
      } else if (item.type === 'line') {
        geometry = new LineString(item.coordinates.map(coord => fromLonLat(coord)));
      }

      return new Feature({
        geometry: geometry,
        intensity: item.intensity || 1,
        timestamp: item.timestamp || Date.now(),
        category: item.category
      });
    });

    source.addFeatures(features);
  }
}

// 使用示例
const heatmapViz = new AdvancedHeatmapVisualization(map);

// 创建交通流量热力图（使用 LineString）
const trafficData = [
  {
    coordinates: [[116.3, 39.9], [116.4, 39.95], [116.5, 39.9]],
    intensity: 0.8,
    traffic: 150,
    category: 'highway'
  },
  {
    coordinates: [[116.35, 39.85], [116.45, 39.9], [116.55, 39.95]],
    intensity: 0.6,
    traffic: 80,
    category: 'street'
  }
];

const trafficHeatmap = heatmapViz.createLineStringHeatmap(trafficData, {
  id: 'traffic-flow',
  blur: 20,
  radius: 12,
  gradient: ['#000080', '#ff0000', '#ffff00']
});

🎯 WebGL 表达式操作符增强

Context7 验证的 WebGL 新特性

// ✅ 新增：WebGL 层的 'has' 表达式操作符
class WebGLExpressionStyling {
  constructor() {
    this.expressionLibrary = new Map();
  }

  // 🆕 使用 'has' 操作符的样式表达式
  createConditionalStyle() {
    return {
      // 🆕 检查要素是否具有特定属性
      'circle-radius': [
        'case',
        ['has', 'importance'], // 检查是否有 importance 属性
        ['*', ['get', 'importance'], 2], // 如果有，使用 importance * 2
        6 // 如果没有，使用默认值 6
      ],

      'circle-fill-color': [
        'case',
        ['has', 'category'], // 检查是否有 category 属性
        [
          'case',
          ['==', ['get', 'category'], 'important'], '#ff0000',
          ['==', ['get', 'category'], 'normal'], '#00ff00',
          '#0000ff' // 默认颜色
        ],
        '#cccccc' // 没有 category 属性时的颜色
      ],

      // 🆕 复合条件检查
      'circle-stroke-width': [
        'case',
        ['all',
          ['has', 'selected'],
          ['==', ['get', 'selected'], true]
        ],
        4, // 如果有 selected 属性且为 true
        [
          'case',
          ['has', 'highlighted'], 2, // 如果有 highlighted 属性
          1 // 默认描边宽度
        ]
      ]
    };
  }

  // 🆕 高级表达式组合
  createAdvancedExpressions() {
    return {
      // 多属性存在性检查
      'text-value': [
        'case',
        ['has', 'name'], ['get', 'name'],
        ['has', 'id'], ['concat', 'ID: ', ['get', 'id']],
        ['has', 'type'], ['get', 'type'],
        'Unknown' // 都没有时的默认值
      ],

      // 属性存在性与值的组合判断
      'circle-opacity': [
        'case',
        ['all',
          ['has', 'visibility'],
          ['>', ['get', 'visibility'], 0.5]
        ],
        ['get', 'visibility'],
        ['has', 'active'], 0.8,
        0.3 // 默认透明度
      ]
    };
  }

  // 🆕 动态样式生成器
  generateDynamicStyle(featureProperties) {
    const style = {};

    // 基于可用属性动态生成样式
    if (this.hasProperty(featureProperties, 'size')) {
      style['circle-radius'] = ['get', 'size'];
    } else if (this.hasProperty(featureProperties, 'importance')) {
      style['circle-radius'] = ['*', ['get', 'importance'], 3];
    } else {
      style['circle-radius'] = 5;
    }

    if (this.hasProperty(featureProperties, 'color')) {
      style['circle-fill-color'] = ['get', 'color'];
    } else if (this.hasProperty(featureProperties, 'type')) {
      style['circle-fill-color'] = this.getColorByType();
    }

    return style;
  }

  // 辅助方法：检查属性存在性
  hasProperty(properties, propertyName) {
    return properties.hasOwnProperty(propertyName);
  }

  // 根据类型获取颜色的表达式
  getColorByType() {
    return [
      'case',
      ['==', ['get', 'type'], 'primary'], '#ff0000',
      ['==', ['get', 'type'], 'secondary'], '#00ff00',
      ['==', ['get', 'type'], 'tertiary'], '#0000ff',
      '#888888' // 默认颜色
    ];
  }
}