第4回　Virtual Earth

Virtual Earth

Virtual Earthはオンラインの地図サービスを提供するプラットフォームです。これによりユーザへ住所や店名による検索、航空写真の表示などの提供が可能になります。Bird’s eye（概観図）と呼ばれる低角度で撮影された航空写真の表示が特長のひとつとなっています（日本で対応した場所は今のところありませんが⁠）⁠。身近なところではLive Search Mapsに使用されており、Virtual Earthを体験することができます。

開発者向けにはVirtual Earth Map Control SDKというAPI群が提供されており、簡単にVirtual Earthを利用したWebベースのアプリケーションの作成が可能です[1]⁠。今回はこのSDK・APIを利用した基本的なVirtual Earthの操作方法を紹介します。

開発環境

Virtual Earth Map ControlはJavaScriptのライブラリとして提供されています。そのためメモ帳さえあればコードの記述は可能です。ですが、Visual Studio 2008からJavaScript（正確にはJScript）のインテリセンス機能[2]が使用できるようになっています。入力が補完され便利ですので使用してみるとよいでしょう。Visual Web Developer 2008 Express Editionでも使えます。

JScriptのインテリセンス機能はJscriptのコードをある程度理解してくれますが、Virtual Earth Map Controlのライブラリについては機能が働きません。そこでインテリセンスを機能させるためのVirtual Earth用のライブラリが公開されていますので、併せて使用しましょう。

Virtual Earth JavaScript Intellisense HelperのReleasesページよりダウンロードできます。ダウンロードしたファイル内のVEJSフォルダ以下のファイルが使用するjsファイル群になります。インテリセンス機能のみに使用するファイルですので、インテリセンスを有効にしたいjsファイル内から参照ディレクティブを使ってVeJavaScriptIntellisenseHelper.jsを相対パスで指定します。参照ディレクティブは次のように記述します。

/// <reference path="VEJS/VeJavaScriptIntellisenseHelper.js" />

ダウンロードしたファイルにあるDefault.aspx.jsを使用して確認するとよいでしょう（図1⁠）⁠。

マップの表示

まずは基本となるマップの表示からです。HTMLファイルを作成し、先頭に以下のDOCTYPE宣言を記述します。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

次にheadタグ内に使用する文字セットを指定します。Virtual EarthではUTF-8を使用する必要があります。また、Virtual Earth Map Controlを外部jsファイルとして参照します。Virtual Earthを操作するJavaScriptのコードを外部ファイルとして記述する場合はjsファイルを新しく作成し同様にこの場所に追加しておきます。

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="http://dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=6&amp;mkt=ja-jp"></script>

マップを表示するためのdivタグをbodyタグ内に追加します。正しく表示するためにはstyle属性のpositionを“⁠absolute⁠”または“⁠relative⁠”に設定しておく必要があります。また、width・heightの値がマップの大きさになります。

<div id='myMap' style="position:absolute; width:400px; height:400px;"></div>

マップを表示するにはVEMapクラスのインスタンスを生成しLoadMapメソッドを呼びます。以下のように関数を作り、bodyタグのonloadイベントから呼ぶようにします。VEMapクラスのコンストラクタにはマップを表示するdivタグに指定したid属性の値を渡します。

var map = null;
function pageLoaded() {
    map = new VEMap("myMap");
    map.LoadMap();
}

<body onload="pageLoaded();">

作成したHTMLファイルを開いてみましょう。図2のようにマップが表示されると思います。

LoadMapメソッドの引数は次の7個があり位置や表示方法を指定できます。引数は始めから順に次のものがあります。

VELatLong: 経緯度の値を持つVELatLongオブジェクトを指定します。
Zoom: ズームレベルを1～19の範囲で指定します。値が大きいほど拡大されます。
Style: VEMapStyle列挙体を指定します。VEMapStyle.Road（通常の地図⁠）⁠、VEMapStyle.Aerial（航空写真⁠）⁠、VEMapStyle.Hybrid（ハイブリッド）などの値があります。
Fixed: trueに設定するとマップを固定し、ユーザは操作ができなくなります。
Mode: マップの2D・3D表示を示すVEMapMode列挙体を指定します。VEMapMode.Mode2DとVEMapMode.Mode3Dがあります。
ShowSwitch: ダッシュボードと呼ばれるマップ操作部分に2Dと3Dを切り替えるスイッチを表示するかどうかを指定します。デフォルトではtrueです。
TileBuffer: タイルバッファ数を指定します。表示されているマップ周辺のタイル画像をあらかじめロードしておくことができます。デフォルトでは0で周辺のタイルはロードされません。

例えば、東京駅の航空写真をズームレベル最大で表示するには次のようになります。VELatLongクラスのコンストラクタには緯度・経度の順で指定します。

map.LoadMap(new VELatLong(35.68138177400001, 139.76608304), 19, VEMapStyle.Aerial, false, VEMapMode.Mode2D, false, 0);

VEMapクラスにはオブジェクト自身の破棄と関連するリソースを解放するDisposeメソッドが用意されています。bodyタグのonunloadイベントから呼ぶようにしておくとよいでしょう。

<body onload="pageLoaded();" onunload="pageUnloaded();">

function pageUnloaded() {
    if (map != null) map.Dispose();
}

マップの操作

次はコード上からマップを操作してみます。

ズーム操作

ズーム操作するにはVEMapクラスにZoomIn・ZoomOutメソッドが用意されています。直接ズームレベルを指定するにはSetZoomLevelメソッドを使います。

ZoomIn・ZoomOutメソッドは、既に最大・最小のズームレベルのときにメソッドを呼んでもマップは変化しません。

map.ZoomIn(); // ズームイン

