皆さん、こんにちは。私は Resium ライブラリを通じて React で CesiumJS を使ったマッピングアプリケーションを作成しようとしています。ここにある FAA VFR セクショナルチャートを表示したいと思っています:https://faa.maps.arcgis.com/home/item.html?id=6ab79dc5de5743adb3e3b6e3c803aa59
私は Cesium/Resium は初心者です。マップタイルの読み込みについてはここにある ArcGis/CesiumJS のドキュメントを読んでいます:https://developers.arcgis.com/cesiumjs/layers/add-map-tiles/ これはもちろん基本的に CesiumJS を使用しています。アクセストークンが正しく、null ではないことは確認済みです。私の arcgis 開発者トークンには設定可能なすべての権限が付与されています。また、ここにあるサンタモニカの区画のマップタイル URL も試しました:https://developers.arcgis.com/cesiumjs/layers/ が、それでも 404 エラーが出ます。アクセストークンは渡しているのがわかると思いますし、タイルを読み込めた arcgis の URL が一つだけ見つかりました。FAA のタイルにアクセスするために設定すべき何らかの権限関連の設定が必要なのでしょうか?公開されていると書いてあります。私はこの分野は初心者なので、これらのタイルに正しく接続するために見落としている何かがあるはずです。ご助力いただければ幸いです。
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);
}
}
loadImagery();
}, [arcGisApiKey]);
return (
<Viewer
baseLayer={vfrImagery}
timeline={false}
animation={false}
geocoder={false}
>
</Viewer>
);
}
export default App;<\/code><\/pre>