YOLP(地図)

SilverlightマップAPI

リクエストURL
Silverlight
http://sl.api.olp.yahooapis.jp/OpenLocalPlatform/V1/slapi.xap
SilverlightマップAPIは、2014年5月31日をもって廃止いたします。他のYOLP地図APIへの移行をお願いいたします。Yahoo! JavaScriptマップAPI、もしくはYahoo!スタティックマップAPIをご利用ください。

目次




SilverlightマップAPIでできること

  • Silverlight地図コンテンツをウェブページに自由にはり付けて利用できます。
  • JavaScriptでSilverlight地図を操作することで、地図の簡単な処理が可能です。
  • 地図上にマーカー、ポリライン、ポリゴンなどを描画できます。
  • インターネット上に公開された地理情報をAPIプロキシを通して、地図上に読み込み表示することが可能です。



地図の表示方法

Silverlight地図コンテンツをウェブページにはり付ける方法を以下で解説します。

サンプルコード

以下のコードをページにはり付けて地図を表示できます。

<html>
<head>
</head>
<body>
<div id="silverlightControlHost" width="800" height="400">
<object id="slPlugin" data="data:application/x-silverlight-2," type="application/x-silverlight-2" width="800" height="400">
    <param name="source" value=" http://sl.api.olp.yahooapis.jp/OpenLocalPlatform/V1/slapi.xap?appid=<ユーザーのアプリケーションID>"/>
    <param name="background" value="white" />
    <param name="minRuntimeVersion" value="3.0.40620" />
    <param name="autoUpgrade" value="true" />
    <param name="enableHtmlAccess" value="true" />

    <param name="initparams" value="lat=35.665627,lng=139.730738,zoom=16,layerSetID=map" />
    <a href="http://go.microsoft.com/fwlink/?LinkID=149156" style="text-decoration: none;">
        <img src="http://go.microsoft.com/fwlink/?LinkId=108181" alt="Microsoft Silverlightを取得" style="border-style: none"/>
    </a>
</object>
<iframe style='visibility:hidden;height:0;width:0;border:0px'></iframe>
</div>
</body>
</html>

地図を表示するSilverlight領域

<div id="silverlightControlHost" width="800" height="400">
<object id="slPlugin" data="data:application/x-silverlight-2," type="application/x-silverlight-2" width="800" height="400">
……
</object>
……
</div>

地図をウェブページ上に表示するため、HTMLにSilverlight領域のDOM要素を用意する必要があります。
上の例では"slPlugin"というIDを持つobject要素を定義しています。
このIDはJavaScriptで地図を操作するときに必要です。
また、div要素とobject要素の両方にwidth属性とheight属性を持たせ、領域の幅と高さを指定しています。

地図の初期設定

<object id="slPlugin" …… >
    ……
    <param name="initparams" value="lat=35.665627,lng=139.730738,zoom=16,layerSetID=map" />
    ……
</object>

initparamsパラメータを使って地図の初期設定を行います。
上記のようにobject要素の下にparam要素を用意し、name属性に"initparams"を、value属性にパラメータを指定します。
initparamsパラメータには以下の項目を指定できます。複数の項目を指定するときは「,」で区切ります。

onLoadComplete
地図が完全にロードされたときに実行するJavaScript関数を指定します。
lat
初期表示する中心緯度を指定します。デフォルトは35.665627です。
lng
初期表示する中心経度を指定します。デフォルトは139.730738です。
zoom
初期表示するズームレベルを指定します。値は1~18です。デフォルトは16です。
layerSetID
初期表示するレイヤーセット(地図の種別)のIDを指定します。"map"(標準地図)、"photo"(航空写真)、"b1-map"(地下街)から選択します。デフォルトは"map"です。
Dragging
ドラッグによる地図の移動の有効/無効をtrue/falseで指定します。デフォルトはtrueです。
DoubleClickZoom
ダブルクリックによる地図のズームの有効/無効をtrue/falseで指定します。デフォルトはtrueです。
ScrollWheelZoom
スクロールホイールによる地図のズームの有効/無効をtrue/falseで指定します。デフォルトはfalseです。
ContinuousZoom
滑らかなズームアニメーションの有効/無効をtrue/falseで指定します。デフォルトはfalseです。




