電子情報通信学会ワードテンプレート (タイトル)

Size: px

Start display at page:

Download "電子情報通信学会ワードテンプレート (タイトル)"

ふじよしやなぎしま
5 years ago
Views:

DEIM Forum 2013 F-9 略地図画像をオーバレイ表示する WebGIS Sketch maps overlaid on WebGIS 北島領人井上潮東京電機大学大学院工学研究科 120-8551 東京都足立区千住旭町 5 番 E-mail: kitajima.ryoto@gmail.com, inoue@c.dendai.ac.

1 DEIM Forum 2013 F-9 略地図画像をオーバレイ表示する WebGIS Sketch maps overlaid on WebGIS 北島領人井上潮東京電機大学大学院工学研究科東京都足立区千住旭町 5 番 kitajima.ryoto@gmail.com, inoue@c.dendai.ac.jp あらまし地図コンテンツの普及に伴い,Web 上には Google マップや Yahoo! ロコのようなオンライン地図と, 企業や店舗のアクセスページに見られる略地図が存在している. オンライン地図は, 建物や道路などのオブジェクトの位置を正確に表すが, 表示オブジェクトの過密化により地図の理解を妨げている. 一方, 略地図は, 非常に分かりやすいもののオブジェクトの位置が正確ではない. 本研究では, オンライン地図の上に略地図を重ねて表示するシステムを提案する. このシステムでは, 略地図の領域がオンライン地図と大雑把に一致するように予備変形を行った後, 略地図に記載された道路の削除を行い, 最後に略地図に操作点を加えて詳細な変形を行うことで, 略地図とオンライン地図の双方に記載されたオブジェクト同士を対応付ける. これにより, 位置の正確性と分かり易さを両立させた地図を利用可能にする. キーワード略地図,WebGIS, オンライン地図, アフィン変換 1. はじめに近年,Google マップや Yahoo! ロコに代表されるオンライン地図が多く提供されるようになった. これらの地図は, 建物や道路などのオブジェクトの位置を正確に表示する反面, あらゆる情報を正確に表示することから表示オブジェクトの過密化が起こり, かえって地図の理解を妨げている. 一方, 企業や店舗の Web サイトでは, アクセスページなどで略地図を見る機会が多い. 略地図は, 制作者により道路の単純化, 小さな建物の省略などがなされているため, 非常に分かりやすいが, 表示オブジェクトの位置が必ずしも正確ではない. 本研究では, オンライン地図の上に略地図を重ねて表示するシステムを開発し, 位置の正確性を保ったまま分かりやすい地図を利用可能にすることを目指す. 関係は考慮していない. 北山ら [4] は, 種類分けした略地図の地理的正確性を評価している. この研究は, 地物間の相対的な方向や距離によって正確性を判定しているが, 絶対的な位置については評価をしていない. 本研究は, 略地図に記載されている地物の絶対的な位置を求めることを目的として点で, これらの研究とは異なる. 3. 提案手法本システムの操作の流れを図 1 に示す. 2. 研究動向略地図に関する研究は, 従来から盛んに行われている. 代表的なものは, 中澤ら [1] などの動的に略地図をつくる研究である. 一方で, 有川久保田 [2] などの略地図記述規格の整備も行われている. このように, 略地図をつくる, 又は, つくる環境を整える研究が盛んに行われているため, 今後, 略地図の流通量が増えることが予想できる. よって, つくられた略地図をもっと有効活用したいというようなニーズが生まれることが考えられる. そういったニーズに伴い,Schwering と Wang[3] は, 本研究と同様にオンライン地図と略地図の対応付けを試みる研究を行っている. しかし, この研究は地図に記載されている地物の対応関係に着目しており, 位置や距離などの定量的な図 1. 操作の流れユーザがオンライン地図を開くと, ブラウザ上に地図が表示される. 次に, 入力フォームに略地図画像を入力すると, オンライン地図上に略地図が重なって表示される. この状態では,2 つの地図が重なって表示されているものの, 両地図に表示されているオブジェクトの対応付けがなされていない. 次に, 予備変形, 道路の削除, 詳細な変形の 3 つの手法により略地図を変形することで, オブジェクトの対応付けを行う. こ

れらの操作は, クリックやドラッグなどのマウス操作でユーザが直感的に行えるようにする ( 図 2). 図 2. 略地図画像の変形また, 略地図変形の過程において, オンライン地図のスケール変更, 回転を随時行うことができる.

