HERE Maps API for Javascript の使用

HERE Traffic ラスター タイル API には、 HERE Maps API for Javascript とともにサービスを使用できる透明なタイルが用意されています。 この組み合わせにより、ベース マップおよび / またはラベルとともにトラフィックフローをレンダリングできます。

HERE Maps API for Javascript の詳細については 、『 HERE Maps API for Javascript ユーザー ガイド』を参照してください。

トラフィックレイヤーを追加しています

map パラメータとしてを使用し、トラフィック層を追加する次の関数を呼び出すことができます。

function trafficLayer(map) {
  var tileProvider = new H.map.provider.ImageTileProvider({
    min: 8,
    max: 20,
    getURL: function (row, column, zoom) {
      return (
        "https://traffic.maps.hereapi.com/v3/flow/mc/" +
        zoom +
        "/" +
        row +
        "/" +
        column +
        "/png?apiKey=<apiKey>"
      );
    },
    tileSize: 256,
    opacity: 1,
  });

  var overlayLayer = new H.map.layer.TileLayer(tileProvider);
  map.addLayer(overlayLayer);
}

関数を呼び出す trafficLayer(map); と、交通情報がオーバーレイされます。

交通情報とラベルが記載されたベース マップ

HERE Maps API for Javascript を使用すると、ベース マップの上にラベルとともにトラフィックフローをレンダリングできます。

ベース マップを作成しています

ベース マップを作成するに は、ベクトルベースのベース マップ<layers>.vector.normal.mapまたはラスタベースのベース マップ<layers>.raster.normal.baseのいずれかにレイヤーを設定します。

たとえば、次のコードでは、ラスタベースのベース マップを設定します。

var map = new H.Map(
  document.getElementById("map"),
  defaultLayers.raster.normal.base,
  {
    center: new H.geo.Point(52.515, 13.405),
    zoom: 14,
    pixelRatio: 1,
    hiRes: true,
    engineType: H.map.render.RenderEngine.EngineType.P2D,
  }
);

トラフィックレイヤーとラベルレイヤーを追加しています

上記の例と同様のメソッドを使用して、次の関数を呼び出すことができます。

function labelLayer(map) {
  var tileProvider = new H.map.provider.ImageTileProvider({
    min: 8,
    max: 20,
    getURL: function (x, y, z) {
      return (
        "https://maps.hereapi.com/v3/label/mc/" +
        z +
        "/" +
        x +
        "/" +
        y +
        "/png?apiKey=<apiKey"
      );
    },
    tileSize: 256,
    opacity: 1,
  });
  tileProvider.getCache().setMaxSize(196608);
  var overlayLayer = new H.map.layer.TileLayer(tileProvider);

  map.addLayer(overlayLayer);
}

この関数は、次の順序で呼び出すことができます。

trafficLayer(map);
labelLayer(map);

これにより、次の結果が得られます。

交通状況に合わせたベース マップ

前 のセクションの例に従って、ベース マップを作成できます。

この関数を呼び出し trafficLayer(map); て、ベース マップの上にトラフィックフローを表示できます。 この結果、次のような結果になります。

ラベルの付いた交通状況

HERE Maps API for Javascript を使用して、ラベルとともにトラフィックフローをレンダリングできます。

透過ベースを作成しています

次の例のように、空のレイヤーを持つマップを作成することで、透明ベースを設定できます。

var emptyLayer = new H.map.layer.Layer();
var map = new H.Map(document.getElementById("map"), emptyLayer, {
  center: new H.geo.Point(52.515, 13.405),
  zoom: 14,
  pixelRatio: 1,
  hiRes: true,
  engineType: H.map.render.RenderEngine.EngineType.P2D,
});

次の関数を呼び出すことができます。

function labelLayer(map) {
  var tileProvider = new H.map.provider.ImageTileProvider({
    min: 8,
    max: 20,
    getURL: function (x, y, z) {
      return (
        "https://maps.hereapi.com/v3/label/mc/" +
        z +
        "/" +
        x +
        "/" +
        y +
        "/png?apiKey=<apiKey"
      );
    },
    tileSize: 256,
    opacity: 1,
  });
  tileProvider.getCache().setMaxSize(196608);
  var overlayLayer = new H.map.layer.TileLayer(tileProvider);

  map.addLayer(overlayLayer);
}

この関数は、次の順序で呼び出すことができます。

trafficLayer(map);
labelLayer(map);

これにより、次の結果が得られます。