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

第5回 Virtual Earth,VECollection and GeoRSS

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

はじめに

Virtual Earth Map Controlは,Live Search MapsのコレクションやGeoRSS,KMLといったXMLで表現された位置情報を取り込むことができます。前回の最後にプッシュピンの追加を紹介しましが,これらのデータ形式を用いると,まとまりのある位置情報をプッシュピンとして一度にマップに追加することも可能になります。今回はこれらのデータ形式の利用を取り上げます。また,WCF(Windows Communication Foundation)によるサービスも作成します。

コレクションの表示

Live Search Mapsにはプッシュピンのグループや経路情報を作成して管理できるコレクションという機能があります図1)。Live Search Mapsにサインイン後,ツールバーの「コレクション」から「マイコレクションを開く」を選択するとコレクション一覧を表示したり新しくコレクションを追加したりできます。詳しくはLive Search Mapsのヘルプを確認してください。図1のように作成したプッシュピンのコレクションをVirtual Earth Map Controlから取り込み(インポートし),表示してみましょう。

図1 コレクション機能

図1 コレクション機能

まずは単純にマップを表示するだけのページを作成します。本連載の第4回目も参考にしてください※1)。Virtual Earth JavaScript Intellisense Helperを使用する場合は,スクリプト部分を外部JavaScriptファイルに記述します。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script type="text/javascript" src="http://dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=6.1&amp;mkt=ja-jp"></script>
<script type="text/javascript">
    var map = null;
    function pageLoaded() {
        map = new VEMap("myMap");
        map.LoadMap();
    }
</script>
</head>
<body onload="pageLoaded();">
<div id='myMap' style="position:absolute; width:400px; height:400px;"></div>
</body>
</html>

コレクションのインポートはVEMapクラスのImportShapeLayerDataメソッドを使用します。

VEMap.ImportShapeLayerData(shapeSource, callback, setBestView);

戻り値はありません。ImportShapeLayerDataの引数には次のものを渡します。

パラメータ 説明
shapeSource VEShapeSourceSpecificationオブジェクト。
callback データのインポート後に呼ばれるコールバック関数。VEShapeLayerオブジェクトが渡されます。
setBestView trueまたはfalseのブール値。trueの場合,インポートしたデータを表示するのに最適なマップの位置とズーム値に設定されます。

VEShapeSourceSpecificationというクラスが出てきました。このクラスはインポートするデータの形式・場所や追加先のVEShapeLayerオブジェクトの情報を持っています。このクラスのコンストラクタには次の値を順に指定しインスタンスを生成します。

パラメータ 説明
dataType VEDataType列挙体。GeoRSS,VECollection,ImportXMLの3種類があります。
dataSource GeoRSS,KMLのURL。または,Live Mapsのコレクションを示すGUIDと呼ばれる値。
layer VEShapeとしてデータをインポートする先のVEShapeLayerオブジェクト。

以上をまとめるとコレクションを表示するコードは次のようになります。先ほどのコードのpageLoaded関数の変更と新たにonFeedLoaded関数を追加しています。

function pageLoaded() {
    map = new VEMap("myMap");
    map.LoadMap();
    
    var layer = new VEShapeLayer();
    var spec = new VEShapeSourceSpecification(VEDataType.VECollection, 'AFE8504AA8CD166F!368', layer);
    map.ImportShapeLayerData(spec, onFeedLoaded, true);
}

function onFeedLoaded(layer) {
    alert(layer.GetShapeCount() + ' 個のアイテムをインポートしました。');
}

pageLoaded関数の中では,データのインポート先として新たにVEShapeLayerオブジェクトを生成し,VEShapeSourceSpecificationのコンストラクタに指定しています。 コールバック関数のonFeedLoadedではVEShapeLayerクラスのGetShapeCountメソッドを使いレイヤ内のプッシュピンの数を表示しています。

コレクションの場合,VEShapeSourceSpecificatioクラスのコンストラクタの引数にコレクションのGUID(globally-unique identifier)を指定することになりますが,この値はLive Search Mapsで知ることができます。図1のように表示されたコレクションの管理(マイコレクション)ウィンドウの中にある「操作」から「お気に入りに追加」を選択すると,新たにウィンドウが開きます図2)。アドレスのcid=以降の値がGUIDになります。

図2 お気に入りの追加

図2 お気に入りの追加

変更したコードをWebブラウザで表示すると図1のようになったと思います。プッシュピン上に数字は描かれませんが,マウスポインタを合わせると駅名の情報も取り込まれていることがわかります。

※1

4月11日にVirtual Earth Map Control 6.1がリリースされました。6.0と互換性があるため,特に理由がない限り6.1を使用するとよいでしょう。scriptタグに指定するURLのパラメータを6から6.1に変更します。

本記事での図は6.0のものになっています。

著者プロフィール

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

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

URL:http://katamari.jp

コメント

コメントの記入