传单折线错误 -> "Cannot read properties of undefined (reading 'x')"

Question

我正在尝试在传单地图上绘制一条简单的多段线。尝试绘制折线的函数就这么简单：

  private drawPath(positionArr: PositionHistory[]) {
    const path: L.LatLng[] = [];

    positionArr.forEach((el: PositionHistory) => {
      path.push(new L.LatLng(el.Position.X, el.Position.Y));
    });

    const pathLayer = new L.Polyline(path, { color: 'green' });
    pathLayer.addTo(this.mapService.leafletMap);
  }

[el.Position.X, el.Position.Y] - 是数字，但即使是这个简单的函数也会给我错误：

  private drawPath() {
    const path = new L.Polyline([
      new L.LatLng(0, 0),
      new L.LatLng(5, 5)
    ]);

    path.addTo(this.mapService.leafletMap);
  }

错误：

我确实尝试调试这个问题，但“地图”对象看起来很正常：

有趣的是，当我尝试绘制矩形或标记时，它起作用了。 只有折线不起作用。

我正在使用 Angular 模块联合。当我有两个微服务运行时会显示此错误。当我只有一个时，这张图没有问题。奇怪的是只有 Polyline 有一些问题，而其他对象如 Rectangle 和 Marker 则没有。所以不知道是不是和微服务架构有关

Answer 1

问题是在 webpack 文件的共享部分中不共享 'leaflet'。所以在我的两个微服务中我都添加了：

          "@types/leaflet": {singleton: true, strictVersion: true, requiredVersion: '^1.7.4'},
          "leaflet": {singleton: true, strictVersion: true, requiredVersion: '^1.7.1'},

在共享部分，这很有帮助。现在当我的两个微服务都是运行.

时，Leaflet 是运行没有问题

传单折线错误 -> "Cannot read properties of undefined (reading 'x')"

Leaflet Polyline error -> "Cannot read properties of undefined (reading 'x')"

leaflet

angular