カテゴリー
SugiBlog Webエンジニアのためのお役立ちTips

GoogleMapで面積計測(v3)

この記事は最終更新日から1年以上経過しています。

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");
    },

}
この記事がお役に立ちましたらシェアお願いします
4,332 views

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です