オンライン地図本研究室では, オンライン地図の描画をクライアントサイドで行う CMap[5] が開発されている.

2. 略地図画像の読み込み本システムでは,HTML のフォーム要素に JavaScript でイベントハンドラを定義することにより, ユーザが入力した略地図画像を読み込む. そして, 読み込んだ略地図画像を Canvas を用いて CMap 上に重ねて表示する. 4.3.

次に道路の削除処理 ( 後述 ) により略地図画像上の道路を削除するが, 道路の削除を行った後にオブジェクトの対応付けを行うと, 道路がないため, オブジェクトの位置関係を知るのが難しくなってしまう. そこで, 予備変形により道路の削除の前に, ある程度の対応付けを行う.

2 れらの操作は, クリックやドラッグなどのマウス操作でユーザが直感的に行えるようにする ( 図 2). 図 2. 略地図画像の変形また, 略地図変形の過程において, オンライン地図のスケール変更, 回転を随時行うことができる. これらの操作で, 地図を変形し, 略地図に表示された地物の位置をオンライン地図と対応付けることにより, 正確な位置情報を取得できる. 最後に, 両地図が見やすくなるように略地図の透明度を選択する. 4. システムの設計 4.1. オンライン地図本研究室では, オンライン地図の描画をクライアントサイドで行う CMap[5] が開発されている. CMap は図 3 に示すように構成されており, 地図の描画をクライアントサイドで行うため, 描画をサーバサイドで行う既存の WebGIS に比べ, 地図の表示に関する自由度が高く, 無段階での地図のスケール変更, 回転を行うことができる. 図 4. 提案システムの構成 4.2. 略地図画像の読み込み本システムでは,HTML のフォーム要素に JavaScript でイベントハンドラを定義することにより, ユーザが入力した略地図画像を読み込む. そして, 読み込んだ略地図画像を Canvas を用いて CMap 上に重ねて表示する予備変形予備変形により, 略地図画像を変形し, 略地図と CMap に表示されているオブジェクトの対応付けを大雑把に行う. 次に道路の削除処理 ( 後述 ) により略地図画像上の道路を削除するが, 道路の削除を行った後にオブジェクトの対応付けを行うと, 道路がないため, オブジェクトの位置関係を知るのが難しくなってしまう. そこで, 予備変形により道路の削除の前に, ある程度の対応付けを行う. 略地図画像は, 利用者を目的地に案内する目的で描かれるため, 目的地周辺を大きく詳細に描き, 目的地から離れた場所は小さく描かれる傾向がある. よって, 予備変形ではその性質を利用した変形手法を用いる. 具体的には, ユーザは略地図画像を中と外の 2 つの領域に分割する ( 図 5). 図 3. CMap の構成本システムでは, オンライン地図として CMap を利用し,CMap に略地図画像を重ねて表示する機能を実装する ( 図 4). なお, 描画に用いる Canvas は, ブラウザによっては動かない技術である. 本システムでは動作対象とするブラウザを,Google Chrome 及び Firefox に限定することで, この問題を回避する. 図 5. 予備変形 1

その後, 分割された領域毎に略地図画像を拡大縮小し, CMap との対応付けを行う ( 図 6). 4.4.1. 実験道路オブジェクトの削除が, 上記の手法で略地図画像上の道路を消すことができるかを確かめる目的で実験を行った. 実験には,Google 画像検索を用いて略地図東京というキーワード検索から無作為に取得した略地図画像 30 を用いた.

