Webpack 延迟加载 Leaflet-Geoman答案

【问题标题】：Webpack lazy loading Leaflet-GeomanWebpack 延迟加载 Leaflet-Geoman
【发布时间】：2021-11-12 09:21:44
【问题描述】：

我正在尝试延迟加载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)

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

【问题讨论】：

你在哪里分配this._map？
地图在DOM加载后在一个单独的服务中初始化，然后通过“set”方法传递给绘图服务

标签： javascript leaflet leaflet-geoman

【解决方案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, {
       ...
    })

【讨论】：