Hola a todos. Estoy intentando crear una aplicación de mapas usando CesiumJS con react a través de la biblioteca Resium. Quiero mostrar los mapas seccionales VFR de la FAA ubicados aquí: https://faa.maps.arcgis.com/home/item.html?id=6ab79dc5de5743adb3e3b6e3c803aa59
Soy bastante nuevo en Cesium/Resium. He estado leyendo la documentación de ArcGis/CesiumJS ubicada aquí para cargar teselas de mapas: https://developers.arcgis.com/cesiumjs/layers/add-map-tiles/ Que por supuesto solo usa CesiumJS base. He verificado que mis tokens de acceso son correctos y no nulos ni nada. Mi token de desarrollador arcgis tiene todos los permisos disponibles que pude configurar. También he intentado usar la URL de teselas del mapa para los parcelarios de santa monica aquí: https://developers.arcgis.com/cesiumjs/layers/ y aún así obtengo un error 404. Estoy pasando mi token de acceso como pueden ver, y hubo 1 URL arcgis que encontré para la cual SÍ pude cargar teselas. ¿Hay algún tipo de configuración de permisos que necesite para acceder a esas teselas FAA? ¿Dice que son públicas? Soy nuevo en todo esto, así que debe haber algo que me estoy perdiendo para conectarme correctamente y obtener estas teselas. Gracias por cualquier ayuda que puedan proporcionar.
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("Error loading imagery providers:", error);
}
}
loadImagery();
}, [arcGisApiKey]);
return (
<Viewer
baseLayer={vfrImagery}
timeline={false}
animation={false}
geocoder={false}
>
</Viewer>
);
}
export default App;