3 その後, 分割された領域毎に略地図画像を拡大縮小し, CMap との対応付けを行う ( 図 6) 実験道路オブジェクトの削除が, 上記の手法で略地図画像上の道路を消すことができるかを確かめる目的で実験を行った. 実験には,Google 画像検索を用いて略地図東京というキーワード検索から無作為に取得した略地図画像 30 を用いた. 道路や建物などの色情報を調べた結果を表 1 に示す. 表 1. 実験結果道路の色道路以外の色一色似た色複数色違う色同じ色 13 (43%) 14 (47%) 3 (10%) 27 (90%) 3 (10%) 図 6. 予備変形道路オブジェクトの削除 CMap 及び, 略地図には, 道路オブジェクトが存在するが, 基本的に道路は線として描かれており, 線同士を重ねたところで地図が分かりやすくなるというものではない. よって, 本システムでは, CMap の上に略地図画像を重ねた後, 略地図上の道路オブジェクトの削除を行う. また, この後, 詳細な変形 ( 後述 ) により略地図画像を変形し,CMap と略地図に表示されているオブジェクトの対応付けを行うが, 道路の削除には, 対応付けさせるオブジェクトを減らし, ユーザのドラッグ操作量を減らす目的もある. 道路オブジェクトの削除は, 以下のように行う. まず, ユーザは略地図画像上の道路をクリックする. すると, クリックしたピクセルの色情報を取得する. 次に, 取得した色が使われている略地図画像のピクセルをすべて透明にする. 道路オブジェクトの削除を行った略地図の一例を図 7 に示す. 実験の結果, 道路が一色で描かれている画像が 43%, 似た色で描かれている画像が 47% であった. なお, 画像の中には, 一見一色で描かれているように見えるが, 実際には画像圧縮により微妙に変化した複数の色で描かれている画像が複数あった. 図中の似た色とは, この画像圧縮により変化した複数の色のことである. また,90% の画像において, 道路以外のオブジェクトは道路とは全く違う色で描かれていた. この実験結果から, 似た色を考慮し, 透明にする色に幅を持たせる必要があるものの, 色情報による方法で, 道路を高い確率で消すことができることが分かった詳細な変形画像処理の分野で, よく使われている手法のひとつに座標変換がある. 座標変換は, 画像を構成している一画素ごとの座標位置を移動する場所の座標位置に変換していけば, 新しい位置にその画像が組み立てられるというものである. 本システムでは, 略地図画像の変形に座標変換の中で代表的なもののひとつであるアフィン変換を用いる. アフィン変換は, 変換前の座標を (x, y), 変換後の座標を (x', y') としたときに, 次の式が成り立つ線形変換である. 式中の係数 a,b,c,d は変形成分を,e,f は移動成分を表している. ( x y ) = ( a b c d ) ( x y ) + ( e f ) 図 7. 道路オブジェクトの削除まず, 変形成分を考える. 図 8 に示すように, 三角形のポリゴンを描画する際, 3 つの頂点のうち 1 つを基準にすると, 残りの頂点にベクトルを 2 本伸ばすことができる.

図 8. アフィン変換変形前画像のベクトルを A, B, 変形後画像のベクトルを A',B' とすると, ベクトル A,B にアフィン変換をかけた結果が, ベクトル A', B' になればよいため, 以下の式が成り立つ. する際に, 略地図画像にユーザがドラッグ操作可能な複数の操作点を縦横等間隔で付加し, 付加した操作点の 3 つを結んだ三角形毎にアフィン変換を適用する ( 図 9).

A x = a A x + c A y (1) A y = b A x + d A y (2) B y = a B x + c B y (3) B y = b B x + d B y (4) 式 (1), (3) を行列式で表すと, A x = A x A y a (1)' B x = B x B y c (2)' となり, 以下の式を計算することで, 係数 a,c を求めることができる.

