KML サポートを使用してコンテンツを作成します

開発者は、マップオーバーレイを作成する際に、プラットフォーム間でのコンテンツのシームレスな転送を容易にするために、多くの場合標準を利用しています。 広く採用されている標準の 1 つが KML で、 XML 形式でデータをカプセル化します。

KML 仕様には、目印、イメージ、ポリゴンなどのさまざまなオブジェクトが含まれています。その多くには、 Maps API for JavaScript で対応するオブジェクトが含まれています。 KML オブジェクトを効果的にマップオブジェクトに変換するためにmapsjs-data.js、 Maps API にはデータモジュール () が用意されています。

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

Maps API for JavaScript での KML サポート

これらの KML エレメントは、対応する Maps API for JavaScript エレメントと同様の機能を提供し、 HERE マップ上で KML データを表示および操作できます。

• ポイント
• LineString
• LinearString
• 多角形
• MultiGeometry
• フォルダ
• 目印です
• Style
• StyleMap

ポイント

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

LineString

LineString KML のエレメントは、接続されている一連の直線セグメントに対応し、 H.map.Polyline Maps API for JavaScript ではクラスオブジェクトとして表されます。

LinearString

LinearRing KML のエレメントは閉じた行の文字列を表し、通常は Polygon の境界を定義するために使用されます。 Maps API for JavaScript では、LinearRingが Placemark の子として定義されている場合、 H.map.Polyline クラスを使用して表すことができます。

ポリゴン

Polygon KML のエレメントは、 1 つ以上のリングで構成される閉じたシェイプを表します。 Maps API for JavaScript では、 H.map.Polygon クラスによって表されます。このクラスでは、 outerBoundaryIs エレメントおよびinnerBoundaryIsエレメントを使用して外部境界およびオプションの内部境界（穴）を指定することで、多角形を描画できます。

MultiGeometry

MultiGeometry KML 内のエレメントは、点、直線、多角形などの形状のコレクションを表します。 Maps API for JavaScript では、 H.map.Group クラスを使用して表現できます。このクラスを使用すると、複数のマップオブジェクトをグループ化できます。

フォルダ

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

目印です

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

• description - 目印に関連付けられている説明または情報を保存します。 目印をクリックまたは選択すると、バルーンまたはツールチップとして表示できます。
• visibility - 地図上の目印の表示範囲を指定します。 値は、 true またはのいずれかに設定でき falseます。

スタイル

この 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 - placemarks に関連付けられているバルーンのスタイルを定義し ます。このスタイルは、オブジェクトのdataプロパティでサポートされている次のballoonStyleプロパティとして保存されます。
  • bgColor - バルーンの背景色を指定します。
  • textColor - バルーンのテキストの色を指定します。
  • text - バルーンのテキストコンテンツを指定します。

StyleMap

StyleMap 要素を使用すると、スタイルのセットを定義して、特定の条件に関連付けることができます。 Maps API for JavaScript は、次の StyleMap サブオブジェクトをサポートしています。

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

例 : HERE Maps で KML オブジェクトをレンダリングします

Polygon ハンガリー国会議事堂エリアの設置面積を表す機能と Point 建物の位置を示す機能を含む以下のサンプル KML ファイルを検討してください。

<?xml version="1.0" encoding="UTF-8"?>
<kml xmlns="http://www.opengis.net/kml/2.2">
  <Document>
    <name>Hungarian Parliament Building</name>

    <!-- Define the shared StyleMap -->
    <Style id="sharedStyle">
      <LineStyle>
        <color>7F00FF00</color> <!-- Bright green color -->
        <width>3</width>
      </LineStyle>
      <PolyStyle>
        <color>7F00FF00</color>
      </PolyStyle>
      <IconStyle>
        <Icon>
          <href>graphics/pin.svg</href>
        </Icon>
      </IconStyle>
    </Style>

    <!-- Polygon for Hungarian Parliament Building -->
    <Placemark>
      <name>Hungarian Parliament Building Area</name>
      <styleUrl>#sharedStyle</styleUrl>
      <Polygon>
        <outerBoundaryIs>
          <LinearRing>
            <coordinates>
              19.046837787680175,47.50743582722211
              19.046228091743103,47.50748357749222
              19.046378306684005,47.508337106234876
              19.045194259500875,47.50839679303735
              19.044778959370717,47.50586601292753
              19.045909989514485,47.505806323261965
              19.046060204455387,47.506624065991105
              19.046722917431197,47.50657034605487
              19.046837787680175,47.50743582722211
            </coordinates>
          </LinearRing>
        </outerBoundaryIs>
      </Polygon>
    </Placemark>

    <!-- Point at the specified coordinates -->
    <Placemark>
      <name>Hungarian Parliament Building Marker</name>
      <description>Location of the Hungarian Parliament Building</description>
      <styleUrl>#sharedStyle</styleUrl>
      <Point>
        <coordinates>19.045494689157493,47.50702397988633</coordinates>
      </Point>
    </Placemark>

  </Document>
</kml>

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

// Create reader object initializing it with a document:
var 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:
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());
});

結果: 次の図は、 Maps API for JavaScript によって衛星マップにレンダリングされた、前の例の KML 日付を示しています。

さらに、コンソールには、 TAP イベントに応じてオブジェクトのデータが表示されます。

次のステップ

その他の使用例の詳細について は、『 Maps API for JavaScript Guide 』を参照してください。