Angular 10 - Leaflet - Webpack 打破 URL 到 marker-icon.png

Question

这是关于 Webpack 和 Leaflet 之间的兼容性问题。您可能已经知道（github Issue、SO-Question1、SO-Question2npm plugin against the issue、ngx-leaflet readme）leaflet 以与 webpack 不兼容的方式操纵其图像的 URL。如果不固定，它们会产生无意义的 URL，例如 http://localhost:8000/static/frontend/marker-icon.2b3e1faf89f94a483539.png%22)marker-icon.png，而不是 http://localhost:8000/static/frontend/marker-icon.2b3e1faf89f94a483539.png。我可以在我的开发环境中使用一些解决方案来解决这个问题，但不能在我的产品版本中解决。

我有一个组件，除了构建传单地图之外什么都不做。我已经尝试了给定的答案，我已经尝试了插件，我的构建中仍然没有标记。

我该怎么办？我的错误是什么？

我的设置

通常我寻求在 django 后端服务器上部署 angular。 “/api”下的所有url都属于Backend API，“/frontend”下的所有url都属于我的Angular前端。

Leaflet 在我的angular.json 中导入，但只有它的 js 文件。

//angular.json
...
            "styles": [
              "src/styles.scss",
              "node_modules/font-awesome/css/font-awesome.css"
            ],
            "scripts": [
              "node_modules/jquery/dist/jquery.js",
              "node_modules/popper.js/dist/umd/popper.js",
              "node_modules/leaflet/dist/leaflet.js",
              "node_modules/tinymce/tinymce.min.js"
            ]
...

旁注：我目前不使用 ngx-leaflet，因为我没有看到任何理由。然而，我确实阅读了使用 ngx-leaflet 的修复，因为据我了解，问题在于一般的 webpack-leaflet 交互。

在我的组件中，我使用import * as L from "node_modules/leaflet"; 导入传单，以及专门使用import { Marker } from 'leaflet'; 的标记类。 不使用以下任何修复程序，我在ng serve 上得到标记，但在ng build --prod 上没有。

现在来看我对每个解决方案的结果。我使用ng serve 和ng build --prod 查看了每个解决方案，后者是我在我的django 后端服务器的开发环境中运行的。酒吧解决方案 3 他们总是有相同的结果：

1.使用leaflet-defaulticon-compatibility-plugin

//leaflet-map.component.ts
import { Marker } from 'leaflet';
import 'leaflet/dist/leaflet.css';
import 'leaflet-defaulticon-compatibility/dist/leaflet-defaulticon-compatibility.webpack.css'; // Re-uses images from ~leaflet package
import * as L from "node_modules/leaflet";
import 'leaflet-defaulticon-compatibility';

这将标准标记的 url 更改为“未定义”： 标记根本没有加载。

2. Explicitly set default icon image resource

//leaflet-map.component.ts
import { Marker } from 'leaflet';
import * as L from "node_modules/leaflet";

delete L.Icon.Default.prototype._getIconUrl;

L.Icon.Default.mergeOptions({
  iconRetinaUrl: require('leaflet/dist/images/marker-icon-2x.png'),
  iconUrl: require('leaflet/dist/images/marker-icon.png'),
  shadowUrl: require('leaflet/dist/images/marker-shadow.png'),
});

这导致部分 URL 被对象替换：

产品中的相同行为。标记确实加载了，您可以看到图像应该在哪里的轮廓，并带有“找不到文件”符号。

3. Add the leaflet images to the assets and reference them directly in the icon（在 ngx-leaflet 自述文件中也有建议）

//leaflet-map.component.ts
import { Marker } from 'leaflet';
import * as L from "node_modules/leaflet";

...
  //My function to create markers on my map
  createDefaultMarker(mapMarker: MapMarker): Marker{
    return L.marker([mapMarker.latitude, mapMarker.longitude], {
      iconSize: [ 25, 41 ],
      iconAnchor: [ 13, 41 ],
      iconUrl: 'assets/marker-icon.png',
      shadowUrl: 'assets/marker-shadow.png'
    })

//angular.json
...
            "assets": [
              "src/favicon.ico",
              "src/assets",
              { "glob": "**/*", "input": "node_modules/tinymce", "output": "/tinymce/" },
              { "glob": "**/*", "input": "node_modules/leaflet/dist/images", "output": "assets/"}
            ],
...

On ng serve：标记本身是可见的。无法从错误的 url 加载 marker-shadow.png 并且名称中没有必要的哈希：

在 ng build --prod 上：具有 marker_icon 和 marker_shadow 的无意义 URL：

Answer 1

这既不是一个干净的解决方案，也不是真正解决问题的解决方案，它只是绕过它。

最后，您要做的是加载这两个图像文件。那些 应该 来自分发前端的 HTTP 服务器，但这正是传单所破坏的。没有什么能阻止您从不同的地方加载这 2 个图像文件，例如为您的后端提供服务的 HTTP 服务器。

因此，我已将 2 个图像文件上传到我的后端服务器，然后将 Leaflet 标记原型的已定义 DefaultIcon 替换为 URL 指向我的后端服务器的一个。这为我解决了问题。

let DefaultIcon = L.icon({
  iconUrl: `${Constants.wikiMediaUrl}/leaflet/marker-icon.png`,
  shadowUrl: `${Constants.wikiMediaUrl}/leaflet/marker-shadow.png`,
  iconSize: [24,36],
  iconAnchor: [12,36]
});

L.Marker.prototype.options.icon = DefaultIcon;