ポリゴンを使った長方形の描画

広告

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

まず長方形の中心の座標で指定した地点をコンテナ内でのピクセル値に変換します。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 - w / 2, y - h / 2);
var point2 = new GPoint(x + w / 2, y - h / 2);
var point3 = new GPoint(x + w / 2, y + h / 2);
var point4 = 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 - w / 2, y - h / 2);
var point2 = new GPoint(x + w / 2, y - h / 2);
var point3 = new GPoint(x + w / 2, y + h / 2);
var point4 = new GPoint(x - w / 2, y + h / 2);

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

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

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

サンプルプログラム

では試してみます。

code4_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 - w / 2, 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 latlng4 = map.fromContainerPixelToLatLng(new GPoint(x - w / 2, y + h / 2));

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

  return latlngs;
}

map4_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/code4_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を見てみます。

p4-1

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

p4-2

p4-3

( Written by Tatsuo Ikura )

Profile
profile_img

著者 / TATSUO IKURA

プログラミングや開発環境構築の解説サイトを運営しています。