Webpack懒惰加载宣传单-Geoman

Question

我正在尝试延迟加载js绘图库Leaflet-Geoman。

我使用了webpack和下面的代码来加载

  private async loadGeoman () {
    await import(/* webpackChunkName: "leaflet-geoman" */ '@geoman-io/leaflet-geoman-free')
  }

然后在下面的函数中使用它

  public async enableDrawing (type: TaggedType, item: any) {
    await this.loadGeoman()

    this._map.pm.enableDraw(type, {
       ...
    })
    ....

我一直收到以下错误

TypeError: Cannot read properties of undefined (reading 'enableDraw')
    at DrawingService.enableDrawing (drawing.service.ts?af11:192)
    at eval (drawing.service.ts?af11:75)

图书馆似乎没有和传单地图联系在一起。Leaflet地图是在加载库之前创建的，我假设这就是问题所在，但我不知道如何解决它

Answer 1

Geoman在初始化地图时将自己添加到地图中。这意味着如果在Geoman-Script被添加到您的站点之前调用L.Map，Geoman将不会添加到地图中。然后你需要调用L.PM.reInitLayer(map)。

public async enableDrawing (type: TaggedType, item: any) {
    await this.loadGeoman();

    L.PM.reInitLayer(this._map);

    this._map.pm.enableDraw(type, {
       ...
    })