20m61 / Sonotecture

0 stars 0 forks source link

PLATEAUデータの準備と処理 #7

Closed 20m61 closed 1 month ago

20m61 commented 2 months ago

PLATEAUのデータをS3に保存し、API経由で取得するロジックを実装します。

  1. PLATEAUデータを取得し、S3バケットにアップロード。
  2. S3からデータを動的に取得するためのAPIを作成。
  3. 取得したデータを基に建物情報を解析するロジックをLambdaに実装。
  4. データ量が多い場合の処理やキャッシュ戦略を検討。
20m61 commented 2 months ago

ステップ 1: PLATEAUデータの取得

まず、PLATEAUデータを取得し、プロジェクト内で利用できる形にします。

  1. PLATEAUデータのダウンロード PLATEAUの公式サイトから必要な都市や建物情報をダウンロードします。データはJSON、GeoJSON、CSVなどの形式で提供されています。

  2. S3バケットにデータをアップロード
    ダウンロードしたデータを、AWS S3バケットにアップロードします。以下の手順でS3バケットにデータを保存します。

    • AWSマネジメントコンソールのS3からバケットを選択し、「オブジェクトのアップロード」でデータファイルをアップロードします。

ステップ 2: PLATEAUデータのフロントエンドでの利用

次に、Next.jsでPLATEAUデータをロードし、利用できるようにします。

  1. 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>
     );
    }
  2. S3データのアクセス許可設定
    S3バケットに保存されたデータにアクセスするために、S3のバケットポリシーやオブジェクトのアクセス権限を適切に設定してください。

ステップ 3: データの確認と表示

Next.jsでデータが正常にロードできたら、簡単なUIを作って、PLATEAUデータを画面上に表示します。例えば、建物の高さやカテゴリをリストとして表示することから始めます。

20m61 commented 1 month ago

ステップ 1: PLATEAUデータの取得について、さらに詳しく説明します。PLATEAUデータの選定とダウンロードはプロジェクトの基盤となる部分です。以下の手順に従って、データの取得を進めてください。

1. PLATEAUデータの取得手順

1.1 PLATEAUデータの概要

PLATEAUプロジェクト(国土交通省のプロジェクト)は、日本の都市の3Dモデルを提供しています。データはCityGML形式CSV形式GeoJSON形式など、さまざまなフォーマットで利用可能です。データは次の情報を含みます:

1.2 PLATEAUデータの選定

まず、どの都市やエリアのデータが必要かを決める必要があります。PLATEAUは日本の主要都市に対応していますので、プロジェクトのターゲット都市や地域を選定します。

  1. 公式サイトにアクセス

  2. データダウンロードページに進む

    • 公式サイトのメニューから「データダウンロード」のセクションに移動します。
    • 3D都市モデルダウンロード」のページを選びます。
  3. 必要な都市・エリアを選ぶ

    • ダウンロードページには日本のさまざまな都市のリストが表示されます。必要な都市やエリアを選択してください。
    • 各都市やエリアのデータには、建物の3Dモデルや用途、カテゴリ、道路など、さまざまな地理情報が含まれています。
  4. データ形式の選択

    • PLATEAUデータは、CityGMLGeoJSONCSVなどの形式で提供されます。プロジェクトで使用するフォーマットを選んでください。
    • 3Dモデルを使用する場合は、CityGML形式をダウンロードします。また、データ処理や連携に適した形式(例: CSVやGeoJSON)が必要な場合は、それを選択します。

1.3 PLATEAUデータのダウンロード

  1. エリアごとのデータを確認

    • ダウンロードページでは、エリアごとにデータが分かれています。ターゲットとするエリアに応じて、該当するデータを確認し、ダウンロードします。
    • エリアが細分化されている場合は、メッシュ単位(区画ごとのデータ)で選択可能です。
  2. データのダウンロード

    • 選択したエリアのデータをダウンロードします。ダウンロードされたファイルは通常、圧縮された形式(.zip)で提供されます。
    • ダウンロードしたファイルを解凍して、中に含まれるデータを確認します。CityGMLファイルやCSVファイル、またはGeoJSONファイルが含まれているはずです。
  3. 必要なデータ要素を確認

    • 解凍されたデータには、建物の高さや形状、カテゴリなどの詳細情報が含まれています。これらの要素がプロジェクトで使用できることを確認してください。