4 図 8. アフィン変換変形前画像のベクトルを A, B, 変形後画像のベクトルを A',B' とすると, ベクトル A,B にアフィン変換をかけた結果が, ベクトル A', B' になればよいため, 以下の式が成り立つ. する際に, 略地図画像にユーザがドラッグ操作可能な複数の操作点を縦横等間隔で付加し, 付加した操作点の 3 つを結んだ三角形毎にアフィン変換を適用する ( 図 9). 操作点の座標を (x, y), 操作点をドラッグして移動させた後の座標を (x', y') とすると, 上記の計算により, 係数 a,b,c,d,e,f を求めることで, 操作点をドラッグして移動させた後の座標を求めることができる. これによりユーザのドラッグ操作に応じて略地図画像を部分的に変形し, オンライン地図と略地図に表示されているオブジェクトの対応付けを行う. A x = a A x + c A y (1) A y = b A x + d A y (2) B y = a B x + c B y (3) B y = b B x + d B y (4) 式 (1), (3) を行列式で表すと, A x = A x A y a (1)' B x = B x B y c (2)' となり, 以下の式を計算することで, 係数 a,c を求めることができる. また, 係数 b,d についても同様の計算で求めることができる. a = A x A y 1 A x (1)'' c = B x B y 1 B x (2)'' 次に, 移動成分を考える. 図 8 に示したベクトル A, B において基点のピクセル座標を (x 1, y 1 ), ベクトル A', B' において基点のピクセル座標を (x 0, y 0 ) とすると, 先の変形より, (x 1, y 1 ) は以下の位置に描画される. (a x 1 + c y 1, b x 1 + d y 1 ) これを (x 0, y 0 ) の位置まで移動させたいため, 係数 e, f は, 以下のようになる. e = x 0 a x 1 + c y 1 f = y 0 b x 1 + d y 1 本システムでは, 略地図画像を CMap に重ねて表示図 9. 操作点の付加 5. 評価本システムに対して 3 つの評価を行う. 1 つ目は, 道路オブジェクトの削除についての評価, 2 つ目は, 詳細な変形についての評価, そして, 3 つ目は, 提案システム全体についての評価である. なお, 評価には, Google 画像検索を用いて略地図千代田区, 略地図足立区, 略地図渋谷区といったようなキーワード検索から無作為に取得した東京都内の略地図画像 100 を用いた道路オブジェクトの削除表 1 に示した実験結果から, 道路オブジェクトの削除の際, 透明にする色に幅を持たせる必要があることが分かっている. しかし, 色の幅が広くなるほどプログラムの処理時間が長くなり, また, 道路以外のものが透明になってしまう可能性も大きくなる. そこで, 取得した色に対して,RGB で幅を ±3, 4, 5 と広げていったときの処理時間と透明化の精度を評価する. なお, 透明化の精度は, 主観により, ( 道路の削除に成功 ), ( 少し残るものの道路の削除にほぼ成功 ), ( 道路が 3 割以上残っている, もしくは, 道路以外のオブジェクトが少し消える ), ( 道路が消えない, もしくは, 道路以外のオブジェクトも消える ) の 4 段階評価で行うものとする. 評価の結果を表 2 に示す.

5 RGB 各要素値の幅平均処理時間 ( 秒 ) 削除精度表 2. 評価道路オブジェクトの削除平均の透明化の精度 ±3 ±4 ±5 ±6 ±7 ± 人間は, ボタンを押してから 4 秒以内に反応がなければ, 何か問題が起きたと考えるということが Web サービスを作るうえでよく言われている. よって, 処理時間が 4 秒以上になることは好ましくない. 実験結果から,±6 であれば許容の処理時間で十分な精度が出ることが分かる. 略地図において十分な位置精度が得られるが, 操作時間が約 2 分半もかかることが分かる提案システム表 3 から分かるように, 詳細な変形のみでは, 十分な位置精度を得るのに 5 5 もの操作点が必要となり, また, 操作時間がかかりすぎてしまう. この操作点の数と操作時間の問題を予備変形及び, 道路オブジェクトの削除によりどこまで解決できるかを確かめる目的で評価を行う. 建物や道路などのオブジェクトの位置ズレが 45 ピクセル以下になることを条件に, 詳細な変形において必要となる操作点の数と, 条件を満たすようにオブジェクトの対応付けを行う際にかかる平均操作時間を調べたものが表 4 である. この結果より, 予備変形や道路オブジェクトの削除を行うことで必要な操作点の数を減らすことができ, また, それによりユーザの操作量を減らすことができることが分かった. 具体的には,4 4 の操作点があれば 81% 以上の略地図において十分な位置精度が得られ, また, 操作時間も平均 1 分半以内に抑えることができる. 表 4. 評価提案システム 5.2. 詳細な変形詳細な変形において, 付加する操作点は, 数が多いほど細かな変形が可能になるが, その分ドラッグ操作が増え, 操作が面倒になる. したがって, 操作点の数と密度は非常に重要な問題である. そこで, 予備変形及び, 道路オブジェクトの削除は行わず, 詳細な変形のみを用いて, 付加する操作点の数を 3 3,4 4,5 5 と変え, オブジェクトの対応付けの精度を評価する. オブジェクトの位置ズレが 45 ピクセル以下になることを条件に, 詳細な変形において必要となる操作点の数と, 条件を満たすようにオブジェクトの対応付けを行う際にかかる平均操作時間を調べたものが表 3 である. 操作点の数詳細な変形のみ ( 表 3 の結果 ) 予備変形 + 詳細な変形予備変形 + 道路オブジェクトの削除 + 詳細な変形 0 (0%) - 0 (0%) - 18 (18%) 67 秒 13 (13%) 155 秒 17 (17%) 172 秒 63 (63%) 85 秒 60 (60%) 219 秒 56 (56%) 237 秒 14 (14%) 123 秒それ以上 27 (27%) 291 秒 27 (27%) 315 秒 5 (5%) 193 秒表 3. 評価詳細な変形操作点の数略地図の数平均操作時間 0 (0%) 13 (13%) 60 (60%) それ以上 27 (27%) 秒 219 秒 291 秒評価結果から, 5 5 の操作点があれば, 73% 以上の予備変形, 道路オブジェクトの削除を行うことで, 詳細な変形のみでオブジェクトの対応付けを行うよりも位置精度が上がる例を以下に示す. 使用した略地図画像が図 10, 詳細な変形のみで対応付けを行ったものが図 11, 予備変形, 詳細な変形で対応付けを行ったものが図 12, 予備変形, 道路オブジェクトの削除, 詳細な変形で対応付けを行ったものが図 13 である. 詳細な変形で付加する操作点の数は, すべて 4 4 である. これらの図から予備変形, 道路オブジェクトの削除を行うことで位置精度が上がる様子が見て取れる.

