概述

DivIcon类用于创建自定义的图标对象,可以用于标记点的图标。DivIcon类继承自Icon类,提供了一些方法用于创建图标对象。

源码分析

源码实现

DivIcon类源码实现如下：

export var DivIcon = Icon.extend({
  options: {
    iconSize: [12, 12], // 图标默认大小
    html: false, // 自定义HTML内容（字符串或DOM元素）
    bgPos: null, // 背景图位置偏移 如雪碧图定位
    className: "leaflet-div-icon", // 默认CSS类
  },
  createIcon: function (oldIcon) {
    // 复用或创建新的div 元素
    var div =
        oldIcon && oldIcon.tagName === "DIV"
          ? oldIcon
          : document.createElement("div"),
      options = this.options;
    
    // 处理 HTML 内容
    if (options.html instanceof Element) {
      empty(div);
      div.appendChild(options.html); // 插入 DOM 元素
    } else {
      div.innerHTML = options.html !== false ? options.html : ""; // 插入字符串或清空
    }
    
    // 设置背景位置
    if (options.bgPos) {
      var bgPos = point(options.bgPos);
      div.style.backgroundPosition = -bgPos.x + "px " + -bgPos.y + "px";
    }
    // 应用样式（大小、定位等）
    this._setIconStyles(div, "icon");

    return div;
  },
  
  // 覆盖父类方法，表示`DivIcon`的实例不渲染阴影
  createShadow: function () {
    return null;
  },
});

// 工厂函数
export function divIcon(options) {
  return new DivIcon(options);
}

示例

使用示例如下

// 创建自定义图标
var myIcon = L.divIcon({
  className: 'my-div-icon',
  html: '<span>🚀</span>',
  bgPos: [10, 20]
});

// 作为标记的图标
L.marker([50.505, 30.57], {icon: myIcon}).addTo(map);

总结​​

DivIcon 提供了一种高度可定制的方式，用 HTML/CSS 替代图片实现地图标记图标，适用于需要动态内容、动画或复杂样式的场景。其核心是通过操作 DOM 元素和 CSS 样式来实现轻量级渲染，同时继承 Leaflet 图标的通用功能（如定位、弹出框锚点等）。