MULTISOUP

MULTISOUP

MULTISOUP

マルティスープ
Staff Blog

Introduction example

2017.06.24

ジオメトリライブラリを使って距離や面積を算出する

ジオメトリライブラリ

みなさん、こんにちは。
Google Maps JavaScript API を使用して2点間の距離やエリアの面積を計算する方法をご存知ですか?

 

数学が得意だから自分で計算できる! という人もいるかもしれませんが、地図には投影法というものがあり、その投影法を考慮した形で計算するのは、中々大変なものがあります。

 

このようなとき、JavaScript API にはジオメトリライブラリというものがあるので、ご活用ください。

簡単に距離や面積を算出することができます!!

 

ジオメトリライブラリを使用する場合は、下記のように js ファイルロード時に「libraries=geometry」と指定する必要があります。

<script https://maps.google.com/maps/api/js?v=3&libraries=geometry&key={API_KEY}"></script>

 

 

距離を算出するには、「google.maps.geometry.spherical.computeLength」に LatLngオブジェクトの配列を渡すだけです。最低2点以上設定してください。

var pos = [
    new google.maps.LatLng(35.5, 139.5),
    new google.maps.LatLng(35.5, 139.4)
];
var dist = google.maps.geometry.spherical.computeLength(pos);

 

 

次に面積です。距離と同様に「google.maps.geometry.spherical.computeArea」にLatLngオブジェクトの配列を渡します。当然、面積なので3点以上必要ですね。

var pos = [
    new google.maps.LatLng(35.5, 139.5),
    new google.maps.LatLng(35.5, 139.4),
    new google.maps.LatLng(35.4, 139.3)
];
var area = google.maps.geometry.spherical.computeArea(pos);

 

 

デモサイトを作成したので、お試しください。

地図上をクリックすると、ラインやポリゴンを描画します。そのオブジェクトの距離、面積を算出します。

Full Screen

 

 

ジオメトリライブラリには、他にも以下の機能があります。

● ポイントがポリゴン内に存在するか判定する機能

● ポイントがポリライン・ポリゴンの境界付近に存在するか判定する機能

 

詳しくは、下記サイトをご覧ください。

https://developers.google.com/maps/documentation/javascript/geometry?hl=ja

 

 

今後も便利なライブラリがあれば、このブログで紹介していきたいと思います。

バイ!

地図や位置情報を用いたシステムのご提案・開発ならマルティスープへ

マルティスープは、創業以来のGISとモバイル開発の実績と技術力で、営業支援システムやリサーチ・公共インフラ・工事・警備業界の現場を支援するシステム開発など、地図や位置情報を使った業務システムの導入のご提案や開発をいたします。

現場をつなぐコミュニケーションが屋内外業務のパフォーマンスを最大限に。マルティスープのiField(アイ・フィールド)®シリーズは、屋内外業務の現場の実力を減少させるコミュニケーション障壁を除き、使い慣れたスマートデバイスを使って 現場の実力をリアルに伝えるサービス。

位置・空間情報のエキスパート集団として一緒に働きませんか?

マルティスープは地図情報をはじめとする位置・空間情報技術のエキスパート集団です。当社で日々研究している地図や位置情報といった技術は、災害支援など貢献度の高いシステムとして使用されることもあれば、スマートフォンアプリのゲームとして使われることもあり、その利用用途・価値は、今後もますます広がっていっています。
私たちの企業理念は、「創る喜び、使う喜び」です。
今後の開発体制をより強化するために、新卒・中途問わず、当社の未来を共に創っていただける新メンバーを募集します!

【関連記事】こんな記事も読まれています

2017.05.19

Googleマップに同心円を描画する

みなさん、こんにちは。

Googleマップ上に同心円を書きたいと思ったことはありませんか? 私は、よくあります。

マルティスープで・・・

続きを読む

2017.03.22

Google マップで「竹島」と表示する方法は?

みなさん、こんにちは。

Google Maps JavaScript API は、みなさんご存知のとおり多言語に対応した地図です。そのため、l・・・

続きを読む

2017.04.15

JavaScript API でよく使う地図オプション

みなさん、こんにちは!

今回は、「JavaScript・・・

続きを読む

 - Google Maps JavaScript API, スタッフ日記