ポリゴンを使った三角形の描画

広告

ポリゴンを使って三角形を描いてみます。地図上のクリックされた地点を中心としてピクセル単位で指定した底辺と高さの三角形を地図上に描画を行うようにします。

まず三角形の中心の座標で指定した地点をコンテナ内でのピクセル値に変換します。GMap2クラスで用意されているfromLatLngToContainerPixelメソッドを使います。 

var point = map.fromLatLngToContainerPixel(latlng);

このメソッドはGPointクラスのオブジェクトとして値を返します。左上隅を原点とした時に三角形の中心点のx座標の値とy座標の値は次のように取得できます。 

var point = map.fromLatLngToContainerPixel(latlng);

var x = point.x;
var y = point.y;

三角形の底辺をwピクセル、高さをhピクセルとすると、三角形の各頂点のx座標の値とy座標の値は次のように表すことが出来ます。 

var point = map.fromLatLngToContainerPixel(latlng);

var x = point.x;
var y = point.y;

var point1 = new GPoint(x, y - h / 2);
var point2 = new GPoint(x + w / 2, y + h / 2);
var point3 = new GPoint(x - w / 2, y + h / 2);

最後にこれらのピクセル値を座標に変換します。GMap2クラスで用意されているfromContainerPixelToLatLngメソッドを使います。 

var point = map.fromLatLngToContainerPixel(latlng);

var x = point.x;
var y = point.y;

var point1 = new GPoint(x, y - h / 2);
var point2 = new GPoint(x + w / 2, y + h / 2);
var point3 = new GPoint(x - w / 2, y + h / 2);

var latlng1 = map.fromContainerPixelToLatLng(point1);
var latlng2 = map.fromContainerPixelToLatLng(point2);
var latlng3 = map.fromContainerPixelToLatLng(point3);

中心点の座標と三角形の底辺と高さをピクセルで指定すると、三角形の三隅の座標を取得することが出来ました。この座標の配列としてポリゴンを作成することで地図上に三角形のポリゴンを表示することができます。

完成形はサンプルを参照して下さい。

サンプルプログラム

では試してみます。

code5_1.js 

var map;

function initialize() {
  if (GBrowserIsCompatible()) {
    map = new GMap2(document.getElementById("map_canvas"));
    map.setCenter(new GLatLng(35.681143, 139.767079), 14);

    GEvent.addListener(map, "click", addPolygonToMap);
  }
}

function addPolygonToMap(overlay, point){
  var latlngs = createRectangle(point, 100, 80);

  var polygon = new GPolygon(latlngs, "#ff0000", 5, 0.5, "#0000ff", 0.1);
  map.addOverlay(polygon);
}

function createRectangle(latlng, w, h){
  var point = map.fromLatLngToContainerPixel(latlng);

  var x = point.x;
  var y = point.y;

  var latlng1 = map.fromContainerPixelToLatLng(new GPoint(x, y - h / 2));
  var latlng2 = map.fromContainerPixelToLatLng(new GPoint(x + w / 2, y + h / 2));
  var latlng3 = map.fromContainerPixelToLatLng(new GPoint(x - w / 2, y + h / 2));

  var latlngs = [];
  latlngs.push(latlng1);
  latlngs.push(latlng2);
  latlngs.push(latlng3);
  latlngs.push(latlng1);

  return latlngs;
}

map5_1.html 

<!DOCTYPE html "-//W3C//DTD XHTML 1.0 Strict//EN" 
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
    <title>サンプル：ポリゴンを使った三角形の描画</title>
    <script src="http://maps.google.com/maps?file=api&v=2&key=(key)&sensor=false"
            type="text/javascript" charset="utf-8"></script>
    <script src="./js/code5_1.js" type="text/javascript"></script>
  </head>
  <body onload="initialize()" onunload="GUnload()">
    <div id="map_canvas" style="width: 400px; height: 400px"></div>
  </body>
</html>

ではブラウザで上記のURLを見てみます。

p5-1

今回のサンプルでは地図上でクリックすると、その地点を中心とした三角形のポリゴンを描画します。

p5-2

p5-3

( Written by Tatsuo Ikura )