反應 Leaflet - 標記圖像無法加載
[英]React Leaflet - Marker image fails to load
問題描述
問題
我在我的 React 項目中使用leaflet v1.7.1和react-leaflet v3.0.5 。
當我在React Router 的“設置”文檔頁面中嘗試設置示例時，標記圖標變成了一個損壞的圖像，如下圖紅色圓圈所示：
從 React Router 的文檔中，標記應該是這樣的：
經檢查，保存標記圖像的<img>標簽的src屬性應為https://unpkg.com/leaflet@1.7.1/dist/images/marker-icon-2x.png 。 但是，經過檢查，我的<img>的src屬性看起來像亂碼：
復制
我創建了一個包含我的代碼的新沙箱：
或者，請按照以下步驟復制問題：
npx create-react-app leaflet-testcd leaflet-test/npm i leaflet react-leaflet在代碼編輯器中打開項目。 Go 到
App.js並使用以下代碼：import React from "react"; import "./App.css"; import "leaflet/dist/leaflet.css"; import { MapContainer, TileLayer, Marker, Popup } from "react-leaflet"; const styles = { mapRoot: { height: 400, }, }; export default function App() { return ( <MapContainer style={styles.mapRoot} center={[51.505, -0.09]} zoom={13} scrollWheelZoom={false} > <TileLayer attribution='© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors' url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" /> <Marker position={[51.505, -0.09]}> <Popup> A pretty CSS3 popup. <br /> Easily customizable. </Popup> </Marker> </MapContainer> ); }npm start
我不確定我是否在 React 中錯誤地設置了 Leaflet，還是來自 Leaflet 或 React Leaflet 的錯誤。 提前致謝！
3 個解決方案
解決方案1
2 已采納 2021-01-17 13:55:41
作為參考，這是由於 webpack 重寫了 CSS 中的 URL，而 Leaflet 使用它來檢測其圖標圖像的路徑。
請參閱Leaflet 問題 #4968中的詳細信息。
當通過 CDN 使用 Leaflet 時，Leaflet CSS 沒有被擺弄，所以它可以正常工作。
您仍然可以通過 webpack 使用它，但您應該只使用自定義圖標，或者明確告訴 Leaflet 在哪里可以找到其默認圖標的圖像：
import 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'),
});
我還專門為這種情況制作了一個插件： 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';
解決方案2
1 2021-01-17 09:15:12
感謝FoundingBox的評論，原來這是 React Leaflet 的錯誤。
已經有一個關於此錯誤的GitHub 問題線程， 此評論建議以下解決方案：
好的。 事實證明，問題是由於在組件的導入中包含 leaflet CSS 引起的。
我現在剛剛包含一個指向 CDN 托管 leaflet.css 文件的鏈接，它工作正常，但如果可以修補它以使用 create-react-app Z424516CA53B4AD4BEF37ED04F8888
換句話說，這是分步指南：
刪除
import "leaflet/dist/leaflet.css";來自App.js。 不要從任何 JS 文件中的節點模塊導入 Leaflet CSS。Go to
public/index.htmland include the CDN hosted leaflet.css by pasting the following code in the<head>section of the HTML file:<link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A==" crossorigin=""/>（注：此鏈接使用Leaflet的v1.7.1。訪問Leaflet的文檔可以找到鏈接最新版本Leaflet的代碼）
解決方案3
1 2021-11-16 03:05:19
我遇到了同樣的問題，但最近發現了這個解決方案，我們需要做的就是將一個圖標道具傳遞給標記組件。
import marker from '../../Assets/icons/Location.svg';
import { Icon } from 'leaflet'
const myIcon = new Icon({
iconUrl: marker,
iconSize: [32,32]
})
<MapContainer center={value} zoom={13} scrollWheelZoom={false}>
<TileLayer
attribution='© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
/>
<Marker position={value} icon={myIcon}>
<Popup>
Location :{data}
</Popup>
</Marker>
</MapContainer>
反應傳單標記旋轉
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.