More than 1 year has passed since last update.

【Node.js】ウェブ上の地図にPLATEAUの建物を反映させてみた

Last updated at 2022-06-26Posted at 2022-06-25

国土交通省の３D都市モデルPLATEAUを使ったウェブアプリケーションを作るため、JavascriptのライブラリCesiumJSを使ってみました。

環境

Node.js
使用エディタ： VSCode
動作確認OS ： Windows10

PLATEAU

広島県呉市のデータを例にします。
ここからダウンロード
https://www.geospatial.jp/ckan/dataset/plateau-34202-kure-shi-2020

この中から 3D Tiles, GeoJson, MVT, Shape
＞　詳細　＞　ダウロード

ダウンロードデータを解凍すると

この中から
01_building > 34202_kure-shi_2020_bldg_notexture

これをどこかサーバーに保存します。

AWS S3 の場合

サーバーに保存するといった時点で、多くの人が脱落しそうなので、ここでは、AWSのS3に保存するケースを説明します。

バケットの作成

AWS コンソールにアクセス
AWS S3 > バケットを作成

バケット名入力、
リージョン選択

このバケットのブロックパブリックアクセス設定
「パブリックアクセスをすべてブロック」のチェックを外し、
「パブリックアクセスのブロックをすべてオフにすると・・・」のチェックを入れる。

「パケットを作成」をクリック

バケットができる。

バケットポリシーの編集

アクセス許可　＞　バケットポリシー　を編集

ポリシーを以下のように設定する

{
   "Version":"2012-10-17",
   "Statement":[{
    "Sid":"PublicReadForGetBucketObjects",
         "Effect":"Allow",
      "Principal": "*",
       "Action":["s3:GetObject"],
       "Resource":["arn:aws:s3:::[バケット名]/*"
       ]
     }
   ]
 }

CORS設定

アクセス許可　＞　Cross-Origin Resource Sharing (CORS)

[
    {
        "AllowedHeaders": [
            "Authorization"
        ],
        "AllowedMethods": [
            "GET",
            "HEAD",
            "POST"
        ],
        "AllowedOrigins": [
            "オリジンを指定" （例）http://XXX.0.0.1:5500
        ],
        "ExposeHeaders": [
            "Access-Control-Allow-Origin"
        ]
    }
]

そして、先ほどのPLATEAU のファイル（dataフォルダ、tileset.json）をアップロードします。

作成

Node.js で環境を構築し、CesiumJS というライブラリを使用します。

このあたりのところは、ほぼこちらの記事そのままです。先人の知恵ありがとうございます。
Cesium js の始め方：インストールから解説します！

まずは、最初の設定

$ mkdir cesium-project
$ cd cesium-project
$ npm init -y

CesiumJS　をインストール

$ npm install cesium --save

コード

以下の3つのファイルを作成。

index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>cesium</title>
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no">
    <link rel="stylesheet" href="node_modules/cesium/Build/Cesium/Widgets/widgets.css">
    <link rel="stylesheet" href="stylesheet.css">
  </head>
  <body>
    <div id="cesium" class="cesium"></div>
    <script src="node_modules/cesium/Build/Cesium/Cesium.js"></script>
    <script src="main.js"></script>
  </body>
</html>

stylesheet.css

body {
  margin: 0;
}

.cesium {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
}

main.js

(function() {
    "use strict";
  
    var viewer = new Cesium.Viewer("cesium");
  
      //初期の視点（カメラ）の位置 日本の中国地方の上空にカメラが来るように設定。
    viewer.camera.setView({
     destination: Cesium.Cartesian3.fromDegrees( 132 , 34, 500000), //経度・緯度、高さ
     orientation: {
       heading: 0, // 水平方向の回転度（ラジアン）
       pitch: -1.6, // 垂直方向の回転度（ラジアン） 上を見上げたり下を見下ろしたり
       roll: 0
    }
  });

 
  viewer.scene.primitives.add(new Cesium.Cesium3DTileset({
    url:"https://XXX.com/tileset.json"   //tilesetを保存したURL
  }));

  
}());