使用 Angular 精確定位顯示 leaflet map 時出現問題

Question

我們在 angular 應用程序中使用 leaflet package v 1.7.1。

當用戶在 map 上選擇一個點時，我們遇到了問題，不顯示精確圖標，而是顯示損壞的圖像圖標。

我們嘗試將 leaflet 圖像添加到資產文件夾中，方法是將其添加到我們的 angular.Json 文件中

“Assets”: [

   “src/assets”,
   {
      “glob”: “**/*”,
      “input”: “./node_modules/leaflet/dist/images”,
      “output”: “./assets/“
   }
]

我們在全局 styles.scss 文件中引用了 leaflet css 文件。

   @import "~leaflet/dist/leaflet.css";

在我們的組件中，我們正在執行以下操作

const iconRetinaUrl = './assets/marker-icon-2x.png';

const iconUrl = './assets/marker-icon.png';

const shadowUrl = './assets/marker-shadow.png';

const iconDefault = L.icon({

iconRetinaUrl,

iconUrl,

shadowUrl,

iconSize: [25, 41],

iconAnchor: [12, 41],

popupAnchor: [1, -34],

tooltipAnchor: [16, -28],

shadowSize: [41, 41]

});

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

然后當用戶選擇一個點時，我們這樣做：

var marker = L.marker([33.89268303132417, 35.50405740737915]).addTo(this.map);

我們沒有看到標記圖標，我們得到一個丟失的圖像圖標。 如果我們檢查頁面上的元素，它會顯示如下所示的源：

https://friendlyurl.somedomain.com/marker-icon.2b3e1faf89f94a483539.png")marker-icon.png

為什么 angular 會更改文件名並以這種方式引用它？

Answer 1

為什么 angular 會更改文件名並以這種方式引用它？

因為 Angular 構建使用 webpack 和 css 加載程序和資產文件指紋（用於瀏覽器緩存破壞）。

這一切都干擾了 Leaflet 方案自動檢測其圖標路徑並重建它。

話雖如此，您的上述解決方法至少應該更改了圖像的 URL。

至於解決方案，您可能對我的leaflet-defaulticon-compatibility插件感興趣：

從 CSS 中檢索所有 Leaflet 默認圖標選項，特別是所有圖標圖像 URL，以提高與在 CSS 中修改 URL 的捆綁程序和框架的兼容性。

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 'leaflet';
import 'leaflet-defaulticon-compatibility';

如果您想了解故事和詳細信息以及其他可能的解決方案，請參閱問題 Leaflet/Leaflet#4698 。