球面大地表面に沿って線を描く

2つの座標を指定してポリラインを描画すると地図上の2点間を直線で描画しますが、これを大地表面に沿った最短距離で描画する方法を確認します。GPolylineクラスのコンストラクタ関数の5番目の引数で指定します。

GPolyline(latlngs:GLatLng[], color?:String, weight?:Number, opacity?:Number,
  opts?:GPolylineOptions);

GPolylineOptionsクラスはコンストラクタ関数が用意されていませんのでオブジェクトを作成する代わりにオブジェクトリテラルを作成し引数に指定します。この時、GPolylineOptionsクラスで定義されているプロパティの中でgeodesicプロパティに値を設定します。

geodesicプロパティ

ポリラインの各線を測地線として描画します（「大圏」の弧）。測地線とは、地
表面の 2 点間の最短経路のことです。 

値：
  Boolean

ポリラインを大地表面に沿った最短経路で結ぶ形で描画するにはgeodesicプロパティにtrueを設定して下さい。

実際には次のように記述します。

var map = new GMap2(document.getElementById("map"));
map.setCenter(new GLatLng(35.172304,136.908306), 15);

var points = [
  new GLatLng(35.680481,139.767036),
  new GLatLng(35.680481,139.767036),
  new GLatLng(35.680481,139.767036)
];

var opts = {geodesic:true};

var line = new GPolyline(points, "#ff00ff", 4, 0.5, opts);

map.addOverlay(line);

この設定を指定するには色や線の太さなどの引数を全て指定する必要があります。

サンプル

では試してみます。

code3_1.js

var map;
var flag;

function initialize() {
  if (GBrowserIsCompatible()) {
    map = new GMap2(document.getElementById("map_canvas"));
    map.setCenter(new GLatLng(36.870832,139.130859), 1);

    flag = false;
    dispPolyline();
  }
}

function change() {
  map.clearOverlays();

  if (flag == true){
    flag = false;
  }else{
    flag = true;
  }

  dispPolyline();
}

function dispPolyline(){
  var points1 = [
    new GLatLng(35.687418,139.707642),
    new GLatLng(34.020795,-118.234863)
  ];

  var points2 = [
    new GLatLng(35.687418,139.707642),
    new GLatLng(38.83115,-77.036133)
  ];

  var points3 = [
    new GLatLng(35.687418,139.707642),
    new GLatLng(53.45862,-2.219238)
  ];

  var points4 = [
    new GLatLng(35.687418,139.707642),
    new GLatLng(28.516969,77.211914)
  ];

  var points5 = [
    new GLatLng(35.687418,139.707642),
    new GLatLng(55.751656,37.621307)
  ];

  var opts = {geodesic:flag};

  var line1 = new GPolyline(points1, "#ff0000", 3, 0.6, opts);
  var line2 = new GPolyline(points2, "#0000ff", 3, 0.6, opts);
  var line3 = new GPolyline(points3, "#00ff00", 3, 0.6, opts);
  var line4 = new GPolyline(points4, "#ff00ff", 3, 0.6, opts);
  var line5 = new GPolyline(points5, "#00ffff", 3, 0.6, opts);

  map.addOverlay(line1);
  map.addOverlay(line2);
  map.addOverlay(line3);
  map.addOverlay(line4);
  map.addOverlay(line5);
}

map3_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/code3_1.js" type="text/javascript"></script>
  </head>
  <body onload="initialize()" onunload="GUnload()">
    <div id="map_canvas" style="width: 400px; height: 400px"></div>
    <form>
    <p>
    <input type="button" id="chgbtn" value="変更" onclick="change()" />
    </p>
    </form>
  </body>
</html>

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

p3-1

地図下にある「変更」ボタンを押すと大地表面に沿った最短距離でポリラインが描かれます。

p3-2

( Written by Tatsuo Ikura )

Profile

著者 / TATSUO IKURA

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