传单标记渲染但显示“损坏的图像”占位符

Question

它看起来像这样：

我的代码：

Map.js

//the next 3 lines changes nothing kept it in bc I found this online as a potential solution
//and didn't want to get this suggested
import L from 'leaflet';
delete L.Icon.Default.prototype._getIconUrl;
L.Icon.Default.imagePath = "/";

function Map() {

 let position = [x, y];

 return (
   <div>
     <div id="mapid">
       <MapContainer className="leaflet" center={position} zoom={13} scrollWheelZoom={true}>
         <TileLayer
           attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
           url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
         />
          <Marker position={position}>
            <Popup>
              A pretty CSS3 popup. <br /> Easily customizable.
            </Popup>
          </Marker>
        </MapContainer>
      </div>
    </div>

  );
};

index.css

.leaflet {
  height: 500px;
  width: 100%;
}

#mapid {
  height: 500px;
  margin-top: 50px;
  margin-bottom: 150px;
}

img.leaflet-marker-icon {
   background-image: 
   url('<url>');
}

我不太明白标记是如何同时渲染和不渲染的，它没有意义。

显然，我正在尝试渲染一些导致某些图像无法渲染的东西，但我不知道它会是什么。

代码几乎直接来自示例代码：https://leafletjs.com/examples/quick-start/。这就是为什么我很困惑。

我已经在index.html中包含了样式和脚本标签。

Answer 1

如果您非常密切注意，您的屏幕截图中实际上会显示 2 损坏的图像占位符：

• 比标记图标图像宽的：即默认的传单图标shadow图像：

• 另一种更难以辨别，它适合显示的图标图像大小：即在

  src

  标签的

  <img>

  属性中指定的实际默认 Leaflet 蓝色图标图像。但是我们可以看到一个蓝色图标，因为您已将其指定为背景图像（但它仍然损坏，因此浏览器仍然显示占位符）

根本原因是你的构建引擎（很可能是 webpack，因为你使用 React）重写了 Leaflet CSS 文件中的 URL，这会干扰 Leaflet 使用它来检测其图像路径的方式。

请参阅 Leaflet/Leaflet#4968 和 PaulLeCam/react-leaflet#453 了解更多详情。

至于解决方法，您有 2 个可能的简单选择：

• 使用我的leaflet-defaulticon-compatibility插件

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';

• 在项目中的某个位置使用此代码片段（您可能需要正确配置您的 webpack 加载器）：

import 'leaflet/dist/leaflet.css';
import * as L from 'leaflet';
delete L.Icon.Default.prototype._getIconUrl;

L.Icon.Default.mergeOptions({
  iconRetinaUrl: require('leaflet/dist/images/marker-icon-2x.png'),
  iconUrl: require('leaflet/dist/images/marker-icon.png'),
  shadowUrl: require('leaflet/dist/images/marker-shadow.png'),
});

Answer 2

我找到了答案在这里：

import { icon } from "leaflet"

const ICON = icon({
  iconUrl: "/marker.png",
  iconSize: [32, 32],
})

...

<Marker icon={ICON} ... />

Answer 3

所选答案对我不起作用，但我想分享我的解决方法。

就我而言，我使用的

react-leaflet

有一个

<GeoJSON>

标签，所有标记图像都停止工作并显示损坏的图像。

我最终从传单中复制图标图像并将它们保留在我的服务器中；然后使用“pointToLayer”函数手动设置 GeoJSON 图标。

因此，在我将标记图标从

node_modules/leaflet/dist/images

复制到

public/images

后：

import { GeoJSON } from 'react-leaflet'
import L, { icon } from 'leaflet'

//Some code...

<GeoJSON data={myGeoJsonData} pointToLayer={(feature, latlng) => {
    const myIcon = icon({iconUrl: "/images/marker-icon.png"});
    return L.marker(latlgn, {icon: myIcon});
}}/>

虽然最后我选择用

L.circleMarker

来代替。