源码分析之Leaflet中ImageOverlay-CSDN博客

本文链接：https://blog.csdn.net/m0_46281382/article/details/147887602

概述

在Leaflet中，ImageOverlay用于在地图指定地理范围内叠加显示静态图像（如卫星图、历史地图等）

源码分析

源码实现

ImageOverlay的源码实现如下：

export var ImageOverlay = Layer.extend({
  options: {
    opacity: 1, // 图像透明度 0-1
    alt: "", // 图像的替代文本（无障碍访问）
    interactive: false, // 是否响应鼠标事件（点击、悬停）
    crossOrigin: false, // 跨域属性，用于访问像素数据（如anonymous）
    errorOverlayUrl: "", // 图像加载失败时显示的替代图像URL
    zIndex: 1, // 图像的堆叠顺序
    className: "",// 自定义类名
  },
  initialize: function (url, bounds, options) {
    this._url = url;
    this._bounds = toLatLngBounds(bounds); // 确保边界为LatLngBounds对象
    Util.setOptions(this, options);
  },
  onAdd: function () {
    if (!this._image) {
      this._initImage(); // 初始化<img>元素

      if (this.options.opacity < 1) {
        this._updateOpacity();
      }
    }

    if (this.options.interactive) {
      DomUtil.addClass(this._image, "leaflet-interactive");
      this.addInteractiveTarget(this._image); // 启用交互事件
    }

    this.getPane().appendChild(this._image); // 添加到地图的指定窗格
    this._reset();//调整图像位置和大小
  },
  onRemove: function () {
    DomUtil.remove(this._image); // 从DOM中移除图像元素
    if (this.options.interactive) {
      this.removeInteractiveTarget(this._image); // 移除交互事件
    }
  },
  setOpacity: function (opacity) {
    this.options.opacity = opacity;

    if (this._image) {
      this._updateOpacity(); // 更新 CSS opacity
    }
    return this;
  },
  setStyle: function (styleOpts) {
    if (styleOpts.opacity) {
      this.setOpacity(styleOpts.opacity);
    }
    return this;
  },
  bringToFront: function () {
    if (this._map) {
      DomUtil.toFront(this._image);
    }
    return this;
  },
  bringToBack: function () {
    if (this._map) {
      DomUtil.toBack(this._image);
    }
    return this;
  },
  setUrl: function (url) {
    this._url = url;

    if (this._image) {
      this._image.src = url;
    }
    return this;
  },
  setBounds: function (bounds) {
    this._bounds = toLatLngBounds(bounds);

    if (this._map) {
      this._reset();
    }
    return this;
  },
  getEvents: function () {
    var events = {
      zoom: this._reset,
      viewreset: this._reset,
    };

    if (this._zoomAnimated) {
      events.zoomanim = this._animateZoom;
    }

    return events;
  },
  setZIndex: function (value) {
    this.options.zIndex = value;
    this._updateZIndex();
    return this;
  },
  getBounds: function () {
    return this._bounds;
  },
  getElement: function () {
    return this._image;
  },
  _initImage: function () {
    var wasElementSupplied = this._url.tagName === "IMG";
    var img = (this._image = wasElementSupplied
      ? this._url
      : DomUtil.create("img"));
    
    // 设置类名和事件
    DomUtil.addClass(img, "leaflet-image-layer");
    if (this._zoomAnimated) {
      DomUtil.addClass(img, "leaflet-zoom-animated");
    }
    if (this.options.className) {
      DomUtil.addClass(img, this.options.className);
    }

    img.onselectstart = Util.falseFn; // 禁止文本选择
    img.onmousemove = Util.falseFn; // 禁止拖拽
    
    // 加载和错误事件处理
    img.onload = Util.bind(this.fire, this, "load");
    img.onerror = Util.bind(this._overlayOnError, this, "error");
    
    // 跨域处理
    if (this.options.crossOrigin || this.options.crossOrigin === "") {
      img.crossOrigin =
        this.options.crossOrigin === true ? "" : this.options.crossOrigin;
    }

    if (this.options.zIndex) {
      this._updateZIndex();
    }

    if (wasElementSupplied) {
      this._url = img.src;
      return;
    }

    img.src = this._url;
    img.alt = this.options.alt;
  },
  _animateZoom: function (e) {
    var scale = this._map.getZoomScale(e.zoom),
      offset = this._map._latLngBoundsToNewLayerBounds(
        this._bounds,
        e.zoom,
        e.center
      ).min;

    DomUtil.setTransform(this._image, offset, scale); // 应用缩放变换
  },
  _reset: function () {
    var image = this._image,
      bounds = new Bounds(
        this._map.latLngToLayerPoint(this._bounds.getNorthWest()),
        this._map.latLngToLayerPoint(this._bounds.getSouthEast())
      ),
      size = bounds.getSize();

    DomUtil.setPosition(image, bounds.min); // 设置图像位置

    image.style.width = size.x + "px"; // 调整宽度
    image.style.height = size.y + "px"; // 调整高度
  },
  _updateOpacity: function () {
    DomUtil.setOpacity(this._image, this.options.opacity);
  },
  _updateZIndex: function () {
    // 更新 CSS z-index
    if (
      this._image &&
      this.options.zIndex !== undefined &&
      this.options.zIndex !== null
    ) {
      this._image.style.zIndex = this.options.zIndex;
    }
  },
  _overlayOnError: function () {
    this.fire("error");

    var errorUrl = this.options.errorOverlayUrl;
    if (errorUrl && this._url !== errorUrl) {
      this._url = errorUrl;
      this._image.src = errorUrl; // 加载备用图像
    }
  },
  getCenter: function () {
    return this._bounds.getCenter();
  },
});

export var imageOverlay = function (url, bounds, options) {
  return new ImageOverlay(url, bounds, options);
};