園田 誠(そのだ まこと)

 地図というのはどうしてこうも男心をくすぐるんでしょうか。一通り知り合いの家あたりを見終わると,目に付いた道をまっすぐたどってどこまでいくのか見てみたくなります。そして突き当たると,この国道にも起点や終点があったんだなとか変なことに感動してみたり。プログラムなんかしなくてもこれはこれで楽しめるのかもしれま…いや,ちゃんと記事書きます。ごめんなさい。1965年生まれ。愛知県名古屋市出身のフリーライター。

 前回は,Virtual Earthの2種類のレイヤー機能のうち,タイル・レイヤーについて説明しました。今回は,もう一種類のシェイプ・レイヤーについて説明します。

 シェイプ・レイヤーは,SDK 5.0から実装された機能です。地図の任意の地点に,画びょうを刺したり,自由に線画を書いたりすることができます。

地図に画びょうを刺す

 まずは地図の上にシェイプ・レイヤーを貼り付けるという基本動作から覚えましょう。リスト1をtest3.htmlなどの名前でデスクトップに作成し,ダブルクリックしてブラウザで表示してみてください。


<!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 src=
  "http://dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=5">
</script>
<script>
    var map = null;
    var layer;
            
    function GetMap(){
      map = new VEMap('myMap');
      //表示緯度経度指定
      var latLon = new VELatLong(35.6,139.7); 
      map.LoadMap(latLon,15,false);

      //邪魔な縮尺変更コントロールを消します
      map.HideDashboard();
      //レイヤー生成functionへ
      CreateLayer();
    }

    function CreateLayer(){
      //レイヤーを作って
      layer = new VEShapeLayer();
      //表示
      map.AddShapeLayer(layer);
    }
</script>
</head>
<body onload="GetMap();">
<div id='myMap'
  style="position:relative; width:400px; height:400px;"></div>
</body></html>
リスト1●シェイプ・レイヤーを使ったサンプル

 シェイプ・レイヤーは,タイル・レイヤーと違って画像指定などがありません。レイヤーそのものは無色透明です。したがって実行画面は,普通に地図を表示しているのと何も変わらないように見えます(図1)。

図1●シェイプ・レイヤーは透明なので,そのままでは存在を確認できない
図1●シェイプ・レイヤーは透明なので,そのままでは存在を確認できない

 リスト1では,レイヤーの生成はfunction CreateLayer()で行っています。処理そのものはたった2行です。書式は次のようになります。

レイヤー・オブジェクト名 = new VEShapeLayer();
地図オブジェクト.AddShapeLayer(レイヤーオブジェクト名);

 シェイプ・レイヤーは,シェイプ(画びょう,Polyline,多角形)を貼り付けるための透明なセロハンのようなものです。実際にシェイプを貼り付けてみましょう。次のサンプル(リスト2)は,マウス・クリックの位置の緯度と経度を読み取って,そこに画びょうシェイプを表示します(図2)。


<!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 src=
  "http://dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=5">
</script>
<script>
    var map = null;
    var layer;
    var pixel = null;
    var clickEvent = null;

    function GetMap(){
      map = new VEMap('myMap');
      var latLon = new VELatLong(35.6,139.7); 
      map.LoadMap(latLon,15,false);

      //邪魔な縮尺変更コントロールを消します
      map.HideDashboard();
      map.AttachEvent("onclick", PixelClick);
      CreateLayer();
    }

    function CreateLayer(){
      //レイヤーを作って
      layer = new VEShapeLayer();
      //表示
      map.AddShapeLayer(layer);
    }

    function PushPin(LL){
      //現在のマウス位置に画びょうを刺します
      //チェックボックスがチェックされていたら
      if(document.frm1.cb.checked){
        shape = new VEShape(VEShapeType.Pushpin, LL);
        shape.SetTitle('画鋲刺してみました');
        shape.SetDescription('ここをクリックしました');
        layer.AddShape(shape);
        //チェックボックスを外しておきます
        document.frm1.cb.checked = false;
      }
    }

    function PixelClick(e){
      //クリックした位置の座標を取得します
      var x = e.mapX;
      var y = e.mapY;
      pixel = new VEPixel(x, y);
      var LL = map.PixelToLatLong(pixel);
      PushPin(LL);
    }

</script>
</head>
<body onload="GetMap();">
<div id='myMap'
  style="position:relative; width:400px; height:400px;"></div>
<br />
<span id="info"></info>
<form id="frm1" name="frm1">
<input type="checkbox" id="cb" name="cb">
ここをチェックして画面クリックすると,クリック位置に画鋲を刺します
</form>
</body></html>
リスト2●マウス・クリック位置の緯度と経度を読み取って,そこに画びょう(シェイプ)を表示するサンプル

図2●マウスでクリックした位置に画びょうを刺す
図2●マウスでクリックした位置に画びょうを刺す

 画びょうの画像は,Virtual Earthが持っているので用意する必要はありません。いったん刺した画びょうは,緯度と経度で固定されるため,マップをグリグリと動かしたりズームを変えたりしても位置は保持されます。

 マウス・クリックのイベントで画びょうを刺す(表示する)場合,単に「クリック位置に画びょうを刺す」だけのコードを書くと,地図の表示位置をずらすためにドラッグするときにも画びょうが刺されてしまいます。これを避けるために,サンプルでは地図の下にチェックボックスを一つ用意しています。チェックボックスがチェックされていた場合に限り,地図の任意の場所をクリックしたときに,そこに画びょうが刺さります。

 画びょうを刺すと,プログラム側でチェックボックスからチェックを外しています。したがって,ドラッグで地図を動かすなどの場合に画びょうが刺さることはありません。

 シェイプを描画する書式は,次のようになります。簡単ですね。

シェイプオブジェクト = new VEShape(シェイプ・タイプ, 座標);

 第1引数に指定できるタイプの値は,表1のように3種類あります。

表1●シェイプ・タイプに指定できる値
内容
VEShapeType.Pushpin 画びょう
VEShapeType.Polyline 線(Polyline)
VEShapeType.Polygon 多角形

 画びょうの場合は,差し込む緯度と経度を1カ所指定すれば完了です。線と多角形の場合は,配列で始点から終点まで緯度経度の座標を渡します。なお,シェイプにはいくつかのプロパティがあります。サンプルでは二つのプロパティを使用しています(表2)。

表2●シェイプのプロパティ
プロパティ 内容
SetTitle シェイプにつけるタイトル
SetDescription シェイプの詳細説明

 どちらも日本語が使用できます。これらを使って,例えば,タイトルに「田中うどん 新宿店」,説明に「カレーうどん650円が抜群においしい!」といった説明書きを付けることができます。

 オブジェクトとして生成し,プロパティを設定したらAddShape()メソッドで表示します。たったこれだけのことで地図上に画びょうを刺して,そのポイントの説明を書き加えられるわけです。

 残念ながら,サンプルのように動的に画びょうを刺す処理をした場合には,その画像を他人と共有することはできません。処理はすべてJavaScriptの中で行われているので,共有されているスペースにデータを保持するということができないわけです。もし会社案内や,自分の自宅周辺で面白い場所を見つけて,地図として公開したい場合には「クリックした場所に画びょうを刺せます」という処理ではなくて,画びょうの描画位置をJavaScript内で固定して,閲覧者には見てもらうだけという作りになるでしょう。