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

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

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

はじめに

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

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

図1 カスタムタイルの表示

図1 カスタムタイルの表示

カスタムタイルの表示

カスタムタイルをマップに追加するためには,タイル情報を表す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');

著者プロフィール

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

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

URL:http://katamari.jp

コメント

コメントの記入