使用 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 。