源码分析之Openlayers中样式篇Icon类

访问Openlayers网站(https://jinuss.github.io/Openlayers_map_pages/，网站是基于Vue3 + Openlayers，里面有大量的实践和案例。觉得还不错，可以 给个小星星Star，鼓励一波 https://github.com/Jinuss/OpenlayersMap哦~

概述

在 Openlayers 中，Icon类用于创建图标，通常用于在地图上显示标记或图像元素。这个类可以通过设置图标的各种属性（如大小、图像源、锚点等）来控制图标的外观和位置。

Icon类继承于ImageStyle类，关于ImageStyle类，可以参考这篇文章源码分析之Openlayers中样式篇ImageStyle类。

源码分析

Icon类源码实现

Icon类源码实现如下：

class Icon extends ImageStyle {
   
   
  constructor(options) {
   
   
    options = options || {
   
   };
    // 透明度
    const opacity = options.opacity !== undefined ? options.opacity : 1;
    // 旋转角度
    const rotation = options.rotation !== undefined ? options.rotation : 0;
    // 缩放大小
    const scale = options.scale !== undefined ? options.scale : 1;
    //是否跟随地图旋转
    const rotateWithView =
      options.rotateWithView !== undefined ? options.rotateWithView : false;

    super({
   
   
      opacity: opacity,
      rotation: rotation,
      scale: scale,
      displacement:
        options.displacement !== undefined ? options.displacement : [0, 0],
      rotateWithView: rotateWithView,
      declutterMode: options.declutterMode,
    });

    //锚点相关
    //图标相对锚点的位置
    this.anchor_ = options.anchor !== undefined ? options.anchor : [0.5, 0.5];
    this.normalizedAnchor_ = null;
    //锚点的原点
    this.anchorOrigin_ =
      options.anchorOrigin !== undefined ? options.anchorOrigin : "top-left";
    // 锚点水平方向的单位
    this.anchorXUnits_ =
      options.anchorXUnits !== undefined ? options.anchorXUnits : "fraction";
    // 锚点垂直方向的位置
    this.anchorYUnits_ =
      options.anchorYUnits !== undefined ? options.anchorYUnits : "fraction";
    // 用于设置跨域请求的策略，默认为null
    this.crossOrigin_ =
      options.crossOrigin !== undefined ? options.crossOrigin : null;
    // 图标的图像
    const image = options.img !== undefined ? options.img : null;
    // 图像的唯一标识
    let cacheKey = options.src;

    assert(
      !(cacheKey !== undefined && image),
      "`image` and `src` cannot be provided at the same time"
    );

    if ((cacheKey === undefined || cacheKey.length === 0) && image) {
   
   
      cacheKey = /** @type {HTMLImageElement} */ (image).src || getUid(image);
    }
    assert(
      cacheKey !== undefined && cacheKey.length > 0,
      "A defined and non-empty `src` or `image` must be provided"
    );

    assert(
      !(
        (options.width !== undefined || options.height !== undefined) &&
        options.scale !== undefined
      ),
      "`width` or `height` cannot be provided together with `scale`"
    );

    let imageState; //图像状态
    if (options.src !== undefined) {
   
   
      imageState = ImageState.IDLE;
    }