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

はじめに

Virtual Earthのマップは、タイルと呼ばれる256x256ピクセルの画像の集合から成っています。Virtual Earth Map Controlを利用すると、本来のVirtual Earthのマップ上にオリジナルのタイル画像（カスタムタイル）を追加し重ねて表示することができます。おもしろみのない例ですが、図1のようなことが可能です。今回はこのタイルの追加について紹介します。

Map Controlの利用のほかにMapCruncherというツールも使い、オリジナルの地図ページも作成します。

カスタムタイルの表示

カスタムタイルをマップに追加するためには、タイル情報を表すVETileSourceSpecificationオブジェクトと、VEMapクラスのAddTileLayerメソッドを使います。

基本となるマップを表示するコードは本連載第4回目の最初のコードを使います。これにタイル設定のコードを追記していきます。

まず、VETileSourceSpecificationオブジェクトを生成します。このクラスには9個のプロパティがあり、すべての値をコンストラクタ引数に指定できます。

プロパティは次のものがあります。コンストラクタ引数の順に説明します。

ID: カスタムタイルをマップに追加時、レイヤとして管理する場合に使用します。適当な文字列を設定します。
TileSource: カスタムタイル画像の場所を示すURLです。Virtual Earthの名前付け規則に従って指定します。詳しくは次項にて説明します。
NumServers: タイル画像を提供するサーバ数です。負荷分散のために複数のサーバを使用する場合は、その数を指定します。TileSourceプロパティでの名前付け規則に利用するためのものです。
Bounds: カスタムタイルを使用するおおよそ範囲です。経緯度2点で矩形領域を表すVELatLongRectangleオブジェクトの配列を指定します。
MinZoom: カスタムタイルを表示する最小のズームレベルです。
MaxZoom: カスタムタイルを表示する最大のズームレベルです。
GetTilePath: Virtual Earthの名前付け規則を使用せずにタイル画像の場所を設定する場合に使うためのもですが、すでにサポートされていないクラスを利用するため互換性のために残されているものと思われます。本連載では扱いません。
Opacity: 重ねるタイル画像を半透明で表示したい場合に設定します。0.05（透明⁠）⁠～1.0（不透明⁠）⁠ の範囲で値を指定します。
ZIndex: ほかのレイヤやシェイプと重なる場合の表示順を示す値を指定します。2が初期値になり、値が大きいほど手前に表示されます。

以上を踏まえてVETileSourceSpecificationオブジェクトを生成します。コンストラクタは少なくともIDとTileSourceを指定する必要があります。次の例ではIDに“⁠gihyo⁠”⁠、TileSourceにはタイルとなる256x256ピクセルのPNG画像の場所を指定しました。

var tileSrcSpec = new VETileSourceSpecification('gihyo', 'http://localhost/gihyo.png');

続いてカスタムタイルの表示範囲を指定します。矩形領域を表すVELatLongRectangleオブジェクトの配列を生成し、Boundsプロパティに指定します。またタイル画像を表示するズームレベルの範囲も併せて指定しています。

var bounds = new Array(
    new VELatLongRectangle(
        new VELatLong(42, 128),
        new VELatLong(30, 143)));
tileSrcSpec.Bounds = bounds;
tileSrcSpec.MaxZoom = 19;
tileSrcSpec.MinZoom = 15;

これらの設定は主にパフォーマンスのため、指定した表示範囲外でもタイル画像が用意されていればマップに表示されることもあるようです。

半透明で表示するためOpacityプロパティも指定しておきます。

tileSrcSpec.Opacity = 0.5;

最後にVETileSourceSpecificationオブジェクトをマップに追加します。VEMapクラスのAddTileLayerメソッドの引数に渡すことでカスタムタイル画像が表示可能になります。

// mapはVEMapオブジェクトの変数
map.AddTileLayer(tileSrcSpec);

以上によりWebブラウザ上で見ると図1のように表示されると思います。ちなみに削除する場合はVEMapクラスのDeleteTileLayerメソッドを使います。

map.DeleteTileLayer('gihyo');

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

先の例では同じタイル画像が並べて表示されるだけのものでした。複数のタイル画像を使用する場合はどのようにするのでしょうか。実は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の場合、ズームレベルが１のとき256x256のタイル画像4枚で全体を表現しています（図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ページの生成をしてくれるものです。用途としてはキャンパスマップ、ハイキングコース、地下道などといった既存のマップに追加情報となる地図を重ねることが考えられます。

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

対応点の追加

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

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

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

ズームレベルと透過色の指定

これまでCorrespondencesタブを表示していたと思いますが、Source Infoタブを表示してください（図6⁠）⁠。「⁠Maximum (Closest) Zoom」の値がタイル画像生成時に必要とするズームレベルになります。大きい値ほど拡大できますが、その分生成するタイル画像の数が多くなり時間もかかります。画像の生成時に様子を見ながら変更するとよいでしょう。

Transparencyタブ（図7）では透過する色または使用する色の指定ができます。「⁠Add Color Under Crosshairs」ボタンをクリックすると、クリック時に十字線にある点の色がリストに追加されます。ラジオボタンで「Make selected colors transparent」を選択していれば、追加した色が透過色となります。MapCruncher上では透過色がピンク色として表示されます。「⁠Display only selected colors」を選択すると、追加した色以外は透過色となります。

レンダリングとマップの表示

対応点の追加が終わったら、タイル画像およびWebページの生成（レンダリング）の段階へ進みましょう。左下のRenderボタンをクリックします。Renderウィンドウ（図8）が開きますので、Output Folder欄の右にあるボタンをクリックして出力先のフォルダを指定します。そして、Startボタンをクリックするとレンダリングが始まります。地図の範囲にもよりますがズームレベルが大きいと数分～数時間ぐらいかかります。

生成が終了するとRenderウィンドウの下に「Preview rendered results」というリンクが表示され、クリックすると生成されたタイルを確認することができます。この後、対応点の修正に戻ることもできます。

出力フォルダにはいくつかのファイル・フォルダができています。SamplePage.htmlをWebブラウザで表示すると、生成された地図ページが確認できます。執筆時点ではVirtual Earth Map Control 6.1がリリースされて間もないためか、そのままでは動きませんでした。SamplePage.html内のscriptおよびlinkタグのsrc属性の値を次のように修正することで表示できます。v6からv6.1に変更しています。

<script src="http://dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=6.1" type="text/javascript"></script>
<script src="http://dev.virtualearth.net/mapcontrol/v6.1/mapcruncher/CrunchControl.js" type="text/javascript"></script>
<link href="http://dev.virtualearth.net/mapcontrol/v6.1/mapcruncher/LegendStyle.css" rel="stylesheet" type="text/css">

完成したページは図9のようになります。

おわりに

いかがでしたでしょうか。MapCruncherを使うと、コード上でタイルを追加したり、タイル画像を用意したりするよりも簡易にできたと思います。ただし、作成されたWebページは見た目も機能的にも良いものとはいえません。より活用するためにはHTMLファイル内のJavaScriptの編集など、コードの記述も必要になるでしょう。

日本でのサービスはまだですが、Map Control 6.1のリリースに併せてLive Search MapsでMapCruncherのタイルをコレクションとして追加できるようになっています。今後MapCruncherやカスタムタイルを活用していく場面は増えていくかもしれませんね。

以上で今回は終わりです。