如何在Leaflet地图中获取canvas元素实现多边形纹理填充

注意：Canvas渲染的多边形本身不是独立DOM元素，只是Canvas画布上绘制的矢量路径，你可以通过以下两种方式实现纹理填充：

方法1：重写多边形_updatePath方法（推荐，稳定性最高） #

直接复用Leaflet内置的路径计算逻辑，自定义填充规则即可，适配地图缩放、平移的自动重绘场景：

// 你的原有初始化代码
let latlngs = [
    [1714, 2549],
    [1776, 3336],
    [934, 3121],
    [836, 2382]
];
let myRenderer = L.canvas({ padding: 0.5 });
let polygon = L.polygon(latlngs, {renderer: myRenderer}).addTo(map);

// 纹理填充实现代码
const img = new Image();
img.src = '你的纹理资源路径'; // 支持本地路径、base64格式
img.crossOrigin = 'anonymous'; // 跨域纹理需要加这个配置，否则会触发Canvas污染
img.onload = function() {
  // 创建Canvas填充纹理
  const fillPattern = myRenderer._ctx.createPattern(img, 'repeat');

  // 重写多边形的绘制方法，替换默认纯色填充
  polygon._updatePath = function() {
    // 调用内置方法绘制多边形路径
    this._renderer._pathTo2d(this._parts);
    const ctx = this._renderer._ctx;

    // 用纹理填充
    ctx.fillStyle = fillPattern;
    ctx.fill('evenodd');

    // 保留原有边框样式
    ctx.strokeStyle = this.options.color;
    ctx.lineWidth = this.options.weight;
    ctx.stroke();
  }

  // 触发重绘让纹理生效
  myRenderer._redraw();
}

方法2：直接获取Canvas元素手动操作 #

如果你确实需要拿到Canvas的DOM节点和绘图上下文，可以直接从你创建的Renderer实例中获取：

// 获取Canvas DOM元素
const canvasElement = myRenderer._container;
// 获取Canvas 2D绘图上下文
const canvasCtx = myRenderer._ctx;

注意事项 #

• 地图平移、缩放时Canvas会自动清空重绘，临时手动绘制的内容会消失，建议将自定义绘制逻辑统一写到_updatePath方法中
• 多纹理场景下，给每个多边形单独重写_updatePath方法即可，互不影响

内容的提问来源于stack exchange，提问作者Alex