概述

IconImageCache 类的目的是为了缓存图标图像及其相关的模式（pattern），提高渲染性能，避免重复加载和创建图像。

源码分析

IconImageCache类的源码实现

IconImageCache的源码实现如下：

class IconImageCache {
  constructor() {
    this.cache_ = {};
    this.patternCache_ = {};
    this.cacheSize_ = 0;
    this.maxCacheSize_ = 32;
  }
  clear() {
    this.cache_ = {};
    this.patternCache_ = {};
    this.cacheSize_ = 0;
  }
  canExpireCache() {
    return this.cacheSize_ > this.maxCacheSize_;
  }
  expire() {
    if (this.canExpireCache()) {
      let i = 0;
      for (const key in this.cache_) {
        const iconImage = this.cache_[key];
        if ((i++ & 3) === 0 && !iconImage.hasListener()) {
          delete this.cache_[key];
          delete this.patternCache_[key];
          --this.cacheSize_;
        }
      }
    }
  }
  get(src, crossOrigin, color) {
    const key = getCacheKey(src, crossOrigin, color);
    return key in this.cache_ ? this.cache_[key] : null;
  }
  getPattern(src, crossOrigin, color) {
    const key = getCacheKey(src, crossOrigin, color);
    return key in this.patternCache_ ? this.patternCache_[key] : null;
  }
  set(src, crossOrigin, color, iconImage, pattern) {
    const key = getCacheKey(src, crossOrigin, color);
    const update = key in this.cache_;
    this.cache_[key] = iconImage;
    if (pattern) {
      if (iconImage.getImageState() === ImageState.IDLE) {
        iconImage.load();
      }
      if (iconImage.getImageState() === ImageState.LOADING) {
        iconImage.ready().then(() => {
          this.patternCache_[key] = getSharedCanvasContext2D().createPattern(
            iconImage.getImage(1),
            "repeat"
          );
        });
      } else {
        this.patternCache_[key] = getSharedCanvasContext2D().createPattern(
          iconImage.getImage(1),
          "repeat"
        );
      }
    }
    if (!update) {
      ++this.cacheSize_;
    }
  }
  setSize(maxCacheSize) {
    this.maxCacheSize_ = maxCacheSize;
    this.expire();
  }
}

export function getCacheKey(src, crossOrigin, color) {
  const colorString = color ? asArray(color) : "null";
  return crossOrigin + ":" + src + ":" + colorString;
}

IconImageCache类的构造函数

IconImageCache类的构造函数中定义了如下变量：

• cache_：存储图标图像的缓存。

• patternCache_：存储图标图案的缓存，通常是图像的某种重复模式。

• cacheSize_：当前缓存中图标图像的数量。

• maxCacheSize_：缓存中可以存储的最大图像数量，默认值为 32

IconImageCache类中的主要方法

IconImageCache类中的主要方法如下：

• clear()：该方法用于清空缓存，将 cache_ 和 patternCache_ 重新设置为空对象，同时将缓存大小 cacheSize_ 重置为 0。

• canExpireCache()：该方法检查当前缓存的大小是否超过了最大缓存限制。如果缓存的图像数量超过最大缓存大小，则返回 true，表示缓存可以过期。

• expire()：清理过期的缓存。如果缓存的图像数量超过最大缓存限制，调用此方法会检查缓存，并删除一些不再使用的图像和图案。通过遍历 cache_ 中的图像，如果图像没有事件监听器（hasListener() 返回 false），则认为该图像不再需要，删除它，并减少缓存的大小。

• get(src,crossOrigin,color)：获取图像缓存。根据给定的图像源 src、跨域设置 crossOrigin 和颜色 color，生成一个唯一的缓存键（key）。如果缓存中存在该图像，则返回它；否则返回 null。

• getPattern(src, crossOrigin, color)：获取图案缓存，与 get 方法类似，获取与图标相关的图案缓存。如果缓存中存在图案，则返回图案；否则返回 null。

• set(src, crossOrigin, color, iconImage, pattern)：设置图像和图案缓存。

  • 该方法将图标图像（iconImage）和图案（pattern）存入缓存中。
  • iconImage 会根据给定的 src、crossOrigin 和 color 生成唯一的 key，如果缓存中已经存在相同的图像，会更新缓存，否则将缓存大小加 1。
  • 如果 pattern 为 true，还会根据图像创建一个重复模式的图案，并将其缓存。
  • ImageState 用来检查图像加载状态，并确保图像加载完成后才能创建图案。

• setSize(maxCacheSize)：该方法用于设置缓存的最大大小（maxCacheSize），并调用 expire 方法清理超过最大缓存限制的图像。

总结

IconImageCache 类主要用于管理图标图像及其图案的缓存，提供了缓存清理、缓存过期、图像和图案获取、设置缓存的功能。通过这种方式，Openlayers 可以避免重复加载和创建图像，从而提升渲染性能