.NET TIPS ［ASP.NET AJAX］Virtual Earthを操作するには？［2.0、3.0、3.5、C#、VB］ 山田 祥寛 2008/06/26

　「TIPS：［ASP.NET AJAX］Googleマップを操作するには？」では、代表的な地図サービスであるGoogleマップ（とこれを操作するためのGoogle Maps API）をASP.NET AJAXから操作する方法について紹介した。

　GoogleマップはAjax黎明期（れいめいき）に登場した代表的なAjax対応地図サービスであるが、唯一というわけではない。昨今では、さまざまなベンダがこぞってAjax対応の地図サービスを提供している。

　ただし、地図サービス自体はあまた存在するものの、地図サービスを自作のアプリケーションから操作するためのAPIまで備えたサービスともなると、それほど数は多くない。本稿で紹介するのは、その数少ないAPIまで備えた地図サービスである「Virtual Earth」である。

　Virtual Earthとは、マイクロソフトが提供する地図プラットフォームのこと。同じくマイクロソフトが提供するコンシューマ向けサイトであるLive Search Mapsも、Virtual Earthをベースとして構築されたページである。

　Virtual Earthでは、Googleマップと同様、標準的な地図画像から航空写真、ハイブリッド画像（航空写真に地名などを重ね合わせた画像）を切り替え表示できるが、そのほかにも、地図を3D表示するための機能を備えているのが特徴だ。

　次の画面は、実際にVirtual EarthのAPIを使って作成した3Dで地図を表示するサンプル・アプリケーションである。

Virtual Earthで東京駅周辺を3D表示させたところ

　サービスはまだベータ版ということで、やや動作が重い感じもするが、ブラウザ上で完結して動作できるのはうれしいポイントである。また、かつてはアメリカの主要都市に限られていた3D地図情報も、昨今では世界各国の主要都市に拡大され、より使いでのあるサービスに進化している。老舗のGoogleマップに知名度では若干劣るとはいえ、今後の普及に十分に期待したいサービスの1つである。

　さて、前置きが長くなったが、このVirtual Earthの機能を自作のアプリケーションから利用するためのAPIを提供するのが、The Virtual Earth Interactive SDK（以降、VE SDK）だ。

　本稿では、このVE SDKを利用して、「TIPS：［ASP.NET AJAX］Googleマップを操作するには？」でも紹介した地図連携アプリケーションをVirtual Earth対応に書き換えてみることにしよう。次の画面はその実行例だ。

左のリストボックスから地点を選択する

リストボックスで選択した地点の情報をバルーン表示

　では以降、具体的な手順を見ていく。なお、本サンプル・プログラムを動作させるに当たっては、「DBプログラミング 7つのヒント − 同時実行制御からASP.NET AJAXまで −」の内容に従って、ASP.NET AJAXをインストールしておく必要がある（*1）。

*1　ただし、ASP.NET 3.5ではASP.NET AJAXは標準で搭載されているので、追加インストールは不要。

1. データベースとXML Webサービス・クラスを用意する

　本稿では、前掲のTIPSで作成したMapInfoテーブルと、地点情報を取得するためのGoogleMap.asmxを利用するものとする。あらかじめアプリケーションに、これらテーブルとサービス・クラスを用意しておこう。

2. 新規のWebフォームを作成する

　新規のWebフォーム（VirtualEarth.aspx）を作成したら、フォーム・デザイナから以下の画面の要領でサーバ・コントロールを配置する。また、それぞれのコントロールに対しては、表の内容でプロパティ値を設定しておこう。

Webフォーム（VirtualEarth.aspx）のレイアウト

各コントロールのプロパティ内容は以下のとおり。

コントロール（ID） プロパティ 設定値 ScriptManager（manager） Scripts http://dev.virtualearth.net/mapcontrol /mapcontrol.ashx?v=6.1 （設定方法は「Microsoft AJAX Libraryで実践オブジェクト指向JavaScript」を参照） Services GoogleMap.asmx（設定方法は「TIPS：［ASP.NET AJAX］クライアントサイド・スクリプトからXML Webサービスを非同期呼び出しするには？（クライアントサイド編）」を参照） ListBox（list） DataSourceID sds DataTextField place DataValueField mid Rows 10 SqlDataSource（sds） ConnectionString MyDB（接続名） SelectCommand SELECT [mid], [place] FROM [Mapinfo] Panel（gmap） Height 400px Width 500px Style position:relative;

　ScriptManager.Scriptsプロパティには、VE SDKを動作させるのに必要なライブラリのURLを指定する必要がある。この部分はまずは上表で示した値を固定値と考えておけばよいだろう（ただし、今後、VE SDKがバージョン・アップした場合、「v=6.1」の部分は変更となるはずだ）。

　Panelコントロールは、VE SDKを通じて取得した地図画像を表示するための領域を確保するものだ。地図の大きさを変更したい場合には、PanelコントロールのWidth／Heightプロパティを変更すればよい。

3. サービス呼び出しのコードを記述する

　あとは、ScriptManagerコントロールによって自動生成されたプロキシ・クラスを介して、サービス・メソッドを呼び出すJavaScriptのコードを記述するだけだ。具体的なコードは、以下のとおり。