地図を操作する

JavaScriptでSilverlight地図オブジェクトを取得し、地図の操作や設定の変更ができます。

<head>
<script type="text/javascript">
//Silverlight地図のJavaScriptインターフェースオブジェクト
var YOLPSL;
//Silverlight地図オブジェクト
var ymap;

//YOLPSLロード完了イベント
//第1引数にMapクラスのインスタンスが格納されています。
function onLoadComplete(map, cassettes) {
    ymap = map;
    // JSInterfaceオブジェクトを取得し、変数YOLPSLに格納します。
    var slPlugin = document.getElementById("slPlugin");
    if (slPlugin && slPlugin.Content) {
        YOLPSL = slPlugin.Content.jsInterface;
    }
}
</script>
</head>
……
<object id="slPlugin" …… >
    ……
    <param name="initparams" value="……,onLoadComplete=onLoadComplete" />
    ……
</object>
……

JavaScriptによる操作方法

まず、initparamsパラメータのonLoadCompleteパラメータで地図の読み込みが完了したときに呼ばれるJavaScript関数を指定します。ここではonLoadCompleteを指定しています。
このonLoadComplete関数は第1引数にMapクラスのインスタンスを持ちます。これを利用して地図の操作や設定の変更ができます。

次に、JSInterfaceオブジェクトを取得します。SilverlightマップAPIをJavaScriptで操作する際、Silverlightで定義されたさまざまなクラスのインスタンスを利用します。その際にJSInterfaceオブジェクトを利用します。

インスタンスの生成(コンストラクタ引数なし)

JSInterface.CreateInstanceメソッドを利用し、インスタンス生成(new)を行えます。
第1引数にはクラス名を指定します。

//LayerSetControlオブジェクトを生成します。
var control = YOLPSL.CreateInstance("LayerSetControl");
インスタンスの生成(コンストラクタ引数あり)

JSInterface.CreateInstanceWithArgsメソッドを利用し、インスタンス生成(new)を行えます。
第1引数にはクラス名、第2引数以降にコンストラクタ引数を指定します。

//LatLngオブジェクトを地理座標指定で生成します。
var latlng = YOLPSL.CreateInstanceWithArgs("LatLng", 35.662484, 139.734222);
リストの生成と操作

JSInterface.CreateListメソッドを利用し、リストの生成を行えます。
第1引数にはリストに格納するクラス名を指定します。
生成されたリストは、通常のJavaScriptの配列と同様に[インデックス]によりアクセスしたり、pushメソッドを実行したりできます。

LatLngのリストを生成し、pushメソッドで要素を追加しています。
var llList = YOLPSL.CreateList("LatLng");
for (var j=0; j<5; j++) {
    llList.push(ll[j]);
}
配列の生成と操作

JSInterface.CreateArrayメソッドを利用し、配列の生成を行えます。
第1引数に配列に格納するクラス名、第2引数に要素数を指定します。
生成された配列は、通常のJavaScriptの配列と同様に[インデックス]によりアクセスできます。

//要素数2のDoubleの配列を生成し、破線スタイルを指定しています。
var dashArray = YOLPSL.CreateArray("Double", 2);
dashArray[0] = 4.0;
dashArray[1] = 1.0;
foption.StrokeStyle.DashArray = dashArray;
そのほかの制限
  • 継承によるクラス拡張はできません。そのためprotectedメソッドなどは実行できません。
  • static、constメンバーを利用できません。const値の代わりに特定の文字列を使用します。

地図に表示される場所を移動する

地図に表示される場所を移動するためのメソッドとして、Map.PanToが用意されています。 Map.PanToは地理座標(緯度経度)を指定して、中心の位置を移動できます。
Map.PanToの第1引数(pos引数)はLatLng(地理座標)オブジェクトを指定します。
※SilverlightマップAPIでオブジェクト(クラスインスタンス)を生成するためには、JSInterface.CreateInstanceメソッド(引数なしのとき)またはJSInterface.CreateInstanceWithArgsメソッド(引数ありのとき)を利用します。

