OpenLayers2で世界を一周する線を描画してみる

引続き、溝畑です。

この記事は前回OpenLayers2で地図に線を描画してみるの続きです。
↑読んでからの方が良いかもしれないです！

前回、世界一周する線を引くと、点は思い通りに表示されているのに、線は上手く引けませんでした。
今回はここを解決していきます。

とはいえ、完璧な解決ではないのですが...。
ひとつの考え方ぐらいで捉えてもらえるとありがたいです。

前回の失敗

180度の線が超えられないサンプル

前回の最後に使ったデータはこちら。

var plot_data = [
  { EW: 'E', NS: 'S', Longitude: 135.17830, Latitude: 34.67822 }, // 神戸
  { EW: 'E', NS: 'S', Longitude: 139.6582,  Latitude: 35.6751  },
  { EW: 'E', NS: 'S', Longitude: 155.6542,  Latitude: 50.2893  },
  { EW: 'E', NS: 'S', Longitude: 166.6424,  Latitude: 54.2893  },
  { EW: 'E', NS: 'S', Longitude: 176.5433,  Latitude: 58.2334  },
  { EW: 'W', NS: 'S', Longitude: -178.5433, Latitude: 58.2334  },
  { EW: 'W', NS: 'S', Longitude: -119.8090, Latitude: 58.28    },
  { EW: 'W', NS: 'S', Longitude: -77.534,   Latitude: 36.4344  },
  { EW: 'W', NS: 'S', Longitude: -40.0834,  Latitude: 46.823   },
  { EW: 'W', NS: 'S', Longitude: -4.0843,   Latitude: 51.943   },
  { EW: 'E', NS: 'S', Longitude: 17.0234,   Latitude: 64.2444  },
  { EW: 'E', NS: 'S', Longitude: 84.0234,   Latitude: 61.7243  },
  { EW: 'E', NS: 'S', Longitude: 104.3443,  Latitude: 44.3434  },
  { EW: 'E', NS: 'S', Longitude: 121.9923,  Latitude: 14.0943  },
  { EW: 'E', NS: 'S', Longitude: 135.17830, Latitude: 34.67822 } // 神戸に
];

var plot_data = [

{ EW: 'E', NS: 'S', Longitude: 135.17830, Latitude: 34.67822 }, // 神戸

{ EW: 'E', NS: 'S', Longitude: 139.6582, Latitude: 35.6751 },

{ EW: 'E', NS: 'S', Longitude: 155.6542, Latitude: 50.2893 },

{ EW: 'E', NS: 'S', Longitude: 166.6424, Latitude: 54.2893 },

{ EW: 'E', NS: 'S', Longitude: 176.5433, Latitude: 58.2334 },

{ EW: 'W', NS: 'S', Longitude: -178.5433, Latitude: 58.2334 },

{ EW: 'W', NS: 'S', Longitude: -119.8090, Latitude: 58.28 },

{ EW: 'W', NS: 'S', Longitude: -77.534, Latitude: 36.4344 },

{ EW: 'W', NS: 'S', Longitude: -40.0834, Latitude: 46.823 },

{ EW: 'W', NS: 'S', Longitude: -4.0843, Latitude: 51.943 },

{ EW: 'E', NS: 'S', Longitude: 17.0234, Latitude: 64.2444 },

{ EW: 'E', NS: 'S', Longitude: 84.0234, Latitude: 61.7243 },

{ EW: 'E', NS: 'S', Longitude: 104.3443, Latitude: 44.3434 },

{ EW: 'E', NS: 'S', Longitude: 121.9923, Latitude: 14.0943 },

{ EW: 'E', NS: 'S', Longitude: 135.17830, Latitude: 34.67822 } // 神戸に

];

神戸から適当に太平洋を渡って、アメリカ大陸へ...また海を渡り一周してくるようなものでした。
変わった点といえば、東経・西経、北緯・南緯の情報を追加しています。

180度から先に線を引く(失敗列)

まず、この地図での表現は東経は0〜180度、西経は-180度まで。北緯は0〜90度、南緯は-90度まで。
一周する可能性があるのは経度の方ですね。

前回の失敗した線を見ると、どうも180度を超えられずに線は戻っちゃっている様子。
超えられないなら超えさせれば良い。
ということで、超えるように西経なら+360度して180度+で表すようにしてみます。

var Map = {
  // ...
  plot: function () {
    //...
    $.each(plot_data, function (key, val) {
      if (val.EW === 'W') val.Longitude += 360; // 西経なら+360度して180度+にする
      // ...
    }.bind(this));
  }
};

var Map = {

// ...

plot: function () {

//...

$.each(plot_data, function (key, val) {

if (val.EW === 'W') val.Longitude += 360; // 西経なら+360度して180度+にする

// ...

}.bind(this));

}

};

さて、どうなったでしょうか。
180度は超えるサンプル

超えられなかった180度は超えられました！
問題解決...ではないですね。

今度は0度付近で同じことが起きています。
なので、この方法では解決できないことが分かります。

なぜ線が戻るのか

前回の失敗した箇所と、今回の失敗した箇所をよく見てみると、線自体は繋がっているんです。

