标记图标未显示在传单中

IT技术 reactjs webpack leaflet webpack-4
2021-05-19 22:59:39

我已经制作了一个非常简单的 React / Leaflet 演示，但是标记图标根本没有显示。完整的运行代码在这里。

这是我的componentDidMount方法中的内容：

componentDidMount() {
this.map = L.map("map-id", {
  center: [37.98, 23.72],
  zoom: 12,
  zoomControl: true
});

const mapboxAccessToken =
  "pk.eyJ1IjoibXBlcmRpa2VhcyIsImEiOiJjazZpMjZjMW4wOXJzM2ttc2hrcTJrNG9nIn0.naHhlYnc4czWUjX0-icY7Q";
L.tileLayer(
  "https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token={accessToken}",
  {
    attribution:
      'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
    maxZoom: 25,
    id: "mapbox/streets-v11",
    accessToken: mapboxAccessToken
  }
).addTo(this.map);

L.marker([37.98, 23.72])
  .addTo(this.map)
  .bindPopup("a marker")
  .openPopup();
}

基本上，弹出窗口是可见的，但不是标记图标本身。即，这是我所看到的：

在此处输入图片说明

4个回答

我正在使用react传单。这是我如何做到的。

import markerIconPng from "leaflet/dist/images/marker-icon.png"
import {Icon} from 'leaflet'

然后，稍后，在 MapContainer 中：

<Marker position={[lat, lng]} icon={new Icon({iconUrl: markerIconPng, iconSize: [25, 41], iconAnchor: [12, 41]})} />

尝试添加一个图标：

const myIcon = L.icon({
   iconUrl: 'myIcon.png',
   // ...
});

L.marker([37.98, 23.72], {icon: myIcon})
  .addTo(this.map)

也许您对默认设置有一些问题：https : //leafletjs.com/reference-1.6.0.html#icon-default

仅供参考，这是由于 webpack 试图将 Leaflet CSS 中指定的标记图标图像文件作为静态资产包含在不同的文件夹中，并且可能会重命名文件（例如，用于指纹）；所有这些都会干扰 Leaflet 算法，该算法仅将该图像用作指向其实际 CSS 图像文件夹的指针，因此在 webpack 构建步骤之后可能会完全丢失。

请参阅https://github.com/Leaflet/Leaflet/issues/4968 中的详细信息

我专门制作了一个 Leaflet 插件来解决这个问题：https : //github.com/ghybs/leaflet-defaulticon-compatibility

从 CSS 中检索所有 Leaflet 默认图标选项，特别是所有图标图像 URL，以提高与在 CSS 中修改 URL 的捆绑器和框架的兼容性。

不幸的是，它仍然无法在 CodeSandbox（甚至在 StackBlitz）中工作，因为后者不处理这些静态资产。只需尝试使用 Leaflet Layers Control 就可以看到它，它使用了一个非常简单的 CSS 背景图像，在 CodeSandbox 中也没有。

但是在您自己的环境中一切都应该没问题。

CodeSandbox 中的演示：https ://codesandbox.io/s/elegant-swirles-yzsql

在 StackBlitz（相同的静态资产问题）中：https ://stackblitz.com/edit/react-vqgtxd?file=index.js

这是最终对我有用的东西（我在 webpack 上）：

const defaultIcon = new L.icon({
  iconUrl: require('../node_modules/leaflet/dist/images/marker-icon.png'); // your path may vary ...
  iconSize: [8, 8],
  iconAnchor: [2, 2],
  popupAnchor: [0, -2]
});

generateMarkers().forEach( c=> {
   L.marker(c, {icon: defaultIcon}).addTo(this.map).bindPopup('a marker; yeah').openPopup();
}
其它你可能感兴趣的问题
上一篇鼓起的细丝 - 如何在它们进入打印机之前抓住它们 下一篇在设计 3D 打印零件时必须考虑哪些特殊因素？