Olá a todos. Estou tentando criar um aplicativo de mapeamento usando CesiumJS com react através da biblioteca Resium. Quero exibir os Mapas Seccionais VFR da FAA localizados aqui: https://faa.maps.arcgis.com/home/item.html?id=6ab79dc5de5743adb3e3b6e3c803aa59
Sou relativamente novo em Cesium/Resium. Tenho lido a documentação do ArcGis/CesiumJS localizada aqui para carregar tiles de mapas: https://developers.arcgis.com/cesiumjs/layers/add-map-tiles/ Que, claro, usa apenas o CesiumJS base. Verifiquei que meus tokens de acesso estão corretos e não são nulos ou algo assim. Meu token de desenvolvedor arcgis tem todas as permissões disponíveis que eu poderia configurar. Também tentei usar a URL do tile do mapa para os lotes de Santa Monica aqui: https://developers.arcgis.com/cesiumjs/layers/ e ainda recebo um erro 404. Estou passando meu token de acesso como você pode ver, e havia 1 URL arcgis que encontrei que EU CONSEGUI carregar tiles. Existe algum tipo de configuração de permissões que preciso fazer para acessar esses tiles da FAA? Diz que eles são públicos? Sou novo nisso tudo, então deve haver algo que estou perdendo para conectar corretamente e obter esses tiles. Obrigado por qualquer ajuda que puderem fornecer.
import { ArcGisMapServerImageryProvider, ArcGisMapService, ImageryLayer, Ion } from 'cesium';
import { useEffect, useState } from "react";
import { Viewer } from "resium";
function App() {
const arcGisApiKey = import.meta.env.VITE_ARCGIS_API_KEY;
const cesiumAccessToken = import.meta.env.VITE_CESIUM_API_KEY;
Ion.defaultAccessToken = cesiumAccessToken;
ArcGisMapService.defaultAccessToken = arcGisApiKey;
Ion.defaultAccessToken = cesiumAccessToken;
ArcGisMapService.defaultAccessToken = arcGisApiKey;
const [vfrImagery, setVfrImagery] = useState<ImageryLayer | undefined>(undefined);
useEffect(() => {
async function loadImagery() {
try {
const vfrImageryProvider = await ArcGisMapServerImageryProvider.fromUrl(
"https://tiles.arcgis.com/tiles/ssFJjBXIUyZDrSYZ/arcgis/rest/services/VFR_Sectional/MapServer"
);
const vfrImageryLayer = new ImageryLayer(vfrImageryProvider);
setVfrImagery(vfrImageryLayer);
} catch (error) {
console.error("Erro ao carregar provedores de imagens:", error);
}
}
loadImagery();
}, [arcGisApiKey]);
return (
<Viewer
baseLayer={vfrImagery}
timeline={false}
animation={false}
geocoder={false}
>
</Viewer>
);
}
export default App;<\/code><\/pre> <\/P> <\/P> <\/P>