マップへのシェイプの追加
シェイプは、場所のマーキング、地理的な境界の強調表示、マップ上での情報表示などの処理に使用できます。
シェイプの基本
シェイプには、3 つのタイプがあります。プッシュピン、折れ線、および多角形です。これらは、それぞれ、マップ上のポイント、線、および多角形に対応します。バージョン 5 のリリースにより、すべてのシェイプ オブジェクトが VEShape クラスに統合されました。シェイプは、マップのベース レイヤに直接追加できます。また、VEShapeLayer クラスを使用してシェイプ レイヤを作成し、作成したレイヤを利用してシェイプのグループを作成したり管理したりすることもできます。シェイプ オブジェクトを追加した後は、各オブジェクトのメソッドを直接呼び出すことで、シェイプのプロパティを設定および取得することができます。
VEMap のシェイプ関連メソッド
VEMap.AddShape メソッドを使用すると、マップのベース レイヤにシェイプを追加できます。このメソッドは、既存の VEShape オブジェクトをマップのベース レイヤに追加します。VEMap.DeleteShape メソッドを使用すると、ベース レイヤから 1 つのシェイプを削除できます。また、VEMap.DeleteAllShapes メソッドを使用すると、ベース レイヤからすべてのシェイプ オブジェクトを削除できます。
VEShapeLayer のシェイプ関連メソッド
VEShapeLayer.AddShape メソッドを使用すると、シェイプを追加できます。VEShapeLayer.DeleteShape メソッドを使用するとレイヤから 1 つのシェイプを削除することができ、VEShapeLayer.DeleteAllShapes メソッドを使用するとレイヤからすべてのシェイプ オブジェクトを削除することができます。
VEShape オブジェクトのプロパティの設定および取得
シェイプをマップに追加した後は、VEShape クラスのメソッドを使用して、シェイプのプロパティを設定および取得できます。これらのプロパティは、線の色と幅、塗りつぶしの色と透明性、カスタム アイコン、画像ファイル、緯度/経度座標などの、シェイプのさまざまな面を制御します。バージョン 5 以降ではタイトルと説明のプロパティにカスタム HTML を格納することができ、シェイプの拡張とカスタマイズに使用できます。
マップへのシェイプの追加
マップにシェイプを追加する手順は以下のとおりです。
VELatLong オブジェクトの配列を定義します。多角形オブジェクトには 3 つ以上のポイントが必要であり、折れ線オブジェクトには 2 つ以上のポイントが必要です。プッシュピン オブジェクトに必要なポイントは 1 つのみで、配列に格納することも、単一の VELatLong オブジェクトにすることもできます (配列に格納した場合、最初の VELatLong オブジェクトがメソッドで使用されます)。
var points = new Array( new VELatLong(45.01188,-111.06687, 0, VEAltitudeMode.RelativeToGround), new VELatLong(45.01534,-104.06324, 0, VEAltitudeMode.RelativeToGround), new VELatLong(41.01929,-104.06, 0, VEAltitudeMode.RelativeToGround), new VELatLong(41.003,-111.05878, 0, VEAltitudeMode.RelativeToGround) );
VEShape オブジェクトを作成します。以下のコードでは、新しい多角形のシェイプ "myPolygon" を、指定した座標に作成します。
var myPolygon = new VEShape(VEShapeType.Polygon, points);
"myPolygon" という VEShape オブジェクトをマップに追加します。
var myPolygon = map.AddShape(myPolygon);
シェイプのプロパティを編集します。この例では、シェイプのタイトルおよび説明の文字列を追加します。この例で使用しているのはテキストのみですが、これらの文字列には有効な HTML も使用することができます。
myPolygon.SetTitle("自分で作成した多角形"); myPolygon.SetDescription("これは、自分で作成した多角形の説明です。");
ページ全体の最終的なコードは、以下のような内容になります。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <title>マップへのシェイプの追加</title> <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.1"> </script> <script type="text/javascript"> var map = null; var points = new Array( new VELatLong(45.01188,-111.06687, 0, VEAltitudeMode.RelativeToGround), new VELatLong(45.01534,-104.06324, 0, VEAltitudeMode.RelativeToGround), new VELatLong(41.01929,-104.06, 0, VEAltitudeMode.RelativeToGround), new VELatLong(41.003,-111.05878, 0, VEAltitudeMode.RelativeToGround) ); function GetMap() { map = new VEMap('myMap'); map.LoadMap(); var myPolygon = new VEShape(VEShapeType.Polygon, points); map.AddShape(myPolygon); myPolygon.SetTitle("自分で作成した多角形"); myPolygon.SetDescription("これは、自分で作成した多角形の説明です。"); } </script> </head> <body onload="GetMap();"> <div id='myMap' style="position:relative; width:400px; height:400px;"></div> </body> </html>
マップへのシェイプ レイヤの追加
シェイプ レイヤを使用すると、シェイプのコレクションを 1 つのマップに複数作成して、管理することができます。シェイプ レイヤにシェイプを追加する手順は以下のとおりです。
VEShapeLayer クラスの新しいインスタンスを初期化します。
var myShapeLayer = new VEShapeLayer();
VEMap.AddShapeLayer メソッドを使用して、マップにシェイプ レイヤを追加します。
map.AddShapeLayer(myShapeLayer);
シェイプ レイヤ自体は見えないので、レイヤにシェイプ オブジェクトを追加します。
VELatLong オブジェクトの配列を定義します。
var points = new Array( new VELatLong(45.01188,-111.06687, 0, VEAltitudeMode.RelativeToGround), new VELatLong(45.01534,-104.06324, 0, VEAltitudeMode.RelativeToGround), new VELatLong(41.01929,-104.06, 0, VEAltitudeMode.RelativeToGround), new VELatLong(41.003,-111.05878, 0, VEAltitudeMode.RelativeToGround) );
VEShape オブジェクトを作成し、マップに追加します。
var myShape = new VEShape(VEShapeType.Polygon, points);
VEShapeLayer.AddShape メソッドを使用して、シェイプ レイヤにシェイプを追加します。
myShapeLayer.AddShape(myShape);
ページ全体の最終的なコードは、以下のような内容になります。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <title>マップへのシェイプの追加</title> <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.1"></script> <script type="text/javascript"> var map = null; var points = new Array( new VELatLong(45.01188,-111.06687, 0, VEAltitudeMode.RelativeToGround), new VELatLong(45.01534,-104.06324, 0, VEAltitudeMode.RelativeToGround), new VELatLong(41.01929,-104.06, 0, VEAltitudeMode.RelativeToGround), new VELatLong(41.003,-111.05878, 0, VEAltitudeMode.RelativeToGround) ); function GetMap() { map = new VEMap('myMap'); map.LoadMap(); var myShapeLayer = new VEShapeLayer(); map.AddShapeLayer(myShapeLayer); var myShape = new VEShape(VEShapeType.Polygon, points); myShapeLayer.AddShape(myShape); } </script> </head> <body onload="GetMap();"> <div id='myMap' style="position:relative; width:400px; height:400px;"></div> </body> </html>