ガイドv3.2 API Referencev3.1 API Reference
ガイド
  1. 開発者ガイド
  2. 地図をカスタマイズする

KMLで地図コンテンツを強化する

 HERE Maps API for JavaScript version 3.2

開発者はマップオーバーレイを作成する際、プラットフォーム間でコンテンツをシームレスに転送しやすくするため、標準仕様に依存することがよくあります。広く採用されている標準の1つは、XML形式でデータをカプセル化するKMLです。

KML仕様には、プレースマーク、画像、ポリゴンなどのさまざまなオブジェクトが含まれており、その多くはHERE Maps API for JavaScriptに対応するオブジェクトを持ちます。KMLオブジェクトをマップオブジェクトに効率的に変換するために、APIはデータモジュール (mapsjs-data.js) を提供します。

データモジュールのReaderクラスは、ファイルからKMLをロードし、それを解析します。さらにこのクラスには、解析された KML データを使用してマップ レイヤーを作成するユーティリティ メソッドがあります。レイヤーはマップに直接追加できます。すべてのマップオブジェクトは通常のマップイベントを受け取り、名前や説明などの追加データを含めることができます (そのようなデータがKMLファイルで使用可能な場合)。

サポートされるKML要素

以下のKML要素は、対応するMaps API for JavaScript要素と同様の機能や能力を提供し、ユーザーがHEREマップ上でKMLデータを視覚化し操作できるようにします。

📘

注

HERE Maps API for Javascriptは、KML標準のバージョン2.1と2.2に準拠したKMLファイルとデータセットのインポートをサポートします。KMLデータ構造内のサポートされていないフィーチャーは無視されます。

Point

KMLのPoint要素は、マップにある特定の点の位置に対応し、Maps API for JavaScriptでH.map.Markerクラスオブジェクトとして表されます。

LineString

KMLのLineString要素は、接続された線分のシーケンスに対応し、Maps API for JavaScriptでH.map.Polylineクラスオブジェクトとして表されます。

LinearString

KMLのLinearRing要素は、閉じた線を表し、通常はポリゴンの境界を定義するために使用されます。Maps API for JavaScriptで、LinearRingがPlacemarkの子として定義されている場合、H.map.Polylineクラスを使用して表すことができます。

Polygon

KMLのPolygon要素は、1つ以上のリングで構成される閉じた形状を表します。Maps API for JavaScriptではH.map.Polygonクラスによって表されます。これにより、outerBoundaryIsとinnerBoundaryIsの要素をそれぞれ使用して、外側の境界と任意の内側の境界 (穴) を指定し、ポリゴンを描画できます。

MultiGeometry

KMLのMultiGeometry要素は、点、線、ポリゴンなどのジオメトリーのコレクションを表します。Maps API for JavaScriptではH.map.Groupクラスを使用して表すことができます。これにより、複数のマップオブジェクトをまとめてグループ化できます。

Folder

KMLのFolder要素は、複数のPlacemarkまたはその他のFolder要素を保持するコンテナを表します。Maps API for JavaScriptでは、FolderはH.map.Groupクラスを使用して表されます。これにより、複数のマップオブジェクトをまとめてグループ化できます。

Placemark

Placemark 要素は、マップの特定の点またはフィーチャーを表します。場所に関連付けられたさまざまなプロパティとデータを含めることができ、オブジェクトのdataプロパティにkmlNodeとして保存されます。Maps API for JavaScriptは次のプレースマークのプロパティをサポートしています。

  • description - プレースマークに関連付けられた説明または情報を保存します。プレースマークをクリックまたは選択すると、バルーンまたはツールチップとして表示できます。
  • visibility - マップのプレースマークの可視性を決定します。値は true または false のいずれかに設定できます。

Style

Style要素は、アイコン、線、ポリゴンなどのKMLフィーチャーの外観を定義します。

