Encoded Polyline Algorithm

Gmap3へ

ラインデータのコーディング

　ポリラインなどのデータは座標データが大きくなるので「エンコード」して、利用するのが便利です。　参考
　先ずは、具体例を見てみます。↓　別窓表示　 staticmapの場合

【HTML タグの説明】　　参考

Google Maps API のジオメトリライブラリーを利用します
利用するにはブートストラップリクエストで次のように libraries パラメータを指定します
<script src="https://maps.googleapis.com/maps/api/js?key=【API キー】&callback=initMap&libraries=geometry" async defer></script>
表示するポリラインデータをデコードし、
var encodetxt = "a|tvEsuurYfFyFdA_AdAaAX_@fFqG\\m@d@kAXcAXy@n@uA~@kAp@m@t@c@xAe@d@WbA{@\\g@Ta@z@wCbA{Bb@k@tGyD`@_@Vg@~@qCd@w@~@sA|@_Bl@q@ZQl@Mp@FbA^j@\\|@hATZhCnBfFzDH@jAgCr@}ATCnInEbEvBvE~B`@h@h@`@hAj@j@\\EnCp@BEj@ELc@@"; <br> var paths = google.maps.geometry.encoding.decodePath(encodetxt);
ポリラインの設定をします
var polyline = new google.maps.Polyline({ path:paths, // 座標データにセット strokeColor: "#dd0000", strokeOpacity: 1.0, strokeWeight: 2 }); polyline.setMap(mapobj); // 地図に書き込む

　次に、座標データの「エンコード」について見てみます。

兎に角コーディングしたいなら Google Maps API の Interactive Polyline Encoder Utility 等が利用できます。　参考
コーディングのアルゴリズムはこちらに記述がありますが、以下のようになります　　参考
1．符合付きの(緯度又は経度)値を取得します
2．その 10 進数に 1e5 を乗算して、値を丸めます
3．この 10 進数を 2 進数(32ビット)で考えます
4．その 2 進数を 1 ビットを左にシフトします
5．元の 10 進数が負の場合は、このエンコーディング値を反転します
6．その 2 進数を下から 5 ビット毎の集合に分割します
7．その 5 ビット毎の集合を逆順に並べ替え、
8．各集合に 0x20 の論理和演算を行います(下 30ビット分を利用)
9．各値を 10 進数に戻し、
10．その各値に 63 を加算し、
11．それを対応する ASCII コードに変換します
　　例として -179.9832104 は `~oia@ に変換されます
12．入力値が続く場合は、後続(の各緯度,経度)値は差分値を使います
　　例えば　(38.5, -120.2), (40.7, -120.95), (43.252, -126.453)　には
　　　　　　　 (38.5,-120.2), ( 2.2, -0.75), ( 2.252, -5.503)　　　　　が対応し
　　　　　　　 _p~iF　~ps|U　_ulL　nnqC　_mqN　vxq`@ 　　　　　に変換されて、
　　結果　　 _p~iF~ps|U_ulLnnqC_mqNvxq`@ 　　　　　　　　　　になります
13．なお、出力内のバックラッシュ(\)はエスケープ記号となるので(\\)にします

注. 地球の周長は約４万kmなので、緯度(,経度)の小数点以下 5桁目が 1m程度の分解能になります
具体的なプログラムリストは、例えば以下のようになります。参考 function encode(points) { var polypoint = ''; var encodeNumber = function(num){ // 文字列変換 var encodeString = ''; while( num >= 0x20 ){ // ２進数５桁毎の処理 encodeString +=(String.fromCharCode((0x20 | (num & 0x1f))+63)); num >>= 5; } encodeString += (String.fromCharCode(num + 63)); // コードシフト return encodeString; }; var encodeSignedNumber = function(num){ var sgn_num = num << 1; // １桁左シフト if( num < 0 ){ sgn_num = ~(sgn_num); // 負符号処理 } return(encodeNumber(sgn_num)); }; var plat = 0; var plon = 0; // 初期値設定 for( i=0; i<points.length; i++ ){ var lat = parseFloat(points[i][0]); var lon = parseFloat(points[i][1]); latlng = new google.maps.LatLng(lat,lon); bounds.extend(latlng); // 地図表示域調整 var late5 = Math.floor(lat * 1e5); // 有効桁数丸め var lone5 = Math.floor(lon * 1e5); // 有効桁数丸め dlat = late5 - plat; // 差分値算出 dlon = lone5 - plon; // 差分値算出 plat = late5; // 前位置保存 plon = lone5; // 前位置保存 polypoint +=encodeSignedNumber(dlat) + encodeSignedNumber(dlon); } outtext= polypoint.replace(/\\/g,"\\\\"); // エスケープ符号対策 mapobj.fitBounds(bounds); // 地図の中心とズームを調整 };
これを使った具体的なページは、例えば以下のようになります。　別窓表示
この部分は iframe 対応のブラウザで見てください。

　map top　　Gmap3　　page top
　