源码分析之Openlayers样式篇IconImage类

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

概述

在 Openlayers 中，IconImage类主要用于表示一个图标图像对象，它包含了图像的各种信息，如图像本身、尺寸、源 URL、跨域访问设置、颜色、状态等。它继承自 EventTarget类，意味着 IconImage 实例可以作为事件目标，允许事件监听和触发。

关于EventTarget类，可以参考这篇文章源码分析之Openlayers的核心EventTarget类的实现

源码分析

`IconImage`类的源码实现

IconImage类的源码实现如下：

class IconImage extends EventTarget {constructor(image, src, crossOrigin, imageState, color) {super();this.hitDetectionImage_ = null;this.image_ = image;this.crossOrigin_ = crossOrigin;this.canvas_ = {};this.color_ = color;this.imageState_ = imageState === undefined ? ImageState.IDLE : imageState;this.size_ =image && image.width && image.height ? [image.width, image.height] : null;this.src_ = src;this.tainted_;this.ready_ = null;}initializeImage_() {this.image_ = new Image();if (this.crossOrigin_ !== null) {this.image_.crossOrigin = this.crossOrigin_;}}isTainted_() {if (this.tainted_ === undefined && this.imageState_ === ImageState.LOADED) {if (!taintedTestContext) {taintedTestContext = createCanvasContext2D(1, 1, undefined, {willReadFrequently: true,});}taintedTestContext.drawImage(this.image_, 0, 0);try {taintedTestContext.getImageData(0, 0, 1, 1);this.tainted_ = false;} catch (e) {taintedTestContext = null;this.tainted_ = true;}}return this.tainted_ === true;}dispatchChangeEvent_() {this.dispatchEvent(EventType.CHANGE);}handleImageError_() {this.imageState_ = ImageState.ERROR;this.dispatchChangeEvent_();}handleImageLoad_() {this.imageState_ = ImageState.LOADED;this.size_ = [this.image_.width, this.image_.height];this.dispatchChangeEvent_();}getImage(pixelRatio) {if (!this.image_) {this.initializeImage_();}this.replaceColor_(pixelRatio);return this.canvas_[pixelRatio] ? this.canvas_[pixelRatio] : this.image_;}getPixelRatio(pixelRatio) {this.replaceColor_(pixelRatio);return this.canvas_[pixelRatio] ? pixelRatio : 1;}getImageState() {return this.imageState_;}getHitDetectionImage() {if (!this.image_) {this.initializeImage_();}if (!this.hitDetectionImage_) {if (this.isTainted_()) {const width = this.size_[0];const height = this.size_[1];const context = createCanvasContext2D(width, height);context.fillRect(0, 0, width, height);this.hitDetectionImage_ = context.canvas;} else {this.hitDetectionImage_ = this.image_;}}return this.hitDetectionImage_;}getSize() {return this.size_;}getSrc() {return this.src_;}load() {if (this.imageState_ !== ImageState.IDLE) {return;}if (!this.image_) {this.initializeImage_();}this.imageState_ = ImageState.LOADING;try {if (this.src_ !== undefined) {this.image_.src = this.src_;}} catch (e) {this.handleImageError_();}if (this.image_ instanceof HTMLImageElement) {decodeFallback(this.image_, this.src_).then((image) => {this.image_ = image;this.handleImageLoad_();}).catch(this.handleImageError_.bind(this));}}replaceColor_(pixelRatio) {if (!this.color_ ||this.canvas_[pixelRatio] ||this.imageState_ !== ImageState.LOADED) {return;}const image = this.image_;const ctx = createCanvasContext2D(Math.ceil(image.width * pixelRatio),Math.ceil(image.height * pixelRatio));const canvas = ctx.canvas;ctx.scale(pixelRatio, pixelRatio);ctx.drawImage(image, 0, 0);ctx.globalCompositeOperation = "multiply";ctx.fillStyle = asString(this.color_);ctx.fillRect(0, 0, canvas.width / pixelRatio, canvas.height / pixelRatio);ctx.globalCompositeOperation = "destination-in";ctx.drawImage(image, 0, 0);this.canvas_[pixelRatio] = canvas;}ready() {if (!this.ready_) {this.ready_ = new Promise((resolve) => {if (this.imageState_ === ImageState.LOADED ||this.imageState_ === ImageState.ERROR) {resolve();} else {const onChange = () => {if (this.imageState_ === ImageState.LOADED ||this.imageState_ === ImageState.ERROR) {this.removeEventListener(EventType.CHANGE, onChange);resolve();}};this.addEventListener(EventType.CHANGE, onChange);}});}return this.ready_;}
}export function get(image, cacheKey, crossOrigin, imageState, color, pattern) {let iconImage =cacheKey === undefined? undefined: iconImageCache.get(cacheKey, crossOrigin, color);if (!iconImage) {iconImage = new IconImage(image,image && "src" in image ? image.src || undefined : cacheKey,crossOrigin,imageState,color);iconImageCache.set(cacheKey, crossOrigin, color, iconImage, pattern);}if (pattern &&iconImage &&!iconImageCache.getPattern(cacheKey, crossOrigin, color)) {iconImageCache.set(cacheKey, crossOrigin, color, iconImage, pattern);}return iconImage;
}

