はじめに
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
1 2 3 4 5 6 7 8 9 10 |
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に設定します。
1 2 3 4 5 6 7 8 9 10 11 |
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: '電子国土基本図(オルソ画像)' }); |
3D表示されています。
背景の表示は簡単にできましたが、CesiumJSには、地形データを扱うTerrainや、3Dデータを扱うglTFとかの実装方法を習得する必要があるので、なかなか手強いです。