map.ZoomOut(); // ズームアウト

SetZoomLevelメソッドは引数に1～19の値を指定します。

map.SetZoomLevel(15); // ズームレベルを15に指定

また、現在表示されているズームレベルを取得するにはGetZoomLevelメソッドを用います。

var level = map.GetZoomLevel();

表示位置の操作

マップの表示する経緯度の指定はSetCenterメソッドを使用します。VELatLongオブジェクトを引数に取り、指定した位置がマップ中央になるようにマップが移動します。

map.SetCenter(new VELatLong(35.630150729, 139.740439825));

ズームレベルと両方を指定できるSetCenterAndZoomメソッドもあります。

map.SetCenterAndZoom(new VELatLong(35.50745599999997, 139.617585), 17);

これらのメソッドは、指定した位置が既に表示されているマップ内のどこかでズームレベルも同じ場合、マップはなめらかに移動します。

表示されているマップの中央の経緯度を取得するにはGetCenterメソッドを使います。戻り値はVELatLongオブジェクトです。

var latlong = map.GetCenter();

コーディング時に具体的な場所を設定したい場合、その経緯度の値を知るにはLive Search Mapsを利用できます。共有の「クリップボードにコピー」や「電子メールで送信」（⁠図3）により得られるURLのcp=35.170693~136.881636という部分が経緯度の値になっています。

もちろんVirtual Earth Map Controlを使って地名から経緯度の検索も可能です。詳しい説明は省きますがFindメソッドにより各種情報が検索できるようになっています。

map.Find('', '京都駅', null, null, null, null, false, false, false, false,
    function(layer, array, places, more, err) {
        if (places ==  null || places.length == 0)
            alert('Not Found.');
        else
            alert(places[0].LatLong.Latitude + ', ' + places[0].LatLong.Longitude);
    });

表示形式の操作

航空写真やハイブリッドなどマップのスタイルを設定するにはSetMapStyleメソッドを使います。引数にVEMapStyle列挙体を指定します。VEMapStyle列挙体のメンバには次の種類があります。

メンバ	説明
Road	道路地図（通常の地図⁠）⁠。
Shaded	道路地図に陰影を付けたもののようですが未サポートです。
Aerial	航空写真。
Hybrid	ハイブリッド。航空写真に地名や主要道路などのラベルが付きます。
Oblique	Birdseyeと同じです。
Birdseye	斜めの角度から撮影した航空写真です（概観図⁠）⁠。主要都市でサポートしています。

map.SetCenterAndZoom(new VELatLong(28.376919, -81.521833), 19);
map.SetMapStyle(VEMapStyle.Birdseye);

プッシュピンの追加

マップ上にはShapeと呼ばれるオブジェクトが追加できます。ここではShapeのひとつであるプッシュピンを追加（図4）してみたいと思います。

マップにShapeを追加するにはAddShapeメソッドを使います。引数はVEShapeオブジェクトです。VEShapeクラスのコンストラクタはVEShapeType列挙体とVELatLongオブジェクトの配列を引数に取ります。プッシュピンを追加するには次のようになります。

// プッシュピンを追加する場所を指定するVELatLongオブジェクト
var latlong = new VELatLong(34.73348, 135.500109);
// プッシュピン形式のShapeオブジェクト
var pin = new VEShape(VEShapeType.Pushpin, latlong);

map.SetCenterAndZoom(latlong, 17);
map.AddShape(pin); // プッシュピンをマップに追加

プッシュピンの場合、VELatLongオブジェクトは1個だけコンストラクタに指定する必要があるので配列にはなっていません。

Shapeオブジェクトにはタイトルと説明を設定することができます。SetTitleとSetDescriptionメソッドにより先ほどの図4と同じようなプッシュピンが作れます。

pin.SetTitle('新大阪駅');
pin.SetDescription('大阪府大阪市淀川区西中島5丁目');

Shapeオブジェクトを削除する場合はDeleteShapeメソッドを使います。すべてのShapeオブジェクトを削除するDeleteAllShapesメソッドもあります。

map.DeleteShape(pin);
// map.DeleteAllShapes(); // すべて削除する場合

上記の例ではVEMapオブジェクト上に直接Shapeオブジェクトを追加しましたが、VEMapオブジェクトにレイヤを追加し、レイヤに対してShapeオブジェクトの追加も可能です。多くのShapeオブジェクトを扱う場合にレイヤ単位で管理が可能になりますので、うまく使い分けてください。

レイヤはVEShapeLayerオブジェクトになり、VEMapオブジェクトと同様にAddShape・DeleteShapeメソッドを持っています。また、VEMapオブジェクトへレイヤを追加するにはAddShapeLayerメソッドを使います。

var latlong = new VELatLong(34.73348, 135.500109);
var layer = new VEShapeLayer(); // レイヤの作成
var pin = new VEShape(VEShapeType.Pushpin, latlong);

layer.AddShape(pin); // レイヤにプッシュピンを追加
map.AddShapeLayer(layer); // マップにレイヤを追加

// layer.DeleteShape(pin); // レイヤからプッシュピンを削除する場合
// map.DeleteShapeLayer(layer); // マップからレイヤを削除する場合

おわりに

今回はここまでです。次回もVirtual Earthについて扱いますが、Virtual Earth Map Controlは規模が大きく、紹介できるものはほんのごく一部です。さらなる情報はMSDNライブラリを参照してください。Windows Liveサービスで唯一、Virtual Earthに関しては日本語訳がMSDNライブラリにありますが、バージョンが古いものですのでできるだけ英語を参照したほうがよいでしょう。また今月（4月）には新たなバージョンのリリースも予定されているようです。