-180〜0〜180度の地図が2枚繋がっていると考えます。
仮に左を地図A、右を地図Bとします。

前回の失敗は、地図Aから見た-178度に向かって線が引かれていたから。
今回は、地図Aから見た180度+に向かって線を引いたから180度を超えられました。
0度で返ってきているのは、360度を超えたからと考えれば良いと思います。

地図に主導権があるというような、そんな雰囲気で捉えておけば良いと思います。
地図を動かすと180度付近で、ロードされるような挙動になります。そこで切り替わっています。

繋がらないなら切ればいい

失敗から分かったことを元に解決方法を考えます。
繋げられないのなら、線を切ってみましょう。
見た目が繋がっていれば、途切れていようとあまり関係ですよね。

こうなれば、問題なく描ける気がします。

もうひとつ、0度と180度の間に絶対点があるとは限らないです。
こっちは、ないなら点を作れば良いという発想で進めてみます。

1次関数を使う

まさか、中学の数学を使うときがくるとは...!
東経→西経 or 西経→東経となる部分で、2点を通る直線の式を求めてあげると、
180度、0度との交点から点を作ることができそうです。

赤の点を求めます。

懐かしのあの式の登場です。
y = ax + b

xは0か180で固定です。
まずはaを求めます。aは傾きなので...傾き = yの増加量 / xの増加量でした。
あとは切片を求めれば良いです。

もうひとつ、東経→西経、西経→東経が全部で4パターンあるので、実際は考慮する必要がありますが、今回使っているデータは東経→西経は180度、西経→東経は0度と決まっているので省きます。

function calcIntersection(x1, y1, x2, y2, ew) {
  var x, y, a, b;
  
  // 東経→西経
  if (ew === 'W') {
    // 今回は180度でのみ。実際は0度か180度かの判定で切り替えが必要
    x = 180;
    a = (y2 - y1) / (x2 - x1);
    b = y1 - a * x1;
    y = a * x + b;
  // 西経→東経
  } else {
    // ...
  }
  return y;
}

function calcIntersection(x1, y1, x2, y2, ew) {

var x, y, a, b;

// 東経→西経

if (ew === 'W') {

// 今回は180度でのみ。実際は0度か180度かの判定で切り替えが必要

x = 180;

a = (y2 - y1) / (x2 - x1);

b = y1 - a * x1;

y = a * x + b;

// 西経→東経

} else {

// ...

}

return y;

}

次に、今まで線のデータを作成していたところに、東経→西経 or 西経→東経と変わるかの判定を加えて、変わっているなら、間に点を加えます。

$.each(plot_data, function (key, val) {
  // ...
  var lines = [];
  var next = null; // 次のポイントのデータ
  if (key < plot_data.length - 1) {
    next = plot_data[key + 1];
  }
　　
  if (next !== null) {
    var y = calcIntersection(val.Longitude, val.Latitude, next.Longitude, next.Latitude, val.EW);
    
    // 東経→西経
    if (val.EW === 'E' && next.EW === 'W') {
      line_data.push(/* 180度と求めたy座標でポイント生成 */);
      // 点ができたのでここで一旦線をつくる
      lines.push(/* line_dataを線にする */);
      line_data = [];
      // 次は-180度から始める
      line_data.push(/* -180度と求めたy座標でポイント生成 */);

    // 西経→東経
    } else if (val.EW === 'W' && next.EW === 'E') {
      // ...
    }
  }
});

$.each(plot_data, function (key, val) {

// ...

var lines = [];

var next = null; // 次のポイントのデータ

if (key < plot_data.length - 1) {

next = plot_data[key + 1];

}

if (next !== null) {

var y = calcIntersection(val.Longitude, val.Latitude, next.Longitude, next.Latitude, val.EW);

// 東経→西経

if (val.EW === 'E' && next.EW === 'W') {

line_data.push(/* 180度と求めたy座標でポイント生成 */);

// 点ができたのでここで一旦線をつくる

lines.push(/* line_dataを線にする */);

line_data = [];

// 次は-180度から始める

line_data.push(/* -180度と求めたy座標でポイント生成 */);

// 西経→東経

} else if (val.EW === 'W' && next.EW === 'E') {

// ...

}

});

線を途切れさせたサンプル


一番地図を縮小したときには、途切れた部分が見えてしまうのですが、拡大しつつ地図をスクロールさせると、上手く繋がっているように見えるようになりました。
見た目は良いのですが、例えば、「線にマウスを当てたときに太さを変えたい」などという場合には、線が複数になっているので、少し苦労します。

考え方を変えることで、解決策が見えてきたりするので、OpenLayers2で上記の悩みがある場合は、参考程度にしていただければと思います。
もっと簡単な方法があるよ！という場合は、是非教えていただければ幸いです。。。

地図が続いたので、次回はHighcharts(Highstock)を使ったグラフ描画あたりを書こうかと思います。

キー・ポイントでは、ブラウザの地図で、
世界一周の軌跡を残したいエンジニアを募集しています。
・2017新卒の方はリクナビ2017へ(タイムリーに書類選考受付中！)
・中途の方はコチラへ

価値ある技術の提供