1枚のPNG画像に地図と高度データを埋め込み

複数のPNG画像をそのままバイナリで結合すると、多くのブラウザやアプリケーションでは 1枚目の画像のみが表示されます。一方、2枚目の画像はJavaScript等でPNGヘッダ・フッタを 探してその部分からインスタンス化すればデータPNGなどとして用いることができます。 このサンプルは、1枚目の画像にマウスカーソルを合わせると表示されていない2枚目の画像から 高度情報を計算してその地点の高度を表示します。

リポジトリ

マップ

画像および高度データは「地理院タイル」を使用しています。

Elevation

Move the mouse over the image to see the elevation.