GPolygon.fromEncoded() を利用して Google Maps のポリゴン表示を軽量化する

  Google Maps では GPolygon を利用してポリゴン (多角形) を描画することができます。
  しかし、GPolygon を使ったポリゴン描画には重大な欠点がありました。
  それは、点の数を多くすると Opera や Safari では描画ができずに、ブラウザが固まってしまう場合があるというものです。

  それを解決する手段かどうかはわかりませんが、Google Maps API v2.78 から GPolygon.fromEncoded() というメソッドが追加されて、あらかじめポリゴンのデータをエンコードしたデータを指定することができるようになりました。

- Official Google Maps API Blog: v2.78: Go ahead, Scroll your mouse wheels & encode your polygons!
http://googlemapsapi.blogspot.com/2007/04/v278-go-ahead-scroll-your-mouse- ...

  そこで、サンプルを作って実際にテストしてみました。

  以下サンプルでは、500 個の点 (座標値) を用いています。
  また、サンプルで利用したデータは、An encoding utility for polyline and polygon data から拝借しています。

1. GPolygon.fromEncoded() を利用しない場合

  http://pocari.org/demo/gpolygon/gpolygon.html

  (こちらのサンプルは、Opera、Safari の場合、ブラウザが固まってしまう場合があるのでご注意ください)

  こちらは配列に入っている座標を GPoint に追加して、最後に GPolygon で描画しています。

// 座標の配列 (実際は 500 個) を用意して
var mapPoints = [
    [ -78.57945,  33.88215 ],
    [ -78.65546,  33.94883 ],
    [ -79.07426,  34.304726 ],
       :
    [ -78.65546,  33.94883 ],
    [ -78.57945,  33.88215 ]
];

// GPoint の配列を作成して
var points = [];
for (var i = 0, len = mapPoints.length; i < len; ++i) {
    points.push(new GPoint(mapPoints[i][0], mapPoints[i][1]));
}

// 描画する (map は GMap2 のオブジェクト)
map.addOverlay(new GPolygon(
    points,    // 座標値
    '#3366cc', // 線の色
    2,         // 線の太さ
    1.0,       // 不透明度
    '#e5ecf9', // 塗りつぶす色
    0.5        // 塗りつぶす色の不透明度
));

  前述のように Opera、Safari の場合、ブラウザが固まってしまう場合があります。

2. GPolygon.fromEncoded() を利用する場合

  http://pocari.org/demo/gpolygon/gpolygon-fromencoded.html

  こちらは、あらかじめエンコードした座標値を GPolygon.fromEncoded() で描画しています。

// エンコードされた座標値 (途中で省略)
var encodedPoints = 'mrxmEppr~Mw_LbzMi...';
// エンコードされたズームレベル値 (途中で省略)
var encodedLevels = 'PFFHHMGEHCMLEGLLJ...';

// 描画する (map は GMap2 のオブジェクト)
map.addOverlay(new GPolygon.fromEncoded({
    polylines: [{
        points:     encodedPoints, // エンコードされた座標値
        levels:     encodedLevels, // エンコードされたズームレベル値
        color:      '#3366cc',     // 線の色
        opacity:    1.0,           // 線の不透明度
        weight:     2,             // 線の太さ
        numLevels:  18,            // ズームレベルの分割数
        zoomFactor: 2              // ？
    }],
    fill:    true,      // 領域を塗りつぶすかどうか
    color:   '#e5ecf9', // 塗りつぶす色
    opacity: 0.5,       // 塗りつぶす色の不透明度
    outline: true       // 線を表示するかどうか
}));

  こちらを利用することで、Opera、Safari でもブラウザが固まることはなくなります。

  さて、肝心の座標値をエンコードする方法ですが、アルゴリズムが公開されています。

- Google Maps API Documentation - Encoded Polyline Algorithm
  http://www.google.com/apis/maps/documentation/polylinealgorithm.html

  さらには、エンコードユーティリティもあります。

- Google Maps API Documentation - Polyline Encoding Utility
  http://www.google.com/apis/maps/documentation/polylineutility.html

  しかし、このユーティリティは使いづらいので、以下のサイトがお勧めです。

- An encoding utility for polyline and polygon data
  http://facstaff.unca.edu/mcmcclur/GoogleMaps/EncodePolyline/encodeForm.htm ...

  とても便利な GPolygon.fromEncoded() ですが、zoomFactor といういまいちよくわからないパラメータが出てきます。
  とりあえず、適当に 2 とかしていますが、これが妥当かどうかはわかりません (期待通りに描画はされてはいます)。

  このあたりの参考になる 2 つのエントリを紹介しておきます (GPolygon ではなくて GPolyline ですが参考になります)。

- GPolyline.fromEncoded (hPod)
  http://hwat.sakura.ne.jp/hpod/200609/14-200000/

- Encoded Polyline (hPod)
  http://hwat.sakura.ne.jp/hpod/200610/17-200000/

  なにはともあれ、GPolygon.fromEncoded() で Opera や Safari でも問題なくポリゴンが描画できるようになりますので、同様の問題を抱えている方は試してみてはいかがでしょうか。