ngx-leaflet angular 使用生产版本时出现 5 个地图图块问题

Question

我是 Angular 的新手，我用 leaflet 插件构建了我的第一个 angular 应用程序。在使用生产构建之前，一切都按预期工作：

ng s --target=production 要么 ng build --target=production

传单地图容器未在错误的行、列中显示所有地图图块 and/or。我试图用 map.invalidateSize(); 强制重绘地图；在 onMapReady(..) 但没有成功。

(leafletMapReady)="onMapReady($event)

根据 *ngIf 条件显示组件本身：

<div>
    <app-tracking-map *ngIf="deliveryState == 1" [trackingData]="trackingData"></app-tracking-map>
</div>

我实际上不知道从哪里开始调查，只是猜测它与 webpack 和神奇的捆绑相关。

在angular-cli.json我添加了传单css

      "styles": [
    "styles.css",
    "../node_modules/leaflet/dist/leaflet.css"
  ],

Answer 1

您可能丢失了位于 ./node_modules/leaflet/dist/leaflet.css 中的 leaflet.css 文件。缺少时，地图和图块已绘制，但布局不正确。

如何在 Webpack 构建中引用该文件取决于您如何设置项目。 ngx-leaflet README 文件描述了一些最常见的配置：

ngx-leaflet angular 5 map tiles issue when using production build