• 19
    いいね
  • 0
    コメント
この記事は最終更新日から1年以上が経過しています。

はじめに

今回の記事では,国土地理院の「地理院タイル」を,オープンソースのデジタルアース「Cesium」に組み込む手法について解説します.

私はアーカイブズ・シリーズについての記事で,Cesiumのメリットの一つとして以下を挙げました.

国土地理院のタイルデータなど,オープンな地図リソースを利用可能

ヒロシマ・アーカイブ」「東日本大震災アーカイブ」などには,国土地理院の「地理院タイル」と「標高タイル(DEM)」が組み込まれています.この件については以下の記事でも触れられています.

Google Earth APIでは,基本的に「Google仕様のタイルデータ」しか使えませんでした.それに対してCesiumでは,地理院タイルやオープンストリートマップなど,オープンな地図リソースを自由に利用できます.このことにより,例えば下の画像のように「現在/被爆直後の空中写真の比較」などが可能になります.

地理院タイル(空中写真1945-50)の利用

地理院タイルの組み込み

JapanGSIImageryProvider / TerrainProviderを使う

kochizufanさんが,地理院の地図タイルおよびDEMタイルをCesiumに読み込むライブラリを公開されています.詳細は以下の記事をご参照ください.

「ヒロシマ・アーカイブ」では,このライブラリを利用しています.

地図タイル

例えば以下のように記述します.詳細は上記リンク先をご覧ください.

javaScript
var viewer = new Cesium.Viewer('cesiumContainer', {
    imageryProvider: new Cesium.JapanGSIImageryProvider({
        layerLists: ["ort","relief","std"]
    }),
    terrainProvider: new Cesium.JapanGSITerrainProvider({}),
    baseLayerPicker: false,
    mapProjection: new Cesium.WebMercatorProjection(Cesium.Ellipsoid.WGS84)
});

「ヒロシマ・アーカイブ」では,地理院タイルのうち「空中写真1945-50」のデータを用いています.ただし,そのまま読み込むだけでは,下記の画像のように白い部分が飛び,まぶしくなってしまいます.また,ズームアウトした時に画像存在エリアが青色に表示されるため,違和感があります.

空中写真1945-50データをデフォルト設定で読み込んだところ

そこで「ヒロシマ・アーカイブ」では,brightness(明度)・saturation(彩度)のパラメータを以下のように設定することで,まぶしさを低減し,ズームアウトしたときの違和感をなくしています.実際にどのように表示されているのかについては,ぜひ実機でご確認ください

javaScript
hiroshimaPhoto = layers.addImageryProvider(new Cesium.JapanGSIImageryProvider({
    layerLists: [{
        "id": "ort_USA10",
        "zoom": "1-18",
        "ext": "png"
    }],
    credit : 'Geospatial Information Authority of Japan'
}));
hiroshimaPhoto.saturation = 0;
hiroshimaPhoto.brightness = 0.70;

Cesiumではこの例のようにImagery Layersの色味を変えたり,複数のレイヤを重ねたりして,さまざまな地図表現を行えます.詳細については以下のチュートリアルをご覧ください.

DEMタイル

viewerを初期化したのちに,以下のように記述します.

javaScript
var terrainProvider = new Cesium.JapanGSITerrainProvider({});
viewer.terrainProvider = terrainProvider;

「ヒロシマ・アーカイブ」では,地形表示のためにJapanGSITerrainProviderを利用しています.その理由として,Cesiumデフォルトの地形タイル(assets.agi.com/stk-terrain/world)は精度が荒く,平坦な広島市街では,違和感が生じてしまうことがあります.

下の画像は地理院DEMタイルとCesiumデフォルトの地形タイルをそれぞれ「ヒロシマ・アーカイブ」に組み込んでみたものです.カメラは同一です.Cesiumデフォルトの地形タイルのほうは全体的に盛り上がってしまっており,特に赤丸で囲んだところには,実空間にはない凸凹が生じてしまっていることがわかります.

地理院DEMタイルとCesiumデフォルトの地形タイルの比較

このように地理院DEMタイルを用いることで,精度の高い立体地形を再現できます.ただし,データ量・描画ともに,少々重いという難点があります.そこで,意図的にheightmapTerrainQualityを下げ,不要なオプションをfalseにすることでパフォーマンスを改善できます.

「ヒロシマ・アーカイブ」の場合は以下のように設定しています.

javaScript
viewer.terrainProvider.heightmapTerrainQuality = 0.1;
viewer.terrainProvider.hasVertexNormals = false;
viewer.terrainProvider.hasWaterMask = false;

terrainProviderのオプションについては公式リファレンスを参照してください.

この投稿は wtnvStudio Advent Calendar 20155日目の記事です。