第5回 地図アプリを作ってみよう！ ( 完結編 )
いよいよCORDOVAアプリ開発も最終回となりました。これまでの記事で紹介した地図アプリに必要な機能を使用し、アプリを完成させていきたいと思います。
きつい道を選ぶアルゴリズムの実装
前回の記事で紹介した「標高を基準に通過点を抽出するアルゴリズム」の処理の流れを、実際の地図画面と共に紹介していきます。
周辺の標高を取得する
まず、周辺の標高を取得します。
ユーザーが指定したスタート地点とゴール地点の周辺で等間隔にポイントを設定し、標高を取得します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
// 周辺のポイントを設定する for(var x = 0; x <= SIZE_OF_AXIS; x++) { for(var y = 0; y <= (SIZE_OF_AXIS-x); y++) { pathpoints[index++] = new google.maps.LatLng((centerlat+latdir*latdiffdiv*x), (centerlng+lngdir*lngdiffdiv*y)); pathpoints[index++] = new google.maps.LatLng((centerlat+latdir*latdiffdiv*x), (centerlng-lngdir*lngdiffdiv*y)); pathpoints[index++] = new google.maps.LatLng((centerlat-latdir*latdiffdiv*x), (centerlng+lngdir*lngdiffdiv*y)); pathpoints[index++] = new google.maps.LatLng((centerlat-latdir*latdiffdiv*x), (centerlng-lngdir*lngdiffdiv*y)); } } // 設定したポイントの標高を求める for(var x = 0; x < index; x++) { new google.maps.ElevationService().getElevationForLocations({ locations: [pathpoints[x]] } } |
標高の高い地点、低い地点を抽出する
次に、周辺のポイントの中から標高の高い地点、低い地点を抽出します。
先ほど取得した周辺のポイントの標高を比較しながら高い順、低い順に並べ替え、それぞれ上位5箇所ずつのポイントを採用します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 |
// 標高の高い順に並べ替える for (var i in results) { if (results[i].elevation) { var elevation = results[i].elevation; if(elevation < ERROR_ELEV) { continue; } j = (MAX_WAY_POINTS-1); if(higherelev[j] <= elevation) { while( (j > 0) && (higherelev[j] <= elevation)) { j--; } if(higherelev[j] > elevation) { j++; } if((higherpoint[j].lat()!=pathpoints[x].lat()) && (higherpoint[j].lng()!=pathpoints[x].lng())) { for(var k = (MAX_WAY_POINTS-1); k >= j; k--) { higherelev[k+1] = higherelev[k]; higherpoint[k+1] = pathpoints[k]; } higherelev[j] = elevation; higherpoint[j] = pathpoints[x]; } } } } |
ルートを決定する
最後に、抽出したポイントを通るルートを決定します。
ユーザーに「高い」「低い」を選択してもらい、「高い」が選択された場合は標高の高い4地点を通過点に設定し、「低い」が選択された場合は標高の低い4地点を通過点に設定してルートを決定します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
// 標高の高い地点を通過点に設定 var wayPoints = [{ location: new google.maps.LatLng(higherpoint[0].lat(), higherpoint[0].lng()), stopover:false }, { location: new google.maps.LatLng(higherpoint[1].lat(), higherpoint[1].lng()), stopover:false }, { location: new google.maps.LatLng(higherpoint[2].lat(), higherpoint[2].lng()), stopover:false }, { location: new google.maps.LatLng(higherpoint[3].lat(), higherpoint[3].lng()), stopover:false }]; // 経路検索条件に通過点を設定 var request = { origin: startlat+','+startlng, destination: end, travelMode: google.maps.DirectionsTravelMode.WALKING, // トラベルモード指定 unitSystem: google.maps.DirectionsUnitSystem.METRIC, // 単位km表示 waypoints: wayPoints, // 標高の高い地点を通過点に設定 provideRouteAlternatives: false, // 複数ルートを表示する/しない optimizeWaypoints: true, // 通過点に対して最適化された最短距離にする/しない avoidHighways: false, // 高速道路を使用する/しない avoidTolls: false // 有料道路を使用する/しない }; |
このようにして、単純な最短距離ではなく、あえて「きつい」ルートを標高をもとに選択することができました。
完成した地図アプリ
これまでの記事で紹介した機能を組み合わせ、完成したアプリがこちらになります。スタート地点とゴール地点を入力し、標高の「高い」ルートを指定して検索すると……
最短のルートではなく、標高の高い地点を通るルートが表示されました。
最後に……
5回にわたって紹介したCORDOVAアプリの作成も今回で終わりとなります。いかがでしたか？
AndroidとiPhoneのアプリを一度に作成できる点や、Monacaでの便利なデバッグなど、CORDOVAを使用することでアプリ作成がもっと気軽に出来そうですね。皆さんもぜひ挑戦してみてください！
wz3mg3