ルートを計算します

ルートの計画とナビゲーションは、位置情報サービスで最も一般的に使用されているアプリケーションです。 Maps API を使用すると、独自の計算基準に一致する最適なルートを計算し、最新のマップ データに基づいてリアルタイムの交通情報を考慮できます。

API では、通りや高速道路をグローバルにカバー しているため、最速最短トール通りを避けたりフェリーを避けたりなど、カスタマイズ可能なモードを反映したルートを作成できます。 時間帯に応じて、ルートの最適化として履歴速度パターンを利用することもできます。

mapsjs-service.jsMaps API は、サービスモジュール()を介して HERE Routing API に直接アクセスし、ルートシェイプを含むルート情報を取得します。 HERE Routing API によって返されたルート情報は、アプリケーションの要件に合わせてさまざまな方法で使用できますが、次の例では基本的なシナリオに合わせています。

地図にルートを表示しています

次に、フランクフルトからベルリンまでのルートを取得し、結果を地図に表示する例を示します。

コードが実行されると、次の操作が実行されます。

  1. Platform 認証および許可資格情報を提供するオブジェクトを取得します。
  2. マップの種類、ズーム、および中央の位置を指定して、マップをインスタンス化します。
  3. バックエンドサービスがルートを計算するときに使用する一連のルーティングパラメータを定義します。パラメータは、最速ルート、始点と終点を地理座標として示し、リプレゼンテーションモードを「表示」します。
  4. ルーティングリクエストが成功した場合に呼び出されるコールバック関数を定義 LineString します。この関数は、ルートオブジェクトをパラメータとして受け取り、ルートの頂点を取得してオブジェクトに変換し、ルートを表すポリラインを作成します。 ルートの始点と終点を示すマーカーを作成し、ポリラインとマーカーをマップに追加して、最終的にルート全体が表示されるようにマップ ビューの境界を調整します。
  5. ルーティングサービス v8 をインスタンス化します。
  6. calculateRoute() ルーティングサービスのメソッドを呼び出し、そのメソッドにパラメータオブジェクトとコールバック関数を渡します。
// Instantiate a map and platform object:
var platform = new H.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 = new H.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:
var onResult = function(result) {
  // ensure that at least one route was found
  if (result.routes.length) {
    result.routes[0].sections.forEach((section) => {
         // Create a linestring to use as a point source for the route line
        let linestring = H.geo.LineString.fromFlexiblePolyline(section.polyline);

        // Create a polyline to display the route:
        let routeLine = new H.map.Polyline(linestring, {
          style: { strokeColor: 'blue', lineWidth: 3 }
        });

        // Create a marker for the start point:
        let startMarker = new H.map.Marker(section.departure.place.location);

        // Create a marker for the end point:
        let endMarker = new H.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. ルート計算後の地図

For additional information regarding the features and use of the Routing API v8, see the online documentation on here-tech.skawa.fun.

ルート方向の矢印を表示します

API では、ルートポリラインの矢印をレンダリングして進行方向を指示できます。 次のコードは onResult 、ポリラインのダッシュを記述するスタイルを提供することで、前の例のコールバックを拡張します。

//Within the onResult callback:

// Create an outline for the route polyline:
var routeOutline = new H.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 = new H.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 pattern
var routeLine = new H.map.Group();
routeLine.addObjects([routeOutline, routeArrows]);

次の図は、ルートが地図にどのように表示されるかを示しています。

矢印の付いたルートラインを追加した後のマップ
図 2. 矢印の付いたルートラインを追加した後のマップ

等値線 (Isoline) ルーティング

次の例は、ベルリン中心部から車で 15 分以内の地点を表す 等値線 (Isoline) の計算方法を示しています ( 実際には、 等値線 (Isoline) にはエリアが記述されています。このエリアの目的地へは、ベルリンの中心部から車で 15 分以内で行くことができます)。 この例では RoutingService 、クラスを使用して 等値線 (Isoline) を取得します。

コードを実行すると、次の操作が実行されます。

  1. ドイツのベルリン周辺のエリアを示すマップインスタンスを作成します。
  2. routingParams 車の最速ルートを計算するように指定するオブジェクトを定義し、開始ポイントと時間を設定します。
  3. ルーティングリクエストの結果が利用可能になったときに呼び出されるコールバックを定義します。コールバック関数は、計算された 等値線 (Isoline) のポイントを使用してポリゴンを作成し、 等値線 (Isoline) ポリゴンの中心にあるポリゴンとマーカーをマップに追加します。 等値線 (Isoline) 全体が表示されるようにマップ ビューポートを設定します。
  4. ルーティングサービス v8 をインスタンス化します。
  5. 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.
var onResult = function(result) {
  var isolines = result.isolines[0],
    objects = [
      new H.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(new H.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) が次のマップイメージに表示されます。

等値線 (Isoline) ポリゴンを追加した後のマップ
図 3. 等値線 (Isoline) ポリゴンを追加した後のマップ

For additional information regarding the features and use of the Routing API v8, see the online documentation on here-tech.skawa.fun.

」に一致する結果は 件です

    」に一致する結果はありません