「Cesium」を利用して電子国土基本図（オルソ画像）の3D表示

はじめに

3D GISの勉強ということで、「Cesium」を利用して電子国土基本図（オルソ画像）の3D表示してみました。
「Cesium」は、Webブラウザ上で3D地図が利用できる、オープンソースのJava Scriptライブラリで、国土交通省の全国3D都市モデルの整備・オープンデータ化プロジェクトである、PLATEAU（プラトー）にも採用されています。

CesiumJSダウンロード

「Cesium」には、「Cesium ion」と「CesiumJS」があり、「Cesium ion」は、保有している3Dデータをアップロードして、最適なデータに変換してくれる仕組み、「CesiumJS」Webブラウザ上で3D地図が利用できる、
Java Scriptライブラリです。
「CesiumJS」は以下のURLからダウンロードし…

「Apps/CesiumViewer」と「Source」フォルダをIISのサイトにコピーしました。

CesiumJSの表示

デフォルト背景の表示

Apps/CesiumViewer配下にindex.htmlがあるので開く

何もせずに、自分の住んでいる地域が、3D表示されています。
でも自分の家は確認できませんでした。航空写真がちょっと古いですね。

オープンストリートマップの表示

続いて背景の地図をオープンストリートマップに変更してみました。
CesiumViewer.jsを以降のように変更します。CesiumJSではオープンストリートマップ用のクラスが用意されているので、そいつを使います。

CesiumViewer.js

var imageryProvider;
  //if (defined(endUserOptions.tmsImageryUrl)) {
  //  imageryProvider = new TileMapServiceImageryProvider({
  //    url: endUserOptions.tmsImageryUrl,
  //  });
  //}
  imageryProvider = new OpenStreetMapImageryProvider({
      url: 'https://a.tile.openstreetmap.org/',
      credit: 'OSM'
  });

var imageryProvider;

//if (defined(endUserOptions.tmsImageryUrl)) {

// imageryProvider = new TileMapServiceImageryProvider({

// url: endUserOptions.tmsImageryUrl,

// });

//}

imageryProvider = new OpenStreetMapImageryProvider({

url: 'https://a.tile.openstreetmap.org/',

credit: 'OSM'

});

3D表示されています。

地理院タイル（オルソ画像）の表示

続いて背景の地図を国土地理院提供の地理院タイル（オルソ画像）に変更してみました。
地理院タイルではオープンストリートマップ用のクラスが利用できるので、
オープンストリートマップ用のクラスをを使います。写真なので拡張子をjpgに設定します。

var imageryProvider;
  //if (defined(endUserOptions.tmsImageryUrl)) {
  //  imageryProvider = new TileMapServiceImageryProvider({
  //    url: endUserOptions.tmsImageryUrl,
  //  });
  //}
  imageryProvider = new OpenStreetMapImageryProvider({
      url: 'https://cyberjapandata.gsi.go.jp/xyz/ort/',
      fileExtension: 'jpg',
      credit: '電子国土基本図（オルソ画像）'
  });