//LatLng(地理座標)オブジェクトを生成します。
var latlng = YOLPSL.CreateInstanceWithArgs("LatLng", 35.662484, 139.734222);

第2引数(animation引数)で移動時のアニメーション処理の有無を指定します。

//地図を緯度35.662484、経度139.734222の位置に移動します。
var latlng = YOLPSL.CreateInstanceWithArgs("LatLng", 35.662484, 139.734222);
ymap.PanTo(latlng, true);

また、Map.PanByというメソッドも用意されています。 Map.PanByは画面上のピクセル数を指定して、地図の移動量を指定できます。
Map.PanToとは違い、Map.PanByの第1引数はPoint(ピクセル座標)オブジェクトを指定します。

//地図を右方向に200px、下方向に100px移動します。
var point = YOLPSL.CreateInstanceWithArgs("Point", -200, -100);
ymap.PanBy(point, true);

地図のズームを変更する

地図のズームを変更するには、Map.ZoomInメソッドまたはMap.ZoomOutメソッドを使用します。
また、Map.SetZoomメソッドを使用することで、指定した地理座標を地図の中心にしたり、アニメーション処理をつけながらズームを変更する処理を行うこともできます。指定できるズームの値は1~18です。

//レベルを1つズームインします。
ymap.ZoomIn();
//ズームを5に設定し、緯度35.662484、経度139.734222の地点を中心に
//アニメーション処理をつけてズームインします。
var latlng = YOLPSL.CreateInstanceWithArgs("LatLng", 35.662484, 139.734222);
ymap.SetZoom(5, true, latlng);

地図の種別を変更する

地図で表示しているレイヤーセットを変更することで、地図の種別を変更できます。 地図のレイヤーセットを変更するにはMap.SetLayerSetメソッドを使用します。 引数に指定するレイヤーセットのIDは以下の3種類が標準で用意されています。

"map"
標準地図です。
"photo"
航空写真です。
"map-b1"
地下街です。

//地図を航空写真に切り替えます。
ymap.SetLayerSet("photo");

コントロールを利用する

コントロールとは

ユーザーが操作可能な地図上のユーザーインターフェースをコントロールと呼びます。APIに用意されたコントロールを利用することにより、地図上にさまざまな機能を用意できます。

コントロールの種類

地図を操作する基本的な機能を提供するコントロールとして、以下を利用できます。

ZoomControl
地図のズームを変更するボタンを配置します。
SliderZoomControlVertical
地図のズームを変更するための縦長(垂直方向)スライダー形式のユーザーインターフェースを配置します。
SliderZoomControlHorizontal
地図のズームを変更するための横長(水平方向)スライダー形式のユーザーインターフェースを配置します。
PanControl
地図の移動のためのボタンを配置します。
LayerSetControl
地図のレイヤーセットを切り替えるためのボタンを配置します。
CenterMarkControl
地図の中心位置の表示と、その表示/非表示を切り替えるボタンを配置します。
ScaleControl
地図の縮尺を表示します。

地図上に応用的な機能やサービスを提供するためのコントロールとして、以下を利用できます。

HomeControl
地図の初期位置にホームアイコンを表示します。
GeoCoderControl
住所や施設を検索するためのユーザーインターフェースを配置します。

コントロールの追加と削除

Control.AddControlメソッドを使用して、地図上へコントロールを追加できます。

// レイヤーセットコントロールを追加します。
var control = YOLPSL.CreateInstance("LayerSetControl");
ymap.AddControl(control);

Control.RemoveControlメソッドを使用して、地図上のコントロールを削除できます。引数にはControl.AddControlメソッドの戻り値を指定します。

// レイヤーセットコントロールを削除します。
ymap.RemoveControl(control);



イベントを利用する

イベントとは

地図のクリックや移動など、ユーザーが地図上でさまざまな動作を行った際に発生するものを意味します。
イベントに対する処理を記述することで、ユーザーの動作に応じた処理をカスタマイズできます。

イベントに伴う処理を登録する

