マップタイプについて理解する

HERE Maps API for Javascriptを使用する場合、統合されたマップレンダリングサービス (HERE Vector Tile APIおよびHERE Raster Tile API) を使用して、ベクター、ラスター、およびハイブリッドマップタイプを選択できます。これらのサービスを組み合わせることで、あらゆる種類のマッピングアプリケーションを構築するための包括的なマッピングおよび位置情報ベースのソリューションが提供され、ジオコーディング、ルート検索、リアルタイム交通情報など、追加の位置情報サービスも組み込まれます。各マップタイプにはそれぞれの長所がありますが、柔軟性、パフォーマンス、および視覚的な品質により、ベクターマップが最も有力な選択肢になりつつあります。

ベクターマップとラスターマップの主な違い

HERE Vector Tile APIによって提供されるベクターマップは、道路や建物などの空間的特徴がピクセルベースで表された画像ではなく、エンコードされたベクターデータによって定義されたマップデータを提供します。この方法には、スケーラビリティ、インタラクティブ性、3Dビューと回転ビュー、データ効率、簡単なカスタマイズ、追加データのオーバーレイ機能などの利点があります。

HERE Raster Tile APIは、地理的特徴の画像ベースの表現としての形式でマップデータを提供します。この方法では、特定のズームレベルで地形、道路、ランドマークなどの特徴を衛星画像の事前レンダリングされたグリッドとして表示し、さまざまな定義済みスタイルを提供します。

次の表に、ベクターマップタイプとラスターマップタイプの主な違いを示します。

📘

ラスタータイルを使用していて、リアルな画像とコンテキストマップデータの両方が必要な場合は、ハイブリッドレイヤーを使用します。リアリズムが必要なユースケース向けに衛星画像の上にベクターベースのラベルや道路を重ねることで、両方の利点が得られます。

次の図は、ベクターマップとハイブリッドマップを並べて比較したもので、ラスターマップは基盤となるベースレイヤーとして機能します。

ベクター	ハイブリッド

マップタイプを設定する

各マップタイプは、ベース衛星画像、トラフィック、トランジットオーバーレイなど、さまざまな視覚的コンポーネントやデータコンポーネントを表す1つ以上のレイヤーで構成されています。マップタイプは全体的なスタイルと形式 (ベクターやラスターなど) を定義しますが、レイヤーはマップコンテンツをカスタマイズするために追加または削除できるモジュール要素です。

createDefaultLayersメソッドを使用すると、マップタイプとそれに関連付けられたレイヤーの事前定義された組み合わせを使用して、各レイヤーを最初から手動で作成することなくマップをすばやく設定できます。

次の例は、HERE Maps API for JavascriptのcreateDefaultLayersメソッドを使用してベクターマップをレンダリングする方法を示しています。

const platform = new H.service.Platform({
  apikey: 'YOUR_API_KEY'
});

// Import the default map layers to set the map type
const defaultLayers = platform.createDefaultLayers();

const map = new H.Map(document.getElementById('mapContainer'),
  // Set the vector map type by using the "normal.map" vector layer
  defaultLayers.vector.normal.map, {
  center: { lat: 52.5200, lng: 13.4050 },
  zoom: 10,
  pixelRatio: window.devicePixelRatio || 1
});

たとえば、前述のベクターマップタイプとハイブリッドマップタイプの比較で示したハイブリッドマップを作成するには、次のスニペットに示すように、ラスターベースレイヤーを設定してから、addLayer()メソッドを使用してベクターデータをラスター画像データ上にオーバーレイします。

const platform = new H.service.Platform({
  apikey: 'YOUR_API_KEY'
});

const defaultLayers = platform.createDefaultLayers();

const map = new H.Map(document.getElementById('mapContainer'),
  // Set the raster base
  defaultLayers.hybrid.day.raster, {
  center: { lat: 52.5200, lng: 13.4050 },
  zoom: 10,
  pixelRatio: window.devicePixelRatio || 1
});

// Overlay a vector map on top of the raster base by using a compatibile hybrid layer:
map.addLayer(defaultLayers.hybrid.day.vector);

このメソッドを使用すると、トラフィックレイヤーやトラック固有のレイヤーなど、他のタイプのデータをマップに追加できます。手動で詳細な設定を行う必要はありません。

詳細については、「APIリファレンス」のcreateDefaultLayersのドキュメントを参照してください。