Maps API for JavaScriptは次のスタイルサブオブジェクトをサポートします。

  • IconStyle - プレースマークで使用されるアイコンのスタイルを定義します。サポートされているプロパティには以下があります。
    • scale - アイコンのスケール係数を指定します。元のアイコンサイズに適用される乗数です。
    • icon - アイコン画像への URL またはパスを指定します。
    • hotSpot - ホットスポット座標に対応するアイコン内の位置を指定します。
  • LineStyle - 線またはパスのスタイルを定義します。サポートされているプロパティには以下があります。
    • width - 線の幅をピクセル単位で指定します。
    • color - 16 進数または RGB 値を使用して線の色を指定します。
    • colorMode - 色をアルファ値として解釈するか、RGB 色として解釈するかを指定します。
  • PolyStyle - ポリゴンのスタイルを定義します。サポートされているプロパティには以下があります。
    • fill - ポリゴンを色で塗りつぶすかどうかを指定します。
    • outline - ポリゴンのアウトラインを表示するかどうかを指定します。
    • color - 16 進数または RGB 値を使用して、ポリゴンの塗りつぶし色を指定します。
    • colorMode - 色をアルファ値として解釈するか、RGB 色として解釈するかを指定します。
  • BalloonStyle - プレースマークに関連付けられたバルーンのスタイルを定義し、オブジェクトの data プロパティに balloonStyle として保存されます。サポートされているプロパティには以下があります。
    • bgColor - バルーンの背景色を指定します。
    • textColor - バルーンのテキスト色を指定します。
    • text - バルーンのテキスト内容を指定します。

StyleMap

StyleMap要素は、スタイルのセットを定義してそれらを特定の条件に関連付ける方法を提供します。Maps API for JavaScriptは次のStyleMapサブオブジェクトをサポートします。

  • Pair - キー値の要素のペアを定義します。次のプロパティがあります。
    • key - 適切なスタイルの選択に使用する条件またはモードを指定します。
    • styleUrl - キーに関連付けられたスタイルへのURLまたは参照を指定します。

例：HERE MapsでKMLオブジェクトをレンダリングする

次のコードスニペットは、KMLファイルを解析し、それをレイヤーとしてマップに追加し、KMLオブジェクトに関連付けられたイベントを処理する方法を示しています。

次のコードサンプルについては、以下の点を考慮してください。

KMLコンテンツをマップに追加するには、次の手順を実行します。

  1. 次の例に示すように、HTMLファイルの<head>要素にmapsjs-data.jsライブラリをインポートします。

    <script type="text/javascript" src="https://js.api.here.com/v3/3.2/mapsjs-data.js"></script>

  2. KMLファイルを解析し、そのコンテンツをベクターマップ上のレイヤーとして表示します。

    // Create reader object initializing it with a document:
const reader = new H.data.kml.Reader("path/to/kml/file.kml");

// Parse the document:
reader.parse();

// Get KML layer from the reader object and add it to the map:
const layer = reader.getLayer();
map.addLayer(layer);

// KML objects receive regular map events, so add an event listener to the
// KML layer:
layer.getProvider().addEventListener("tap", function (ev) {
  // Log map object data to console. The data contains name, description (if present in
  // KML) and the KML node itself.
  console.log(ev.target.getData());
});

    結果：次の図は、マップ上にレンダリングされた前の例のKMLデータと、TAPイベントに応じてオブジェクトデータを表示するコンソールを示しています。 衛星マップにレンダリングされたKMLデータ

  3. 任意：マップをKMLレイヤーに自動的にフォーカスさせるには、次の例のように、マップがレイヤーを完全に読み込んだ後で拡大に必要なバウンディングボックスを計算するイベントリスナーを追加します。

    reader.addEventListener("statechange", function(evt) {
if (evt.state === H.data.AbstractReader.State.READY) {
  // Get KML layer from the reader object and add it to the map
  const layer = reader.getLayer();
  map.addLayer(layer);
  map.getViewModel().setLookAtData({bounds: layer.getProvider().getRootGroup().getBoundingBox()});
}

if (evt.state === H.data.AbstractReader.State.ERROR) {
  console.log(evt)
}
});

次のステップ

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

14 日前の更新