マップへのシェイプの追加

  • [アーティクル]

シェイプは、場所のマーキング、地理的な境界の強調表示、マップ上での情報表示などの処理に使用できます。

シェイプの基本

シェイプには、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 を格納することができ、シェイプの拡張とカスタマイズに使用できます。

マップへのシェイプの追加

マップにシェイプを追加する手順は以下のとおりです。

  1. 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)
);

  2. VEShape オブジェクトを作成します。以下のコードでは、新しい多角形のシェイプ "myPolygon" を、指定した座標に作成します。

    var myPolygon = new VEShape(VEShapeType.Polygon, points);

  3. "myPolygon" という VEShape オブジェクトをマップに追加します。

    var myPolygon = map.AddShape(myPolygon);

  4. シェイプのプロパティを編集します。この例では、シェイプのタイトルおよび説明の文字列を追加します。この例で使用しているのはテキストのみですが、これらの文字列には有効な 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 つのマップに複数作成して、管理することができます。シェイプ レイヤにシェイプを追加する手順は以下のとおりです。

  1. VEShapeLayer クラスの新しいインスタンスを初期化します。

    var myShapeLayer = new VEShapeLayer();

  2. VEMap.AddShapeLayer メソッドを使用して、マップにシェイプ レイヤを追加します。

    map.AddShapeLayer(myShapeLayer);

    シェイプ レイヤ自体は見えないので、レイヤにシェイプ オブジェクトを追加します。

  3. 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)
);

  4. VEShape オブジェクトを作成し、マップに追加します。

    var myShape = new VEShape(VEShapeType.Polygon, points);

  5. 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>