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

Question

我们在 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 更改文件名并以这种方式引用它？

Answer 1

Why is angular changing the name of the file and referencing it in this manner?

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

所有这些都干扰了 Leaflet 方案自动检测其图标路径并重建它。

也就是说，您的上述解决方法应该至少更改了图像的 URL。

至于解决方案，您可能对我的 leaflet-defaulticon-compatibility 插件感兴趣：

Retrieve all Leaflet Default Icon options from CSS, in particular all icon images URL's, to improve compatibility with bundlers and frameworks that modify URL's in CSS.

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。

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

Issue with displaying the leaflet map pinpoint using Angular

javascript

leaflet

angular