使ってみよう! Windows Live SDK/API

第6回 VETileSourceSpecification and MapCruncher ―― オリジナル地図の作成

この記事を読むのに必要な時間:およそ 4 分

タイル画像の名前付け規則

先の例では同じタイル画像が並べて表示されるだけのものでした。複数のタイル画像を使用する場合はどのようにするのでしょうか。実はVETileSourceSpecificationクラスのTileSourceプロパティには変数が用意されており,これを用いてタイル画像の場所を指定します。

変数は%1,%2,%4の3種類があり,次のように使います。

tileSrcSpec.TileSource = 'http://TileServer-No%2/CustomTiles/%1%4.png';

%1,%2,%4にはVirtual Earth Map Controlにより値が補完されてタイル画像が参照されます。それぞれの変数の意味は次のとおりです。

%1

マップの表示形式の示す1文字が入ります。マップを通常の道路地図として表示しているときはr,航空写真のときはa,ハイブリッド(航空写真+ラベル)のときはhという具合です。

表示形式 %1の値
道路地図(通常の地図) r
航空写真 a
ハイブリッド(航空写真+ラベル) h

表示形式によりカスタムタイルを変更する,または表示・非表示を変える場合に使います。

%2

負荷分散のためNumServersプロパティに2以上の値を指定した場合,サーバの数だけ値が循環して入ります。値の範囲は0から始まり,NumServersの値から1を引いたものまでになります。

%4

マップの位置・ズームレベルから決まるタイルの番号が入ります。少しややこしいので図を用いて説明します。Virtual Earthの場合,ズームレベルが1のとき256x256のタイル画像4枚で全体を表現しています図2の左⁠⁠。

図2 タイル番号の規則

図2 タイル番号の規則

ズームレベル1のとき,各4枚は0~3の番号が付いています。ズームレベルが1上がると,タイル1枚で表現されていた部分が4枚になります。番号2が付いていたタイルに対応するズームレベル2のタイルの番号は20・21・22・23となり,1段階前のズームレベルでの番号に0~3が付いて表現されます。同様にズームレベル2のとき13の番号が付いていたタイルと対応するズームレベル3のタイルでは130~133の番号が付きます。

このような規則で決まる番号が%4には入ります。表示しているマップの番号がいくつか知りたい場合は,Internet Explorer Developer Toolbarを使用すると簡単にわかります。

MapCruncher

コードによるカスタムタイルの追加は,Virtual Earthのタイルの仕様に合わせた画像を用意する必要があり,容易にできる方法ではありません。コードによるカスタムタイル表示のほかにMapCruncherというカスタイムタイルを追加したWebページを生成するツールを使用する方法があります。次はこのツールを使ってみたいと思います。

ダウンロードページからMapCruncherをダウンロードし,インストールまで行ってください※1⁠。

MapCruncher図3は,マップに重ねる地図画像を用意して,Virtual Earthのマップを見ながら地図と対応する点を入力し,最終的にWebページの生成をしてくれるものです。用途としてはキャンパスマップ,ハイキングコース,地下道などといった既存のマップに追加情報となる地図を重ねることが考えられます。

図3 MapCruncher

図3 MapCruncher

本記事では,宝塚造形芸術大学の教室配置図を使います※2⁠。地図画像は,あらかじめ北が上になるようにしておきます。また,ある程度正確な地図が必要です。路線図など簡略された地図は不向きですので注意してください。

対応点の追加

MapCruncherを起動すると右側にVirtual Earthのマップが表示されています。その左側には追加した地図画像が表示されることになります。さっそく地図画像を追加しましょう。メニューFileの「Add Source Map」を選び,画像をMapCruncherに追加します。

追加した地図とVirtual Earthのマップとで対応する点を追加する作業になります。それぞれの地図をズーム・移動し※3⁠,両者で対応する地点を十字線の交差点に合わせます。そして,一致したところでウィンドウの左にあるAddボタンをクリックしましょう図4⁠。このように対応する点を入力していきます。正確な地図では2点追加するだけで済みますが,実際はもう少し入力することがほとんどでしょう。

図4 対応する点の追加

図4 対応する点の追加

ある程度 対応点を追加し終わったら,Lockボタンをクリックします。そうすると追加した地図が対応点に合わせて変形され,Virtual Earthのマップと連動して動くようになります図5⁠。この状態でズレがないか確認します。もしおかしいようであれば,Unlockボタンをクリックし再度 対応点を入力します。

図5 Lock状態

図5 Lock状態
※1

執筆時点のバージョンはMapCruncher Beta for Microsoft Virtual Earth Version 3.2.0です。

※2

地図の使用を許可して頂いた宝塚造形芸術大学ならびに手続きにあたり仲介してくださったKさんに感謝致します。

※3

直接マウス操作のほかに経緯度を入力して移動もできます。また,マップの表示形式を変える場合はメニューのViewからRoads・Aerial Photos・Hybridを選択します。

著者プロフィール

松江祐輔(まつえゆうすけ)

日本システムウエア株式会社 勤務。現在,ハードウェア設計・検証業務を担当。大学生・大学院生時代はベンチャー企業 有限会社ミレニアムシステムズにプログラマーとして従事。趣味はプログラミング。好きな言語はVisual Basic。Microsoft MVP for Windows Live Platform(Jul 2010 - Jun 2011),Windows Live(Jul 2011 - Jun 2013)。

URL:http://katamari.jp