GoogleMapで面積計測(v3)
- GoogleMap
-
2013-09-06 - 更新:2017-10-25
GoogleMapを利用し、図形を描画して囲った部分の面積を求めることができます。
ネットで探しましたが、バージョン3で組まれたものが見当たらなかったので書いておきます。
計測にはというジオメトリライブラリのユーティリティ関数(google.maps.geometry.spherical)を使用します。
コードはGoogleMapオブジェクト(map)は既に作成済のものとして書いています。
ついでに、距離も計測できるようにしています。
ご参考になれば幸いです。
ちなみに、某メーカーの住宅地図ソフトでの面積計測と精度は変わりませんでした。
GoogleMapAPI version 3.21
PolygonOptionsクラス
var myPolygonOptions = {
clickable: false, // クリックイベントの有効/無効
fillColor: "#ffffff", // 塗り潰し色
fillOpacity: 0.6, // 塗り潰しの不透明度(0.0-1.0)
map: map, // GoogleMapのインスタンス
paths: new Array(), // 座標の配列
strokeColor: "#000000", // 線の色
strokeOpacity: 0.8, // 線の不透明度(0.0-1.0)
strokeWeight: 3 // 線の太さ(ピクセル)
}
Polygonクラス
// Polygon用グローバル変数
var poly;
var myPolygon = {
make: function()
{
poly = new google.maps.Polygon(myPolygonOptions);
// マウスカーソルを矢印に設定
myOptions.draggableCursor = "default";
myOptions.draggingCursor = "default";
map.setOptions(myOptions);
// 既にマップにクリックイベントを設定していたらクリアする
google.maps.event.clearListeners(map, "click");
// マップのクリックイベントに図形描画
google.maps.event.addListener(map, "click", function(e)
{
if(e)
{
myPolygonOptions.paths.push(new google.maps.LatLng(e.latLng.lat(), e.latLng.lng()));
poly.setPaths(myPolygonOptions.paths);
poly.setMap(map);
// 面積計測のための図形座標の配列を別途作成
// 別に作成しないと続きを描画できない(計測するには図形を閉じないといけないため)
var thisPoly = new Array();
for(var i = 0; i < myPolygonOptions.paths.length; i++)
{
thisPoly.push(myPolygonOptions.paths[i]);
}
// 面積を計測するには図形が閉じている必要があるので、最後に開始点を追加
thisPoly.push(myPolygonOptions.paths[0]);
// 面積を計測し、小数点以下2位で切り上げ
var a = google.maps.geometry.spherical.computeArea(thisPoly);
a *= 100;
a = Math.ceil(a);
a /= 100;
alert("面積:" + a + "平米");
if(myPolygonOptions.paths.length > 1)
{
// 最終点から1つ前の座標
var from = myPolygonOptions.paths[myPolygonOptions.paths.length - 2];
// 最終点の座標
var to = myPolygonOptions.paths[myPolygonOptions.paths.length - 1];
// 2点間の距離を計測
var d = google.maps.geometry.spherical.computeDistanceBetween(from, to);
// 距離を小数点以下2位で切り上げ
d *= 100;
d = Math.ceil(d);
d /= 100;
alert("最終2点間の距離:" + d + "m");
}
}
});
},
clear: function()
{
// 描画した図形の削除
myPolygonOptions.paths = new Array();
poly.setPaths(new Array());
poly.setMap(map);
}
}
【実装例】
mapオブジェクトを作成した後で以下を実行してください
myPolygon.make();
描画した図形を削除するときは
myPolygon.clear();
【公式】Google Maps Javascript API V3 Reference
https://developers.google.com/maps/documentation/javascript/reference?hl=ja
こちらのドキュメントがとても参考になりました。
Google Maps JavaScript API V3
http://ryo59.com/reference/index.html
・マウスカーソルの形状について
カーソルの形状は、W3Cで定義されているものは使えるようです。
http://www.w3.org/TR/2004/CR-CSS21-20040225/ui.html
GoogleMapAPI version 3.26
バージョンが上がったからか、マウスカーソルの設定がうまく動作しないようになってたので修正。
描画した図形の削除と同時にマウスカーソルを元に戻し、クリックイベントもクリアするメソッドも追加しました。
ついでに坪数計算も入れておきました。
修正版(2017/10/25)
var myPolygon = {
make: function(area_id, area_tubo_id, distance_id)
{
poly = new google.maps.Polygon(myPolygonOptions);
// マウスカーソルを矢印に設定
myOptions.draggableCursor = "default";
myOptions.draggingCursor = "default";
map.setOptions( { draggableCursor: "default", draggingCursor: "default" } );
// 既にマップにクリックイベントを設定していたらクリアする
google.maps.event.clearListeners(map, "click");
// マップのクリックイベントに図形描画
google.maps.event.addListener(map, "click", function(e)
{
if(e)
{
myPolygonOptions.paths.push(new google.maps.LatLng(e.latLng.lat(), e.latLng.lng()));
poly.setPaths(myPolygonOptions.paths);
poly.setMap(map);
// 面積計測のための図形座標の配列を別途作成
// 別に作成しないと続きを描画できない(計測するには図形を閉じないといけないため)
var thisPoly = new Array();
for(var i = 0; i < myPolygonOptions.paths.length; i++)
{
thisPoly.push(myPolygonOptions.paths[i]);
}
// 面積を計測するには図形が閉じている必要があるので、最後に開始点を追加
thisPoly.push(myPolygonOptions.paths[0]);
// 面積を計測し、小数点以下2位で切り上げ
var a = google.maps.geometry.spherical.computeArea(thisPoly);
a *= 100;
a = Math.ceil(a);
a /= 100;
alert("面積:" + a + "平米");
// 面積を坪数に変換し、小数点以下2位で切り上げ
var tubo = a * 0.3025;
tubo *= 100;
tubo = Math.ceil(tubo);
tubo /= 100;
alert("面積:" + tubo + "坪");
if(myPolygonOptions.paths.length > 1)
{
// 最終点から1つ前の座標
var from = myPolygonOptions.paths[myPolygonOptions.paths.length - 2];
// 最終点の座標
var to = myPolygonOptions.paths[myPolygonOptions.paths.length - 1];
// 2点間の距離を計測
var d = google.maps.geometry.spherical.computeDistanceBetween(from, to);
// 距離を小数点以下2位で切り上げ
d *= 100;
d = Math.ceil(d);
d /= 100;
alert("最終2点間の距離:" + d + "m");
}
}
});
},
clear: function()
{
// 描画した図形の削除
myPolygonOptions.paths = new Array();
poly.setPaths(new Array());
poly.setMap(map);
},
destroy: function()
{
this.clear();
// マウスカーソルを元に戻す
myOptions.draggableCursor = null;
myOptions.draggingCursor = null;
map.setOptions( { draggableCursor: null, draggingCursor: null } );
// マップのクリックイベントをクリア
google.maps.event.clearListeners(map, "click");
},
}




