Leaflet Marker未找到生产环境

Question

我的传单有问题。

一切都在开发中工作正常，但在生产中，我的应用程序无法找到marker-icon.png和marker-shadow.png图像。

它正在寻找路径assets/station/images/marker-icon.png

Leaflet js在我的html.erb文件中包含这样的内容

<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.5/leaflet.js"></script>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.5/leaflet.css" />

如果有人可以帮忙！

Answer 1

这是Leaflet中的已知错误，根本问题是在捆绑期间错误地引用了Leaflet的图标图像位置。 您可以验证这是您的问题，购买验证此参数（在运行时）：L.Icon.Default.prototype._getIconUrl()。 正确的值应该是<some_directory>/leaflet/dist/images/。 但是，如果这个错误发生在你身上，它的价值是：data:image/png;base64,iVBO....K5CYII=")undefined

根据您使用的捆绑加载器（Vanilla WebPack，Angular-Cli - WebPack的超集等等），有不同的解决方案（解决方法）。

你可以在这里看到原始问题（以及根据你的bandle-loader的不同解决方案）： https://github.com/Leaflet/Leaflet/issues/4968

如果您使用的是Angular-Cli，此解决方案将适合您。在设置Maker之前在某处添加此代码：

import { icon, Marker } from 'leaflet';
const iconRetinaUrl = 'assets/marker-icon-2x.png';
const iconUrl = 'assets/marker-icon.png';
const shadowUrl = 'assets/marker-shadow.png';
const iconDefault = icon({
  iconRetinaUrl,
  iconUrl,
  shadowUrl,
  iconSize: [25, 41],
  iconAnchor: [12, 41],
  popupAnchor: [1, -34],
  tooltipAnchor: [16, -28],
  shadowSize: [41, 41]
});
Marker.prototype.options.icon = iconDefault;

（此代码会将损坏的标记网址更改为资产文件夹中的有效图像）。

并在您的angular.json（对于Angular版本> = 6.x）或您的angular-cli.json（对于Angular版本<= 5.x）添加此代码：

"assets":
[
   "src/favicon.ico",
   "src/assets",
   {
      "glob": "**/*",
      "input": "node_modules/leaflet/dist/images/", // you may need to change this path, according to your files structure
      "output": "./assets/"
   }
] ...

（此代码会将原始标记图像复制到/assets文件夹，因此angular-cli可以加载它们）

Answer 2

也许尝试升级到当前版本的传单 - 我从未遇到过标记图标的这个问题。

https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.0.2/leaflet.css
https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.0.2/leaflet.js

Answer 3

我遇到了一个类似的问题，使用Parcel作为捆绑器与TypeScript和Leaflet v1.4（通过npm安装，以及它的类型）的组合，并使用Gi​​l的答案以稍微不同的方式解决它。

import 'leaflet/dist/leaflet.css';
import 'leaflet-draw/dist/leaflet.draw.css';
import L, {
  LatLngExpression,
  FeatureGroup,
  TileLayerOptions,
  LayerEvent,
  LeafletMouseEvent,
  Marker,
  Layer,
  icon,
  LayerGroup,
  GeoJSON
} from 'leaflet';
import 'leaflet-draw';
import iconRetinaUrl from './assets/marker-icon-2x.png';
import iconUrl from './assets/marker-icon.png';
import shadowUrl from './assets/marker-shadow.png';

// Assign the imported image assets before you do anything with Leaflet.
Marker.prototype.options.icon = icon({
  iconRetinaUrl,
  iconUrl,
  shadowUrl,
  iconSize: [25, 41],
  iconAnchor: [12, 41],
  popupAnchor: [1, -34],
  tooltipAnchor: [16, -28],
  shadowSize: [41, 41],
});

在另一个文件中，我添加了所需的声明，因此TypeScript允许我导入png图像，例如

declare module "*.png" {
  const content: string;
  export default content;
}

另请注意，如果您使用需要访问这些图像的Leaflet插件，您可能还需要明确指定它，例如Leaflet draw插件也需要它。例：

        map.addLayer(drawLayer);
        const drawControl = new L.Control.Draw({
          draw: {
            circle: false,
            circlemarker: false,
            marker: {
              icon: Marker.prototype.options.icon, // Assign icon explicitly
            },
          },
          edit: {
            featureGroup: drawLayer,
          },
        });
        map.addControl(drawControl);
        map.on(L.Draw.Event.CREATED, event => {
          const layer = (event as LayerEvent).layer;
          drawLayer.addLayer(layer);
        });