Webpack懒加载Leaflet-Geoman后调用enableDraw报错无法读取属性如何解决

问题原因 #

你的推测是正确的：Leaflet-Geoman 加载时会主动扩展 Leaflet 的 Map 原型挂载 pm 实例属性，提前创建完成的 Map 实例不会自动继承这个后续添加的原型扩展。另外如果 Leaflet 没有暴露为全局变量 L，Geoman 加载时找不到挂载对象也会触发该报错。

解决方案 #

1. 调整懒加载逻辑，加载完成后手动为现有 Map 实例初始化 PM

修改你的 loadGeoman 方法，加载 Geoman 后主动给已创建的 Map 挂载 PM 能力：

private async loadGeoman () {
  // 若项目中Leaflet为局部导入，先引入Leaflet实例
  import L from 'leaflet'
  // 临时挂载到全局，确保Geoman可以识别到Leaflet实例
  (window as any).L = L
  // 懒加载Geoman
  await import(/* webpackChunkName: "leaflet-geoman" */ '@geoman-io/leaflet-geoman-free')

  // 加载完成后为已存在的map实例初始化pm属性
  if (this._map && !this._map.pm) {
    // 高版本Geoman使用addMap，若报错可替换为L.PM.reInitLayer(this._map)
    L.PM.addMap(this._map)
  }
}

2. 调用方法前增加兜底判断

避免特殊场景下挂载失败触发报错：

public async enableDrawing (type: TaggedType, item: any) {
  await this.loadGeoman()
  // 兜底校验
  if (!this._map?.pm) {
    console.error('Geoman 挂载失败，请检查导入逻辑')
    return
  }
  this._map.pm.enableDraw(type, {
    // 你的原有配置
  })
  // 其余原有逻辑
}

内容的提问来源于stack exchange，提问作者Marko Čepo