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

Question

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

const icon = L.icon({
    iconSize: [25, 41],
    iconAnchor: [10, 41],
    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/>
    )}

但这并没有什么区别。谁能看看我做错了什么？

Answer 1

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