ルートの計画とナビゲーションは、位置情報サービスで最も一般的に使用されているアプリケーションです。 Maps API を使用すると、独自の計算基準に一致する最適なルートを計算し、最新のマップ データに基づいてリアルタイムの交通情報を考慮できます。
API では、通りや高速道路をグローバルにカバー しているため、最速、最短、トール通りを避けたり、フェリーを避けたりなど、カスタマイズ可能なモードを反映したルートを作成できます。 時間帯に応じて、ルートの最適化として履歴速度パターンを利用することもできます。
mapsjs-service.jsMaps API は、サービスモジュール()を介して HERE Routing API に直接アクセスし、ルートシェイプを含むルート情報を取得します。 HERE Routing API によって返されたルート情報は、アプリケーションの要件に合わせてさまざまな方法で使用できますが、次の例では基本的なシナリオに合わせています。
// Instantiate a map and platform object:var platform =newH.service.Platform({'apikey':'{YOUR_API_KEY}'});// Retrieve the target element for the map:var targetElement = document.getElementById('mapContainer');// Get the default map types from the platform object:var defaultLayers = platform.createDefaultLayers();// Instantiate the map:var map =newH.Map(
document.getElementById('mapContainer'),
defaultLayers.vector.normal.map,{zoom:10,center:{lat:52.51,lng:13.4}});// Create the parameters for the routing request:var routingParameters ={'routingMode':'fast','transportMode':'car',// The start point of the route:'origin':'50.1120423728813,8.68340740740811',// The end point of the route:'destination':'52.5309916298853,13.3846220493377',// Include the route shape in the response'return':'polyline'};// Define a callback function to process the routing response:varonResult=function(result){// ensure that at least one route was foundif(result.routes.length){
result.routes[0].sections.forEach((section)=>{// Create a linestring to use as a point source for the route linelet linestring =H.geo.LineString.fromFlexiblePolyline(section.polyline);// Create a polyline to display the route:let routeLine =newH.map.Polyline(linestring,{style:{strokeColor:'blue',lineWidth:3}});// Create a marker for the start point:let startMarker =newH.map.Marker(section.departure.place.location);// Create a marker for the end point:let endMarker =newH.map.Marker(section.arrival.place.location);// Add the route polyline and the two markers to the map:
map.addObjects([routeLine, startMarker, endMarker]);// Set the map's viewport to make the whole route visible:
map.getViewModel().setLookAtData({bounds: routeLine.getBoundingBox()});});}};// Get an instance of the routing service version 8:var router = platform.getRoutingService(null,8);// Call calculateRoute() with the routing parameters,// the callback and an error callback function (called if a// communication error occurs):
router.calculateRoute(routingParameters, onResult,function(error){alert(error.message);});
routingParameters オブジェクトリテラルのメンバー要素は、 HERE Routing API で必要な URL パラメータに直接マップされます。 パラメータオブジェクトには、 Routing API によって認識された任意のパラメータを含めることができ、ルート計算要求を柔軟に定義できます。
以下の地図には、ルート計算の結果が表示されます。フランクフルト am Main からドイツのベルリンまでのルートの始点と終点がデフォルトのアイコンのマーカーで示され、ルート自体が緑色のポリラインで示されます。
図 1. ルート計算後の地図
Routing API V8 の機能および使用方法の詳細について は、 developer.here.com のオンラインマニュアルを参照してください。
ルート方向の矢印を表示します
API では、ルートポリラインの矢印をレンダリングして進行方向を指示できます。 次のコードは onResult 、ポリラインのダッシュを記述するスタイルを提供することで、前の例のコールバックを拡張します。
//Within the onResult callback:// Create an outline for the route polyline:var routeOutline =newH.map.Polyline(linestring,{style:{lineWidth:10,strokeColor:'rgba(0, 128, 255, 0.7)',lineTailCap:'arrow-tail',lineHeadCap:'arrow-head'}});// Create a patterned polyline:var routeArrows =newH.map.Polyline(linestring,{style:{lineWidth:10,fillColor:'white',strokeColor:'rgba(255, 255, 255, 1)',lineDash:[0,2],lineTailCap:'arrow-tail',lineHeadCap:'arrow-head'}});// create a group that represents the route line and contains// outline and the patternvar routeLine =newH.map.Group();
routeLine.addObjects([routeOutline, routeArrows]);
calculateIsoline() パラメータオブジェクト、成功およびエラーのコールバックを渡す Routing Service メソッドを呼び出します。
var routingParams ={'transportMode':'car','origin':'52.5,13.4','range[values]':'900','range[type]':'time','routingMode':'fast','optimizeFor':'quality'};// Define a callback function to process the isoline response.varonResult=function(result){var isolines = result.isolines[0],
objects =[newH.map.Marker(result.departure.place.location)];
isolines.polygons.forEach((section)=>{let linestring =H.geo.LineString.fromFlexiblePolyline(section.outer);// Create a polygon to display the area
objects.push(newH.map.Polygon(linestring));});// Add the polygon and marker to the map:
map.addObjects(objects);// Center and zoom the map so that the whole isoline polygon is// in the viewport:
map.getViewModel().setLookAtData({bounds: objects[1].getBoundingBox()});};// Get an instance of the routing service:var router = platform.getRoutingService(null,8);// Call the Routing API to calculate an isoline:
router.calculateIsoline(
routingParams,
onResult,function(error){alert(error.message);});
結果の 等値線 (Isoline) が次のマップイメージに表示されます。
図 3. 等値線 (Isoline) ポリゴンを追加した後のマップ
Routing API V8 の機能および使用方法の詳細について は、 developer.here.com のオンラインマニュアルを参照してください。