webpack懒加载Leaflet-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)

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

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, {
       ...
    })

webpack懒加载Leaflet-Geoman

Webpack lazy loading Leaflet-Geoman

javascript

leaflet

leaflet-geoman