画像ビューア(OpenLayers3)デモ
2015年01月17日
OpenLayers3を用いて、Google Mapsのように拡大・縮小・スクロール可能な画像ビューアを作成しました。
イラストマップなどの位置情報がない画像も表示することができます。
当社で作成したデモについて、以下にご紹介します。
2015年 世界地図カレンダー
当社が毎年末に作成し、お客様向けに配布しているカレンダー(世界地図 2015年)を、画像ビューアで表示しました。
画像に(正確な)座標情報は付与せず、イラストマップ等のみを表示した場合のデモとなります。
2015年 カレンダー(世界地図)

表示する画像は地図に限らず、例えば、カタログやパンフレットなどの画像も表示することができます。
鉄道路線図(東京)
東京近郊の鉄道路線図データを、画像ビューアで表示しました。
路線図の画像に大まかな位置情報を付与して、地理院地図の上に重ねて表示したデモです。
鉄道路線図(東京)

デフォルメされた地図でも、ある程度までは既存の地図上に重ねて表示することができます。
(参考)画像に正確な座標情報を付与して、地図上に重ね合わせた表示例
ハザードマップの浸水深などの画像も、ジオリファレンスにより正確な座標情報を付与することで、地図上に重ねて表示することが可能です。
- 【ジオリファレンスした画像を、他の地図上に重ね合わせた例】
- 下田市津波ハザードマップ(PC版)
- 下田市津波ハザードマップアプリ


下田市津波ハザードマップアプリ >>記事を読む