データタイルマップ - 利用方法
1. 地図として表示
通常の地図タイルと同じ分割方法ですので，Leaflet，OpenLayers, Google Maps API等の地図表示JavaScriptライブラリを使って，Webブラウザ上に表示することができます．ただし，シームレス地質図などではもともと表示用のタイルですのでそのまま表示しても意味がありますが，通常はデータタイルマップと呼ぶ以上はそれ以外の使い方をしなければあまり意味がありません．
2. 特定の位置の値を取得
緯度経度などで特定の位置を指定して，その位置に対応する値を取得するために利用できます．
なお，データタイルマップにはズームレベルの概念があります．指定できるのはあくまでもセル(矩形範囲）であり，その大きさはズームレベルにより異なります．また，値の示す意味がその範囲の中央の値なのか，平均値なのかといったことはデータタイルマップを提供するサービスに依存します（例えばシームレス標高サービスではセルの北西端の値です）．
特定の値を取得するステップは以下の通りです．
- 緯度経度等からタイル座標及びピクセルのタイル内座標を求める
- 通常はLeaflet等の地図ライブラリ内の関数で行えます
- 独自に計算してもさほど複雑な式ではありません
- タイル画像から該当するピクセルの色を取り出し，物理量に変換する
- Imageオブジェクト作成してタイル画像をロードし，Canvasを使って色を取り出します
- そのデータタイルマップの仕様に従って，R,G,B値を物理量に換算します
以下に，ピクセルからデータを取り出す部分のJavaScriptによるサンプル関数を示します．
/// ****************
// getPixelValue, タイルURL，座標，ズームレベルを指定して"ピクセル値"を取得する関数
// 戻り値はプロミスで，成功時にピクセル値，無効値の場合はnullを受け取ります
// ( ピクセル値 = R * 256 * 256 + G * 256 + B )
// url: タイル画像のURLテンプレート．
// ズームレベル，X, Y座標をそれぞれ{z},{x},{y}として埋め込む
// rx, ry: タイル座標(実数表現，小数部でタイル内の位置も示す）
// z: ズームレベル
// ****************
function getPixelValue( url, rx, ry, z ) {
var
x = Math.floor( rx ), // タイルX座標
y = Math.floor( ry ), // タイルY座標
i = ( rx - x ) * 256, // タイル内i座標
j = ( ry - y ) * 256, // タイル内j座標
img = new Image();
return new Promise( function( resolve, reject ) {
img.crossOrigin = 'anonymous'; // 画像ファイルからデータを取り出すために必要です
img.onload = function(){
var
canvas = document.createElement( 'canvas' ),
context = canvas.getContext( '2d' ),
pv,
data;
canvas.width = 1;
canvas.height = 1;
context.drawImage( img, i, j, 1, 1, 0, 0, 1, 1 );
data = context.getImageData( 0, 0, 1, 1 ).data;
pv = data[ 0 ] * 256 * 256 + data[ 1 ] * 256 + data[ 2 ];
if ( data[ 3 ] !== 255 || pv === 8388608 ) {
pv = null;
}
resolve( pv );
}
img.onerror = function(){
reject( null );
}
img.src = url.replace( '{z}', z ).replace( '{y}', y ).replace( '{x}', x );
} );
};
上記の関数を使ったOpenLayers 4でのサンプルプログラムを以下に示します．
3. 3Dで表示
標高データの場合はCesium等の3D描画ライブラリで地形データとして利用できます．Cesiumの場合は利用するための追加プログラムが必要です（本サイトでPNG標高タイルTerrainProviderを公開しています）．
なお，標高データ以外のデータタイルマップでも，PNG標高タイルTerrainProviderを使って，標高データの代りに地形に反映させることができます．PNG標高タイルでは値を符号付整数として扱いますが，符号なし整数のデータセットであっても2の23乗までは同じ値なので問題なく表示できます．
※PNG標高タイルTerrainProviderは値をメートル単位として扱います．起伏が激しすぎる（または緩すぎる）場合は，オプションのheightScaleを指定して調整してください．
4. タイル画像を処理して地図表示
通常の地図描画ライブラリには，何らかの方法で元タイルを処理してから地図に表示する方法があります．これを利用して，用途に応じた何らかの処理をデータタイルマップのタイルに加えて，人間が理解しやすいように変換してから表示することができます．例えば，標高タイルを処理して標高ごとに色分けした段彩図を描くことができます（シームレス標高サービスの段彩タイルと同じ機能がJavaScriptで行えます）．さらに，隣のセルの値との差分を取って傾斜量図を描くことも可能です．
また，PNGパレットタイルでは，ある条件を満たした凡例だけを抜き出して表示することなどが簡単に行えます．OpenLayers 4を使ったサンプルプログラムを以下に示します．
5. 複数のデータマップタイルを使って演算し，地図表示
より高度な使い方として，複数のデータタイルマップのタイルから演算して，その結果を地図表示させることできます．例えば傾斜量と降水量のタイルから地滑り危険地を抽出して表示するといったことが可能になるはずです．