Closed 20m61 closed 1 month ago
まず、PLATEAUデータを取得し、プロジェクト内で利用できる形にします。
PLATEAUデータのダウンロード PLATEAUの公式サイトから必要な都市や建物情報をダウンロードします。データはJSON、GeoJSON、CSVなどの形式で提供されています。
S3バケットにデータをアップロード
ダウンロードしたデータを、AWS S3バケットにアップロードします。以下の手順でS3バケットにデータを保存します。
次に、Next.jsでPLATEAUデータをロードし、利用できるようにします。
Next.jsでデータをロード
Next.jsのgetStaticProps
またはgetServerSideProps
を使って、PLATEAUデータを静的にロードします。S3にアップロードされたデータをAPI経由で取得する場合は、AWS SDKを使います。
// pages/index.js
import { S3Client, GetObjectCommand } from "@aws-sdk/client-s3";
export async function getStaticProps() {
const s3 = new S3Client({ region: 'ap-northeast-1' });
const params = {
Bucket: 'SonotectureDataBucket', // あなたのバケット名
Key: 'plateau-data.json', // アップロードしたファイル名
};
const command = new GetObjectCommand(params);
const data = await s3.send(command);
const jsonData = await streamToString(data.Body);
return {
props: {
plateauData: JSON.parse(jsonData),
},
};
}
function streamToString(stream) {
return new Promise((resolve, reject) => {
const chunks = [];
stream.on('data', (chunk) => chunks.push(chunk));
stream.on('end', () => resolve(Buffer.concat(chunks).toString('utf8')));
stream.on('error', reject);
});
}
export default function Home({ plateauData }) {
return (
<div>
<h1>PLATEAU Data</h1>
<pre>{JSON.stringify(plateauData, null, 2)}</pre>
</div>
);
}
S3データのアクセス許可設定
S3バケットに保存されたデータにアクセスするために、S3のバケットポリシーやオブジェクトのアクセス権限を適切に設定してください。
Next.jsでデータが正常にロードできたら、簡単なUIを作って、PLATEAUデータを画面上に表示します。例えば、建物の高さやカテゴリをリストとして表示することから始めます。
ステップ 1: PLATEAUデータの取得について、さらに詳しく説明します。PLATEAUデータの選定とダウンロードはプロジェクトの基盤となる部分です。以下の手順に従って、データの取得を進めてください。
PLATEAUプロジェクト(国土交通省のプロジェクト)は、日本の都市の3Dモデルを提供しています。データはCityGML形式やCSV形式、GeoJSON形式など、さまざまなフォーマットで利用可能です。データは次の情報を含みます:
まず、どの都市やエリアのデータが必要かを決める必要があります。PLATEAUは日本の主要都市に対応していますので、プロジェクトのターゲット都市や地域を選定します。
公式サイトにアクセス
データダウンロードページに進む
必要な都市・エリアを選ぶ
データ形式の選択
エリアごとのデータを確認
データのダウンロード
必要なデータ要素を確認
PLATEAUのデータをS3に保存し、API経由で取得するロジックを実装します。