<script type="text/javascript"> var map = null; // ページ・ロード時に呼び出されるイベント・ハンドラ function pageLoad() {   // 「id="gmap"」で定義された領域に地図を表示   // （表示位置、サイズ、種類を定義）   map = new VEMap('gmap');   map.LoadMap(     new VELatLong(35.771586, 139.988823),     12 ,VEMapStyle.Hybrid);   // リストボックスの内容が変更されたタイミングで、   // サービス・メソッドを呼び出す   $addHandler(     $get('list'),     'change',     function() {       GoogleMap.GetMapInfo(         $get('list').value,         // サービス・メソッドの処理が成功した場合の         // コールバック関数         function(result) {           // 取得した情報に基づいて、ピンを追加           map.Clear();           var point =             new VELatLong(result.Latitude, result.Longitude)           var pin = new VEShape(VEShapeType.Pushpin, point);           pin.SetTitle(             '<a href="' + result.Url + '">' +             result.Place + '</a>');           pin.SetDescription(result.Memo);           map.AddShape(pin);           map.SetCenter(point);         }       );     }   ); } </script>

プロキシ・クラス経由でサービス・メソッドにアクセスするコード（VirtualEarth.aspx）

　コードの大まかな流れは、リスト内のコメントを参照していただくとして、ここではJavaScriptからVirtual Earthを操作する基本的なポイントを押さえておくことにしよう。

地図を表示する基本的な方法

　地図を表示／操作するのは、VEMapオブジェクトの役割だ。VEMapコンストラクタには、地図の表示先となる要素（ここではPanelコントロール「gmap」）を指定する必要がある。

　VEMapオブジェクトを生成したら、あとはGMap2.LoadMapメソッドで実際に地図を表示するだけだ。LoadMapメソッドの構文は以下のとおり。

LoadMap(new VELatLong(緯度, 経度) [,ズーム率（1〜19）   [,地図の種類 [,地図を固定するか [,2D／3D]]]])

LoadMapメソッドの構文

　ズーム率は、1が最もズームアウトした状態で19が最もズームインした状態を表す。「地図の種類」「2D／3D」には、以下のような値を指定できる。

分類	設定値	概要
地図の種類	VEMapMode.Road	標準の地図（デフォルト）
	VEMapMode.Aerial	航空写真
	VEMapMode.Hybrid	ハイブリッド地図
2D／3D	VEMapMode.Mode2D	2D地図
	VEMapMode.Mode3D	3D地図（Virtual Earth 3Dコントロールの読み込み／表示）
LoadMapメソッドの引数

地図上のプッシュピンを追加／削除する

　本サンプルでは、サービス・メソッドGoogleMap.GetMapInfoで取得した地点情報に基づいて、地図上にプッシュピン（*2）を追加している。

*2　地図上に配置する目印のこと。Googleマップにおけるマーカーに相当する。

　プッシュピンのような地図上の図形を表すのは、VEShapeオブジェクトの役割だ。VEShapeコンストラクタには、引数として、図形の種類を表すVEShapeType列挙型の値、図形の座標情報を表すVELatLongオブジェクト（緯度／経度）を指定する必要がある。図形の種類として指定できるのは、以下のような定数である。

定数	概要
VEShapeType.Pushpin	プッシュピン
VEShapeType.Polyline	折れ線
VEShapeType.Polygon	多角形
VEShapeType列挙体のメンバ

　また、プッシュピンにマウスを当てたタイミングで表示されるバルーンの内容（タイトルと詳細情報）を、それぞれSetTitle／SetDescriptionメソッドで設定しておく。

　これでプッシュピンの準備ができたので、あとは、VEMap.Clearメソッドでいったん地図上の図形をすべて破棄したうえで、AddShapeメソッドでプッシュピンを追加する。

　ただし、このままではプッシュピンが表示されないので（地図の表示位置が自動的にピン位置に移動するわけではないので）、SetCenterメソッドで地図の表示位置をピンの表示位置に移動させているわけだ。

　以上を理解したら、さっそく作成したサンプル・プログラムを実行してみよう。冒頭の画面のように、リストボックス上の地名を選択したタイミングで、地図の表示がその地点に移動し、かつ、地図上のピンにマウス・ポインタを当てるとバルーンが表示されれば成功だ。

利用可能バージョン：.NET Framework 2.0 利用可能バージョン：.NET Framework 3.0 利用可能バージョン：.NET Framework 3.5 カテゴリ：Webフォーム　処理対象：ASP.NET AJAX 関連TIPS：［ASP.NET AJAX］Googleマップを操作するには？ 関連TIPS：［ASP.NET AJAX］クライアントサイド・スクリプトからXML Webサービスを非同期呼び出しするには？（クライアントサイド編）

この記事と関連性の高い別の.NET TIPS ［ASP.NET AJAX］Googleマップを操作するには？ このリストは、（株）デジタルアドバンテージが開発した 自動関連記事探索システム Jigsaw（ジグソー） により自動抽出したものです。 generated by

「.NET TIPS」

＠ITメールマガジン　新着情報やスタッフのコラムがメールで届きます（無料）