源码分析之Openlayers中ImageBuilder类

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

概述

在 Openlayers 中,CanvasImageBuilder类会将图片添加到对应坐标上，该类继承于CanvasBuilder类，关于CanvasBuilder类，可以参考这篇文章源码分析之Openlayers中CanvasBuilder类

源码分析

CanvasImageBuilder类的源码实现

CanvasImageBuilder类的源码实现如下:

class CanvasImageBuilder extends CanvasBuilder {
   
   
  constructor(tolerance, maxExtent, resolution, pixelRatio) {
   
   
    super(tolerance, maxExtent, resolution, pixelRatio);
    // 表示碰撞检测图像。碰撞检测用于帮助在地图中检测用户点击的位置是否与图像相关。
    this.hitDetectionImage_ = null;
    // 表示实际的图像对象。这个属性将存储用于绘制的图像。
    this.image_ = null;
    // 表示图像的像素比例。可以与 pixelRatio 属性结合使用，影响图像在不同设备上的显示效果
    this.imagePixelRatio_ = undefined;
    // anchorX_ 和 anchorY_ 分别表示图像的锚点位置。它们决定图像在渲染时的位置对齐方式。
    this.anchorX_ = undefined;
    this.anchorY_ = undefined;
    // 表示图像的高度，可能用于图像的大小调整
    this.height_ = undefined;
    // 表示图像的透明度，取值通常是从 0 到 1，决定图像的透明程度
    this.opacity_ = undefined;
    // originX_ 和 originY_ 分别表示图像的原点位置，这通常是图像在坐标系中的起点坐标。
    this.originX_ = undefined;
    this.originY_ = undefined;
    // 用来控制图像是否随地图视图的旋转而旋转。默认为 undefined，可能在后期通过方法来设置
    this.rotateWithView_ = undefined;
    // 表示图像的旋转角度，用于图像的旋转操作。
    this.rotation_ = undefined;
    // 表示图像的缩放比例，用于调整图像的大小
    this.scale_ = undefined;
    // 表示图像的宽度，可能用于图像的大小调整
    this.width_ = undefined;
    // 表示图像是否启用了“去除杂乱”的模式。当多个图像或标注重叠时，启用该模式可以避免它们互相遮挡
    this.declutterMode_ = undefined;
    // 用于确定是否将图像与文本一起进行去除杂乱处理。一般情况下，文本与图像一起展示时可能会发生遮挡，启用该属性可以避免这种情况
    this.declutterImageWithText_ = undefined;
  }

  drawPoint(pointGeometry, feature, index) {
   
   
    if (
      !this.image_ ||
      (this.maxExtent &&
        !containsCoordinate(this.maxExtent, pointGeometry.getFlatCoordinates()))
    ) {
   
   
      return;
    }
    this.beginGeometry(pointGeometry, feature, index);
    const flatCoordinates =<