Angular 10 - Leaflet - Webpack 中斷 URL 到 marker-icon.png

Question

這是關於 Webpack 和 Leaflet 之間的兼容性問題。 您可能已經知道（針對該問題的github 問題、 SO-Question1 、 SO-Question2 npm 插件、 ngx-leaflet 自述文件）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”下的所有網址都屬於后端 API，“/frontend”下的所有網址都屬於我的 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"; 以及它的 Marker 類，特別是import { Marker } from 'leaflet'; . 不使用下面的任何修復程序，我在ng serve上獲得了標記，但在ng build --prod 。

現在來看看我對每個解決方案的結果。 我查看了ng serve和ng build --prod每個解決方案，后者我在我的 django 后端服務器的開發環境中運行。 Bar 解決方案 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.顯式設置默認圖標圖片資源

//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. 將傳單圖片添加到資產中，並直接在圖標中引用（在 ngx-leaflet Readme 中也有建議）

//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/"}
            ],
...

在 ng 發球時：標記本身是可見的。 從錯誤的 url 加載 marker-shadow.png 失敗，並且名稱中沒有必要的哈希：

在 ng build --prod 上：有marker_icon 和marker_shadow 的廢話網址：

Answer 1

這既不是一個干凈的解決方案，也不是真正解決問題的解決方案，它只是繞開了它。

最后，您要做的是加載這兩個圖像文件。 這些應該來自分發您的前端的 HTTP 服務器，但這正是傳單正在破壞的內容。 沒有什么能阻止您從不同的地方加載這 2 個圖像文件，例如為您的后端提供服務的 HTTP 服務器。

因此，我已將 2 個圖像文件上傳到我的后端服務器，然后將 Leaflet 的 Marker 原型定義的 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;