地図に対するイベントはMap.Events.addEventListenerメソッドを使用して登録します。このメソッドの第1引数にイベントの種別を、第2引数にイベント発生時に実行するメソッドを指定します。
指定するメソッドは第1引数にイベント発生主体となるsenderObject)、 第2引数にイベント引数であるargsMapEventArgs)を受け取るよう作成します。

//地図オブジェクトにクリックに対応するイベントを登録します。
ymap.Events.addEventListener("Click", clickMap);

//マウスクリック時に呼び出されるメソッド
function clickMap(sender, args) {
    // argsにMapEventArgs(イベント引数)が格納されています。
    // 地図クリックイベントではLatLng(地理座標)をイベント引数として引き渡します。
    var latlng = args.LatLng;
    alert(latlng.Lat + ',' + latlng.Lon + 'がクリックされました。');
}

イベントを削除する

Map.Events.removeEventListenerメソッドを使用することで、不要になった地図イベントを削除できます。
引数には、イベントを登録したときと同じ関数を指定します。

//イベントの登録
function addClickEvent() {
    ymap.Events.addEventListener("Click", clickMap);
}

//イベントの削除
function removeClickEvent() {
    ymap.Events.removeEventListener("Click", clickMap);
}

//マウスクリック時に呼び出されるメソッド
function clickMap(sender, args) {
    var latlng = args.LatLng;
    alert(latlng.Lat + ',' + latlng.Lon + 'がクリックされました。');
}



地物(マーカー、ポリライン、ポリゴン)を利用する

地物とは

地図上に描かれるマーカー、ポリライン、ポリゴンなどを地物と呼びます。
地物には、以下の種類が存在します。

YLabel
ラベル。地点にテキストを表示します。
YMarker
マーカー。地点をアイコン画像で表示します。
YPolyline
ポリライン。複数のポイントで構成される線を表示します。
YPolygon
ポリゴン。複数のポイントで囲まれた面を表示します。
YCircle
円。地点を中心とした円を表示します。
YEllipse
楕円(だえん)。地点を中心とした楕円を表示します。

マーカーを追加する

地図上の地点を表すマーカーを表示できます。 地理座標を指定してYMarkerオブジェクトを生成し、Map.AddFeatureメソッドやFeatureLayer.AddFeatureメソッドを使用して、地図上にマーカーを追加します。

//(35.665627,139.730738)の位置にマーカーを表示します。
var latlng = YOLPSL.CreateInstanceWithArgs("LatLng", 35.665627,139.730738);
var marker = YOLPSL.CreateInstanceWithArgs("YMarker", latlng);
ymap.AddFeature(marker);

マーカーに利用するアイコン画像をカスタマイズするには、YIconオブジェクトを生成し、YMarkerオブジェクトのオプションに渡します。
※アイコン画像はJPEG形式とPNG形式の画像に対応しています。

//http://example.com/icon.png をマーカーの画像として使用します。
var foption = YOLPSL.CreateInstance("FeatureOption");
foption.Icon = YOLPSL.CreateInstanceWithArgs("YIcon", 'http://example.com/icon.png');

//マーカー生成
var marker = YOLPSL.CreateInstanceWithArgs("YMarker", latlng, foption);
ymap.AddFeature(marker);

ポリラインを追加する

地図上に複数の点から構成される線を描画できます。ポリラインはYPolylineオブジェクトに、地理座標列や描画方法などを指定して生成します。
※地理座標列など、SilverlightマップAPIでリスト(配列)を生成するためには、JSInterface.CreateListメソッドを利用します。

//地理座標列を生成します。
// LatLngオブジェクトのリスト(配列)を生成します。
var latlngs = YOLPSL.CreateList("LatLng");
// LatLngオブジェクトを追加します。
latlngs.push(YOLPSL.CreateInstanceWithArgs("LatLng", 35.65823001066274, 139.73242475013626));
latlngs.push(YOLPSL.CreateInstanceWithArgs("LatLng", 35.65423001066274, 139.73332475013626));
latlngs.push(YOLPSL.CreateInstanceWithArgs("LatLng", 35.66213218144044, 139.7340812498726));

//FeatureOption(地物の描画オプション)オブジェクトを生成します。
var foption = YOLPSL.CreateInstance("FeatureOption");
//線のスタイルを表すオブジェクトを生成し、描画オプションに追加します。
foption.StrokeStyle = YOLPSL.CreateInstanceWithArgs("YStyle", "0x00ffff", 4, 0.75);