図 10. 使用した略地図画像図 13. オブジェクト対応付けの例 ( 提案手法 ) 図 11. オブジェクト対応付けの例 ( 詳細な変形のみ ) 6.

本システムでは, 予備変形, 道路オブジェクトの削除, 詳細な変形の 3 つにより, 両地図に表示されたオブジェクトの対応付けを行った.

しかしながら, オブジェクトの対応付け処理が 3 つの工程に分かれており, 特に, 詳細な変形では 4 4 もの操作点をドラッグしなければならないなど, ユーザの操作量が多い.

オブジェクト対応付けの例 ( 予備変形あり ) 参考文献 [1] 中澤啓介, 北望, 高木健士, 井上智雄, 重野寛, 岡田謙一, ランドマークの視認性に基づいた動的な案内地図作成, 情報処理学会論文誌 Vol49 2008.

6 図 10. 使用した略地図画像図 13. オブジェクト対応付けの例 ( 提案手法 ) 図 11. オブジェクト対応付けの例 ( 詳細な変形のみ ) 6. まとめと今後の課題本研究では, 位置の正確性を保ったまま分かりやすい地図を利用可能にすることを目指し, オンライン地図の上に略地図画像を重ねて表示するシステムを提案した. 本システムでは, 予備変形, 道路オブジェクトの削除, 詳細な変形の 3 つにより, 両地図に表示されたオブジェクトの対応付けを行った. そして, 道路オブジェクトの削除において透明化する色の幅を ±6 に, 詳細な変形において付加する操作点の数を 4 4 にすることで十分な精度を得ることに成功した. しかしながら, オブジェクトの対応付け処理が 3 つの工程に分かれており, 特に, 詳細な変形では 4 4 もの操作点をドラッグしなければならないなど, ユーザの操作量が多い. また, ユーザの操作にすべてが委ねられるため, ユーザの操作の仕方により精度に違いが出てしまう. よって, 一部を自動化することや, ユーザの操作量を減らす手法を考えることが課題である. 図 12. オブジェクト対応付けの例 ( 予備変形あり ) 参考文献 [1] 中澤啓介, 北望, 高木健士, 井上智雄, 重野寛, 岡田謙一, ランドマークの視認性に基づいた動的な案内地図作成, 情報処理学会論文誌 Vol [2] 有川正俊, 久保田光一, G-XML の概要 GIS コンテンツの相互流通の実現に向けて, 電子情報通信学会技術報告書 AI [3] AngelaSchwering, JiaWang, "SketchMapia A framework for qualitative mapping of sketch maps and metric maps ", Proc. of Las Navas 20th Anniversary Meeting on Cognitive and Linguistic Aspects of Geographic Spaces, Mar [4] 北山大輔, 李龍, 角谷和俊, 空間的正確性と地理的コンテキストに基づくデフォルメ地図分析システム, DEIM2011 B [5] 矢島健太郎, 井上潮, クライアントサイド描画手法を用いた WebGIS の提案と実装, DEIM2009 B

Microsoft Word - 05kc056_deim2009_090220mono.docx

Microsoft Word - 05kc056_deim2009_090220mono.docx フィッシュアイモデルを用いた地図表示システムの提案篠田陽平井上潮東京電機大学学工学部 101-8457 東京都千代田区神田錦町 2-2 E-mail: 05kc056@ed.cck.dendai.ac.jp, inoue@c.dendai.ac.jp あらまし今日,Google マップなどの WebGIS ( Web Geographic Information System : Web 地図情情報システム