使用 Angular 显示传单地图精确定位的问题答案

【问题标题】：Issue with displaying the leaflet map pinpoint using Angular使用 Angular 显示传单地图精确定位的问题
【发布时间】：2021-06-09 01:00:42
【问题描述】：

我们在 Angular 应用程序中使用 v 1.7.1 的传单包。

我们遇到了一个问题，当用户在地图上选择一个点时，不显示精确图标，而是显示损坏的图像图标。

我们已尝试通过将其添加到我们的 angular.Json 文件中来将传单图像包含在资产文件夹中

“Assets”: [

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

我们在全局 styles.scss 文件中引用了传单 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 会更改文件名并以这种方式引用它？

【问题讨论】：

标签： javascript angular leaflet

【解决方案1】：

为什么 Angular 会更改文件名并以这种方式引用它？

因为 Angular 构建使用带有 css 加载器和资产文件指纹的 webpack（用于浏览器缓存破坏）。

所有这些都会干扰 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';

如果您想了解故事和细节以及其他可能的解决方案，请参阅issue Leaflet/Leaflet#4698。

【讨论】：

谢谢，我去看看。