var latlngs = YOLPSL.CreateList("LatLng");   // リストを生成
latlngs.push(YOLPSL.CreateInstanceWithArgs("LatLng", 35.65823001066274, 139.73242475013626));
latlngs.push(YOLPSL.CreateInstanceWithArgs("LatLng", 35.65423001066274, 139.73332475013626));
latlngs.push(YOLPSL.CreateInstanceWithArgs("LatLng", 35.66213218144044, 139.7340812498726));

//ポリラインを生成します。
var polyline = YOLPSL.CreateInstanceWithArgs("YLine", latlngs, foption);
ymap.AddFeature(polyline);

ポリゴンを追加する

地図上に複数の点で囲まれた面を描画できます。 ポリゴンはYPolygonオブジェクトに、地理座標列や描画方法などを指定して生成します。

var foption = YOLPSL.CreateInstance("FeatureOption");
//線のスタイルを生成
foption.StrokeStyle = YOLPSL.CreateInstanceWithArgs("YStyle", "0x000000", 2, 1.0);
//面のスタイルを生成
foption.FillStyle = YOLPSL.CreateInstanceWithArgs("YStyle", "0xff0000", 1, 0.6);

//地理座標列を生成
var latlngs = YOLPSL.CreateList("LatLng");   // リストを生成
latlngs.push(YOLPSL.CreateInstanceWithArgs("LatLng", 35.65823001066274, 139.73242475013626));
latlngs.push(YOLPSL.CreateInstanceWithArgs("LatLng", 35.65523001066274, 139.73232475013626));
latlngs.push(YOLPSL.CreateInstanceWithArgs("LatLng", 35.65423001066274, 139.73332475013626));
latlngs.push(YOLPSL.CreateInstanceWithArgs("LatLng", 35.66213218144044, 139.7340812498726));

//ポリゴンを生成
var polygon = YOLPSL.CreateInstanceWithArgs("YPolygon", latlngs, foption);
ymap.AddFeature(polygon);

地物を削除する

地図上からマーカーやポリライン、ポリゴンなどの地物を削除するには、Map.RemoveFeatureメソッドを使用します。

//マーカーを削除します。
ymap.RemoveFeature(marker);
//ポリラインを削除します。
ymap.RemoveFeature(polyline);
//ポリゴンを削除します。
ymap.RemoveFeature(polygon);

地物にイベントを設定する

地図だけでなく、地物にもイベントを設定できます。地物にイベントを設定するには、Feature.addEventListenerメソッドを使用します。

var latlng = YOLPSL.CreateInstanceWithArgs("LatLng", 35.665627,139.730738);
var marker = YOLPSL.CreateInstanceWithArgs("YMarker", latlng);
//マーカーにクリックイベントを設定します。
marker.addEventListener("Click", clickMarker);

ymap.AddFeature(marker);

//マーカークリック時に呼び出されるメソッド
function clickMarker(sender, args) {
    alert('マーカーがクリックされました。');
}



レイヤーを利用する

レイヤーとは

地図の上に重ねて表示するオブジェクトをレイヤーといいます。このAPIには以下のレイヤーがあらかじめ用意されています。

FeatureLayer
Feature(地物)をまとめて配置、管理するレイヤーです。
ImageTileLayer
地図画像をタイル状に表示するレイヤーです。
※JPEG形式とPNG形式の画像に対応しています。
GeoXmlLayer
YDF、KML、GeoRSSなどのXMLファイルを表示するレイヤーです。

レイヤーの追加と削除

レイヤーを地図に追加するには、Map.AddLayerメソッドを使用します。

//地図上一面にhttp://example.com/example.pngの画像をタイル形式で表示します。
var layer = YOLPSL.CreateInstanceWithArgs("ImageTileLayer","example","http://example.com/example.png?");
ymap.AddLayer(layer);

レイヤーを地図から削除するには、Map.RemoveLayerメソッドを使用します。

//レイヤーを削除します。
ymap.RemoveLayer(layer);