openlayers3でタイル画像化(透過処理)した平面図を表示する

OpenLayersを利用して、設計・工事図面のCADデータを背景地図(地理院地図等)の上に重ねて表示する、独自の”ウェブマップ”を作成することに挑戦しました。

設計・工事図面等のCADデータを、AutoCADから地理院仕様のタイル画像にします。作成したタイル画像はOpenLayersを利用して地図に表示させることができる仕様になっています(※1)。
(※1)正確には、そういう仕様になるように、いろいろ調べてタイル画像を作る仕組みを担当者が考えました。

▼平面図のサンプルです。

01_平面図p21

▼AutoCADで位置を合わせます。
02_AutoCADで位置合わせ

この状態で図面をタイル画像化します。

次に、OpenLayersを使った地図に表示するためのウェブページを編集します。htmlとjavascriptの知識が必要とされます。

▼ウェブページに表示させることができました。下図の事例では背景地図に地理院タイル(標準地図)を読み込んでいます。

04_ブラウザで開いたところ

▼背景地図を切り替えることも可能です。

05_ベース変更(航空写真)

このように、図面(CADデータ)をタイル画像化することにより、他の地図と重ね合わせた独自の”ウェブマップ”を作成することができるようになりました。

サンプルページをご覧下さい。

de_15_openlayers00

画面ははめ込み合成です。

ウェブブラウザで表示・操作するので、パソコンでもスマホでも、そしてWindowsでもMacでも、地図と重なった図面を見ることができるのです!

いろいろな使い方が考えられますね。夢が膨らみます。

(式)

広告

openlayers3でタイル画像化(透過処理)した平面図を表示する」への1件のフィードバック

  1. ピンバック: [キョウシン・ラボ]openlayers3でタイル画像化(透過処理)した平面図を表示する « ksewebmap

コメントを残す

以下に詳細を記入するか、アイコンをクリックしてログインしてください。

WordPress.com ロゴ

WordPress.com アカウントを使ってコメントしています。 ログアウト / 変更 )

Twitter 画像

Twitter アカウントを使ってコメントしています。 ログアウト / 変更 )

Facebook の写真

Facebook アカウントを使ってコメントしています。 ログアウト / 変更 )

Google+ フォト

Google+ アカウントを使ってコメントしています。 ログアウト / 変更 )

%s と連携中