React Leaflet 在生产中未显示地图图块

Question

我有以下组件在 React 应用程序中显示传单地图。在开发中一切正常，但在生产中，地图没有显示，它只是空白。标记已渲染，但地图没有图块。

const icon = L.icon({
    iconSize: [25, 41],
    iconAnchor: [10, 41],
    popupAnchor: [2, -40],
    iconUrl: 'https://unpkg.com/[email protected]/dist/images/marker-icon.png',
    shadowUrl: 'https://unpkg.com/[email protected]/dist/images/marker-shadow.png'
});

const group = L.featureGroup();

function Bounds({ coords }) {
    const map = useMap();
    useEffect(() => {
        if (!map) return;
        group.clearLayers();
        coords.forEach((marker) => group.addLayer(L.marker(marker)));
        map.fitBounds(group.getBounds());
}, [map, coords]);

return null;
}

export default function MapLeaflet({coords, setShowMap}) {

    const [appState, setAppState] = useContext(AppState)

    function TileLayerDark() {
        return (
            <TileLayer attribution='&amp;copy <a 
                href="http://osm.org/copyright">OpenStreetMap</a> contributors' 
                url="https://tiles.stadiamaps.com/tiles/alidade_smooth_dark/{z}/{x}/{y}{r}.png" 
            />
    )
}

    function TileLayerLight() {
        return (
            <TileLayer attribution='&amp;copy <a href="http://osm.org/copyright">OpenStreetMap</a> contributors' url="https://tiles.stadiamaps.com/tiles/alidade_smooth/{z}/{x}/{y}{r}.png" />
    )
}

function MyTileLayar() {
    // ONMOUNT GET THE COLOR THEME USED AND RETURN THE CORRECT MAP TILES
    const html = document.querySelector('html')
    if (html.classList.contains('dark')) {
        setAppState(prevState => ({...prevState,isMapDark:true}))

    } else {
        setAppState(prevState => ({...prevState,isMapDark:false}))
    }
}

useEffect(() => {
    MyTileLayar();
},[])

const position = [42.2974279, -85.628292];

return (
    <MapContainer
        className="h-full rounded-lg map"
        center={position}
    >
        {coords.length > 0 &&
            coords.map((coord, index) => {
            return (
                <Marker
                    key={index}
                    position={[coord[0], coord[1]]}
                    eventHandlers={{
                        click: (e) => {
                            const numLatitude = Number(coord[0]);
                            const numLongitude = Number(coord[1]);
                            setAppState(prevState => ({...prevState,latitude:numLatitude,longitude:numLongitude}));
                            //setShowMap(false)
                        },
                    }}
                    icon={icon}/>
            );
        })}
        {coords.length>0 && <Bounds coords={coords} />}
        {appState.isMapDark ? (
            <TileLayerDark/>
        ) : (
            <TileLayerLight/>
        )}
    </MapContainer>
)
}

我唯一能想到的是，根据用户是否在浅色模式或深色模式下查看，我返回不同的地图图层，尽管这在开发模式下有效，但我不知道为什么它在生产中不起作用。 - 我尝试删除条件语句：

{appState.isMapDark ? (
        <TileLayerDark/>
    ) : (
        <TileLayerLight/>
    )}

但这没有什么区别。有人能看出我做错了什么吗？

Answer 1

答案：我忘记添加 StadiaMaps API 密钥。请查看react-leaflet未加载瓷砖和镀金403请求错误以获得完整答案

Answer 2

对于那些在 2023 年仍然遭受此问题困扰的人，以下是我在 React 应用程序中解决问题的替代方法：

1. 创建一个名为

   MarkerIcon.jsx

   的文件

   import L from 'leaflet';
   import Shadow from "leaflet/dist/images/marker-shadow.png";
   import Icon from "leaflet/dist/images/marker-icon-2x.png";
   
   const MarkerIcon = new L.Icon({
       iconUrl: Icon,
       shadowUrl: Shadow,
       iconSize:     [25, 41], // size of the icon
       shadowSize:   [41, 41], // size of the shadow
       iconAnchor:   [12, 41], // point of the icon which will correspond to marker's location
       shadowAnchor: [12, 41],  // the same for the shadow
   });
   
   export default MarkerIcon
   

2. 将地图中的

   Marker

   组件设置为使用此图标：

import MarkerIcon from '@/Components/MarkerIcon'
...
 <MapContainer center={position} zoom={13} scrollWheelZoom={false}>
    <TileLayer
      attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
      url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
    />
    <Marker position={position} icon={MarkerIcon}>
      <Popup>
        A pretty CSS3 popup. <br /> Easily customizable.
      </Popup>
    </Marker>
  </MapContainer>
...

希望您发现这有帮助，享受！