`IconImage`类的构造函数

IconImage类的构造函数内部就是初始化了一些属性，如下：

this.hitDetectionImage_：用于在进行图像点击检测时使用备用图像，默认为null
this.image_：设置 image_ 为传入的图像对象，用于存储图标的实际图像
this.crossOrigin_：设置 crossOrigin_ 为传入的跨域访问设置，用于处理图像加载时的跨域问题
this.canvas：初始化一个空的 canvas_ 对象，可能用于后续图像的绘制或缓存
this.color：设置图标的颜色属性，通常用于为图标添加颜色或修改现有颜色
this.imageState_：设置 imageState_ 为图像的当前状态，若没有提供 imageState，则默认为 ImageState.IDLE，表示图像处于待机状态。
this.size_：如果传入的 image 对象具有 width 和 height 属性，则 size_ 被设置为图像的宽高数组 [width, height]，否则设置为 null，表示图像没有明确的尺寸信息。
this.src_：设置 src_ 为传入的图像源 URL，用于指向图标图像的位置。
this.tainted_：初始化 tainted_ 属性，但未赋值。这个属性可能用于标记图像是否“污染”，通常与跨域图像加载有关，当图像的跨域访问被限制时，可能会被标记为污染。
this.ready：初始化 ready_ 为 null，该属性可能用于标识图像是否准备好，可以用于图像加载状态的判断.

`IconImage`类的主要方法

initializeImage_()方法：初始化图像，就是实例化一个Image对象，然后判断，若this.crossOrigin不为null，则将它设置成Image对象实例也就是属性this.image_的crossOrigin的属性值。
isTainted_()方法：用于检测图像是否由于跨域问题或安全策略而被污染。如果图像污染了，开发者就不能读取它的像素数据，这通常会影响一些图像处理或绘制操作。检测原理就是将其绘制到画布上，然后通过getImageData方法获取元素，若可以获取，则说明没有被污染；最后返回一个布尔值。
dispatchChangeEvent_()方法：内部就是调用父类的this.dispatchEvent方法
handleImageError_()方法：处理图片加载错误会调用该方法，会将this.imageState_标识为错误状态，然后调用this.dispatchChangeEvent_方法
handleImageLoad_()方法：图片加载完成会被调用，会将this.imageState_标识为已加载状态以及设置this.size图片的大小，然后调用this.dispatchChangeEvent_方法
getImage(pixelRatio)方法：根据像素比获取图片，先判断，若this.image_不存在，则调用this.initializeImage_进行初始化，然后调用this.replaceColor_方法，进行创建该像素比下的图像canvas，若该图像存在则返回，否则返回this.image_。
getPixelRatio(pixelRatio)方法:类似getImage(pixelRatio)方法，返回的是像素比，若this.canvas中不存在该像素比的图片，就返回1。
getImageState()方法：获取图像的状态
getHitDetectionImage()方法：如果图像未被污染，则返回原始图像；如果图像被污染，则返回一个替代的命中检测图像，这个替代图像的主要作用是用来进行交互检测。
getSize()方法：获取图像的大小，即this.size_
getSrc()方法：获取图像源
load()方法：负责加载图像，设置图像源，并处理加载过程中的成功或失败。该方法负责加载图像。它检查图像的当前状态，并在图像尚未加载时开始加载过程。经过一系列检查后，使用 decodeFallback 方法尝试解码图像。如果成功，调用 handleImageLoad_() 处理图像加载成功的逻辑。如果失败，调用 handleImageError_() 处理错误
replaceColor_(pixelRatio)方法：在图像上应用颜色，并处理高分辨率屏幕上的显示
ready()方法：返回一个 Promise，该 Promise 在图像加载完成后解决（或者在加载失败时解决）。它用于确保图像加载完成后执行某些操作