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

如何解决React Leaflet 未在生产中显示地图图块

我有以下组件显示 React 应用程序中的 Leaflet 地图。在开发中一切正常，但在生产中，地图不显示，只是空白。标记呈现，但地图没有图块。

const icon = L.icon({
    iconSize: [25,41],iconAnchor: [10,popupAnchor: [2,-40],iconUrl: 'https://unpkg.com/leaflet@1.6/dist/images/marker-icon.png',shadowUrl: 'https://unpkg.com/leaflet@1.6/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/>
    )}

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

解决方法

回答：我忘记包含 StadiaMaps API 密钥。请查看react-leaflet not loading tiles and gilving 403 request error以获得完整答案