デフォルトのスタイル

HERE には、基本的なマッププリミティブをレンダリングするための 4 つのデフォルトの埋め込みスタイルがあります。

  • polygons
  • lines
  • points
  • text

データソースが提供するジオメトリおよび属性に応じて、Styleを同じ意味で使用できます。 使用可能なレイヤーとその属性の詳細については、 Vector Tile REST API のドキュメントを参照してください。

次の例では、同じデータレイヤーにさまざまなスタイルを適用する方法を示します。 以下の設定では、レイヤーwaterを使用して、エンコードされたデータを 4 つの異なるスタイルでレンダリングします。 これらのユニバーサル スタイルは埋め込まれており、すべてのデータ レイヤーとプロパティに存在します。各スタイルおよび関連するスタイル属性の説明については、以下の対応するセクションを参照してください。

次のコードでは 、スタイルpolygonを使用して青色の水域ポリゴンをレンダリングします。 右の画像は、構成がベース マップの H.map.Style として設定された後のマップを示しています。

Style 

sources:
    omv:
        type: OMV
layers:
    water_areas:
        data: {source: omv, layer: water}
        draw:
            polygons:
                order: 1
                color: [0.055, 0.604, 0.914, 1.00]
" Polygons " スタイルを適用後のマップ
図 1. " Polygons " スタイルを適用後のマップ

スタイルpolygonsを linesに変更することで、データレイヤーでエンコードされたデータのアウトラインをレンダリングできます。

Style 

sources:
    omv:
        type: OMV
layers:
    water_areas:
        data: {source: omv, layer: water}
        draw:
            lines:
                order: 1
                width: 2px
                color: [0.055, 0.604, 0.914, 1.00]
"lines" スタイルを適用後のマップ
図 2. "lines" スタイルを適用後のマップ

points ジオメトリの頂点の代わりにpointsをレンダリングすると, 同じデータにスタイルを適用することもできます。 Styleは、各点のサイズと色を定義します。 すべての頂点を表示するに は、Styleのプロパティcollideをfalseに設定する必要があります。

Style 

sources:
    omv:
        type: OMV
layers:
    water_areas:
        data: {source: omv, layer: water}
        draw:
            points:
                collide: false
                size: 6px
                color: [0.055, 0.604, 0.914, 1.00]
"points" スタイルを適用後のマップ
図 3. "points" スタイルを適用後のマップ

データレイヤーにテキスト表現を持つプロパティがある場合は、そのスタイルtextをレイヤーに適用することもできます。 次の例では 、データレイヤーwaterに 、水域のフィーチャ名を表すプロパティnameが含まれています。 テキストスタイルの場合、レンダリングのためにプロパティname が選択されていることに注意してください。 ただし、任意のプロパティを選択できます。詳細については、このガイドの対応する章を参照してください。

Style 

sources:
    omv:
        type: OMV
layers:
    water_areas:
        data: {source: omv, layer: water}
        draw:
            text:
                collide: false
                font:
                    fill: rgba(0, 0, 20, 1.0)
                    size: 22px
"text" スタイルを適用後のマップ
図 4. "text" スタイルを適用後のマップ

論理レイヤー内の同じデータレイヤーに複数のスタイルを適用できます。 次の例では 、polygonsおよびtextスタイルを使用して、水域ポリゴンの上にラベル情報をレンダリングしています。

Style 

sources:
    omv:
        type: OMV
layers:
    water_areas:
        data: {source: omv, layer: water}
        draw:
            polygons:
                order: 1
                color: [0.055, 0.604, 0.914, 0.50]
            text:
                collide: false
                text_source: function() {return feature.name}
                font:
                    fill: rgba(0, 0, 20, 1.0)
                    size: 22px
"text" スタイルと "polygon" スタイルを組み合わせたスタイルの適用後のマップ
図 5. "text" スタイルと "polygon" スタイルを組み合わせたスタイルの適用後のマップ

Polygons

このスタイルpolygonsは、閉じたシェイプを含むデータレイヤーで使用できます。 このスタイルpolygonsは、開いているシェープでは使用できません。

  • color - string, function、必須。 プロパティはフィーチャーの色を示します。 文字列は、カラー定義の CSS 形式に従い、次の形式をとることができます。
    • CSS の名前付きカラー
    • [r, g, b, a] 範囲内の RGBA 値を含む配列 0...1
    • '#RRGGBB' -RGB の 16 進文字列
    • rgb(R, G, B) - またはの範囲の CSS RGB カラー 0...255 0%...100%
    • rgba(R, G, B, A) - 範囲 0...255 内の CSS RGB カラーおよび範囲 0...1 内のアルファチャンネル
draw:
  polygons:
    color: rgb(255, 0, 0)
  • extrude - boolean, integer, [min, max], function、オプション。 このプロパティは、ポリゴンを Z 軸に沿って押し出す必要があるかどうかを示します（たとえば、建物のアウトラインポリゴンを押し出す場合に使用されます）。 デフォルト値はfalse、
    • boolean - trueに設定すると、押し出しの高さはフィーチャーの height プロパティから取得されます。
    • integer - 押し出し高さ ( メートル )
    • [min, max] - この範囲では、ポリゴンの押し出しを 地面からminメートルの位置から開始する必要があり 、多角形を地面からmaxメートルまで押し出す必要があることを定義します。
    • function - 数値を返す関数。詳細については、「 [ 関数 ] 」を参照してください。
    です。
  • interactive - boolean、任意。 このプロパティは、 API 呼び出しを使用して機能にアクセスできるかどうかを示し ます ( H.Map.getObjectAtのコールなど ) 。 デフォルト値はfalseです。
  • order - integer, function、必須。 このプロパティは、論理レイヤーのレンダリング順序を定義します。 値が大きいレイヤーが上に表示されます。
  • style - string、任意。 このプロパティは 、設定のセクション stylesで定義されているスタイルを参照します。詳細について は、「カスタムスタイル」を参照してください。
  • visible - boolean、任意。 プロパティは、フィーチャーがレンダリングされたかどうかを示します。 デフォルト値はtrueです 。

Lines

linesスタイルは、開いているまたは閉じているシェイプを含むレイヤーで使用できます。

  • dash - [...number]、任意。 プロパティには数値の配列が含まれ、行のレンダリングに使用される破線のパターンが記述されます。 SVG DASH 配列の一般的なロジックに従います。 たとえば、次のスニペットでは、 1 単位のギャップを持つ 2 つの破線長さの単位を定義します。
draw:
  lines:
    dash: [2, 1]
  • cap - string、任意。 プロパティは、Lineの終端の形状を設定 します。値butt、squareおよびroundを受け取ることがあります。 デフォルト値はbuttです 。
  • color - string, function、必須。 プロパティはフィーチャーの色を示します。 この文字列は、カラー定義の CSS 形式に従い、次の形式をとることができます。
    • CSS の名前付きカラー
    • [r, g, b, a] 範囲内の RGBA 値を含む配列 0...1
    • '#RRGGBB' -RGB の 16 進文字列
    • rgb(R, G, B) - またはの範囲の CSS RGB カラー 0...255 0%...100%
    • rgba(R, G, B, A) - 範囲 0...255 内の CSS RGB カラーおよび範囲 0...1 内のアルファチャンネル
draw:
  lines:
    color: rgb(255, 0, 0)
  • extrude - boolean, integer, [min, max], function、任意。 このプロパティは、ポリゴンを Z 軸に沿って押し出す必要があるかどうかを示します（たとえば、建物のアウトラインポリゴンを押し出す場合に使用できます）。 デフォルト値はfalse、
    • boolean - trueに設定されている場合、押し出しの高さはフィーチャーの height プロパティから取得されます。
    • integer - 押し出し高さ ( メートル )
    • [min, max] - この範囲では、ポリゴンの押し出しが 地面からminメートルの位置から開始され 、地面からmaxメートルまで押し出されるように定義されます。
    • function - 数値を返す関数。詳細については、 [ 関数 ] を参照してください。
    です。
  • interactive - boolean、任意。 このプロパティは、 API 呼び出しを使用して機能にアクセスできるかどうかを示し ます ( H.Map.getObjectAtのコールなど ) 。 デフォルト値はfalseです。
  • join - string、任意。 プロパティは、Line ジョイントのシェイプを定義 し、値bevel、roundおよびmiterを受け取ることができます。 デフォルト値はmiterです 。
  • miter_limit - integer、任意。 パラメーターは miter 、接合の最大長を定義します。 デフォルト値は3です。

  • offset - float, [...[zl, float]]、任意。 このパラメータでは、線分のオフセットをメートル (m)またはピクセル (px) で設定します。 オフセットが元のセグメントの向きに垂直に適用されます。 使用できる形式は次のとおりです。

    • すべてのズームレベルで使用される浮動小数点数。

    • 2 つの要素から成る配列の配列。 1 つ目の要素はズーム レベル、 2 つ目の要素はオフセットを定義します。 次の例では、ズーム レベル16 では、オフセット は 10px 、ズーム レベル 19 では 4px です。

      draw:
lines:
  offset: [[16, 10px], [19, 4px]]
  • order - number, function、必須。 このプロパティは、論理レイヤーのレンダリング順序を定義します。 値が大きいレイヤーが上に表示されます。
  • outline - 行のアウトラインスタイルを定義するブロックレベルの要素。 任意のスタイルパラメータlinesを含めることができます。 次の例では、 3 ピクセルの青色のポリラインの 1 ピクセルの黒いアウトラインを定義します。
draw:
  lines:
    order: 1
    width: 3px
    color: [0.055, 0.604, 0.914, 1.00]
    outline:
      width: 1px
      color: rgb(0, 0, 0)
  • style - string、任意。 このプロパティは 、設定のセクション stylesで定義されているスタイルを参照します。詳細について は、「カスタムスタイル」を参照してください。
  • visible - boolean、任意。 このプロパティは、フィーチャーがレンダリング可能かどうかを示します。 デフォルト値はです true。

  • width - float, [...[zl, float]], function、必須。 このプロパティは、行の幅を定義します。 幅はメートル m 単位またはピクセルpx単位 で指定できます。 使用できる形式は次のとおりです。

    • すべてのズームレベルに適用される浮動小数点数または整数数。

    • 2 つの要素から成る配列の配列。 1 つ目の要素はズーム レベル、 2 つ目の要素は幅を定義します。 次の例では、ズーム レベル 15 では 5 ピクセル、ズーム レベル 18 では 15 ピクセルの線幅を使用しています。

      draw:
lines:
  width: [[15, 5px], [18, 15px]]
    • 浮動小数点数を返す関数です。

Points

このスタイルpointsを使用して、開いたシェイプと閉じたシェイプ、またはPointsのセットを表示できます。 スタイルは、データポイントの位置に定義されたサイズの円を描画します。

  • anchor - string, [...string]、任意。 このプロパティは、フィーチャーをレンダリングする必要がある形状の側面を定義します。 指定できる値は center、left、right、top、bottom、 top-left、 top-right、bottom-left、およびbottom-right。 パラメーター値がストリングの配列として定義されている場合、レンダラは、フィーチャーが他のアンカーと衝突しない最初のアンカーを使用します。 デフォルト値は['bottom', 'top', 'right', 'left']です。
  • collide- boolean、任意。 このプロパティは、衝突検出の設定を変更します。 falseに設定する と、レンダリング中に交差する点は破棄されます。 デフォルト値はtrueです 。

  • color - string、必須。 プロパティはフィーチャーの色を示します。 文字列は、カラー定義の CSS 形式に従い、次の形式をとることができます。

    • CSS の名前付きカラー
    • [r, g, b, a] 範囲内の RGBA 値を含む配列 0...1
    • '#RRGGBB' -RGB の 16 進文字列
    • rgb(R, G, B) - またはの範囲の CSS RGB カラー 0...255 0%...100%

    • rgba(R, G, B, A) - 範囲 0...255 内の CSS RGB カラーおよび範囲 0...1 内のアルファチャンネル

      draw:
points:
  color: rgb(255, 0, 0)

  • flat - boolean、任意。 このプロパティは、Pointをワールドスペースに投影する必要があるかどうかを示します。 trueに設定 すると、ポイントの表示が地図の表面で「フラット」になり、カメラの動きに応じて反応します。

  • interactive - boolean、任意。 このプロパティは、 API 呼び出し ( H.Map.getObjectAt コールなど ) を介して機能にアクセスできるかどうかを示します。 デフォルト値はfalseです 。
  • offset - [integer, integer], [...[zl, [integer, integer]]、任意。 パラメーターは、データレイヤーで定義されている位置からポイントをシフトします。 オフセットは画面のピクセル (px) で定義 され、ポイントフィーチャ自体またはポイントフィーチャのブロック要素textに適用できます。 オフセットは、 2 つの要素配列の配列として定義することも できます。 1 つ目の要素はズーム レベルで、 2 つ目の要素はピクセル座標[x, y]です。 次の例では、オフセットはズーム レベル 15 の場合は X 軸で 10 ピクセル、ズーム レベル 16 の場合は -10 ピクセルです。
draw:
  points:
    offset: [[15, [10px, 0px]], [16, [-10px, 0px]]]
  • order - number, function、必須。 このプロパティは、論理レイヤーのレンダリング順序を定義します。 値が大きいレイヤーが上に表示されます。
  • outline - 行のアウトラインスタイルを定義するブロックレベルの要素。 任意のスタイルパラメータlinesを含めることができます。 次の例では、 3 ピクセルの青色のポリラインの 1 ピクセルの黒いアウトラインを定義します。
draw:
  points:
    order: 1
    size: 3px
    color: [0.055, 0.604, 0.914, 1.00]
    outline:
      width: 1px
      color: rgb(0, 0, 0)

  • placement - string、任意。 このパラメータでは、データレイヤーにポリゴンまたはラインデータが含まれている場合のポイントの配置を定義します。 指定できる値は次のとおりです。

    • vertex - LineまたはPolygonの頂点に点を配置します。
    • midpoint - ジオメトリセグメントの中間にポイントを配置します。
    • spaced - ジオメトリに沿って、 placement_spacing プロパティで指定されたポイント間の間隔でポイントを配置します。

    • centroid - ジオメトリの中心にポイントを配置します。 データレイヤーはポリゴンを提供する必要があります。

      デフォルト値は vertex です 。

  • placement_min_length_ratio - integer, [...[zl, integer]], function、任意。 このパラメータでは、ジオメトリのセグメント ( ラインおよびポリゴンにのみ適用 ) とポイントサイズの比率を定義します。 このパラメーターは、ポイント自体よりも小さいセグメントでポイントがレンダリングされないようにするために使用されます。
  • placement_spacing - float, [...[zl, float]], function、任意。 このパラメータでは、 2 つのポイント間のスクリーンピクセル数 (px) での距離を定義 します。このパラメータは、プロパティplacementがspacedに設定されている場合に使用されます。 デフォルト値は 80pxです。
  • priority - integer, function、任意。 パラメーターは、フィーチャーの図面の優先度を定義します。 数値が小さいほど優先度が高くなり、優先度が高いフィーチャーが最初に描画され、レンダリングの機会が多くなります。 デフォルト値はNumber.MAX_SAFE_INTEGERです。
  • size - integer, [integer, integer], [...[zl, integer]], [...[zl, [integer, integer]]]、任意。 パラメーターで 、pxまたは%のポイントのサイズを定義 します。 たとえば、値が 1 つの整数に設定されている場合　6px、直径が 6 ピクセルのポイントがレンダリングされます。 例えば、パラメーターに 2 つの整数値の配列が設定されている場合　 [5px, 10px]、楕円体は X 軸で直径 5 ピクセル、 Y 軸で 10 ピクセルの値でレンダリングされます。
  • style - string、任意。 このプロパティは、設定のスタイルセクションで定義されているスタイルを参照します。 詳細について は、「カスタムスタイル」を参照してください。
  • text - 任意。 このパラメータは、そのポイントに関連付けられているテキストラベルのレンダリングを定義するブロックレベルの要素を表します。 このブロックでは、スタイルのすべてのパラメーターを使用できます。text
  • visible - boolean、任意。 プロパティは、フィーチャーがレンダリングされたかどうかを示します。 デフォルト値はtrueです 。

Text

このスタイルtextでは、形状のテキストラベルが配置され、開いている、または閉じているシェープ、またはPointsで使用できます。 開いているジオメトリ ( Lineなど ) でスタイルを使用すると ' ラベルがLineに沿って配置されます ポリゴンがソースジオメトリとして使用されている場合、Textは中心点に配置されます。

  • align - string、任意。 複数行のラベルのテキストの位置合わせを設定します。 指定できる値は left、centerおよび rightです。 デフォルト値はcenterです 。
  • anchor - string, [...string]、任意。 このプロパティは、フィーチャーをレンダリングする必要がある形状の側面を定義します。 指定できる値は center、left、right、top、bottom、 top-left、 top-right、bottom-left、およびbottom-right。 パラメーター値がストリングの配列として定義されている場合、レンダラは、フィーチャーが他のアンカーと衝突しない最初のアンカーを使用します。 デフォルト値は['bottom', 'top', 'right', 'left']です。
  • background - 任意。 このプロパティは、テキストボックスの背景を定義します。
    • color - string, function、必須。 プロパティは、テキストボックスの背景色を示します。 文字列は、カラー定義の CSS 形式に従い、アウトラインカラーと同じ形式にすることができます。
  • collide - boolean、任意。 このプロパティは、衝突検出の設定を変更します。 に設定する falseと、交差するテキストラベルはレンダリング中に破棄されます。 デフォルト値はtrueです 。

  • font - 必須。 フォントの外観を定義するブロックレベルの要素。

    • family - string、任意。 このパラメータでは、書体を設定します。 デフォルト値はHelveticaです。
    • fill - string、任意。 このプロパティは、テキストの色を示し、一般的な色定義の規則に従います。 デフォルト値はwhiteです 。
    • size - integer、必須。 パラメータでは、テキストのサイズ、使用できる単位pxpt、およびemを定義 します。

    • stroke - {color: string, width: integer}、任意。 このパラメータでは、フォントのアウトラインの色と幅を定義します。 次の例では、線幅を 2 ピクセルに設定し、色を青に設定します。

      draw:
text:
  font:
    size: 20px
    stroke:
      color: blue
      width: 2

      色と幅は size 、および color のプロパティで説明されている一般的なルールに従います。

    • style - string、任意。 このパラメータでは、フォントスタイルを定義 します。値はitalicおよびnormalです。 デフォルト値はnormalです。
    • transform - string、任意。 このパラメータ は、テキストを大文字または小文字のレジスタに変換し、それぞれlowercaseおよびuppercaseを値として使用します。
  • interactive - boolean、任意。 このプロパティは、 API 呼び出しを使用して機能にアクセスできるかどうかを示し H.Map.getObjectAt callます ( 例 : ) 。 デフォルト値は falseです。
  • max_lines - integer、任意。 このパラメータでは、テキストが占めることのできる最大行数を設定 text_wrap します。この値は、テキストの折り返しが有効な場合にのみ考慮されます ( 以下を参照 ) 。
  • offset - [integer, integer], [...[zl, [integer, integer]]、任意。 パラメーターは、データレイヤーで定義されている位置からテキストをシフトします。 オフセットは画面のピクセル単位で動作します (px) 。 2 つの要素配列の配列として定義することも [x, y] できます。最初の要素はズーム レベル、 2 番目の要素はピクセル座標です。 次の例では、オフセットはズーム レベル 15 の場合は X 軸で 10 ピクセル、ズーム レベル 16 の場合は -10 ピクセルです。
draw:
  text:
    offset: [[15, [10px, 0px]], [16, [-10px, 0px]]]
  • outline - 任意。 プロパティは、テキストボックスのアウトラインの色と幅を定義します。
    • color - string, function、必須。 このプロパティは、アウトラインの色を示します。 この文字列は、カラー定義の CSS 形式に従い、次の形式をとることができます。
      • CSS の名前付きカラー
      • [r, g, b, a] 範囲内の RGBA 値を含む配列 0...1
      • '#RRGGBB' -RGB の 16 進文字列
      • rgb(R, G, B) - またはの範囲の CSS RGB カラー 0...255 0%...100%
      • rgba(R, G, B, A) - 範囲 0...255 内の CSS RGB カラーおよび範囲 0...1 内のアルファチャンネル
    • width - integer、必須。 このプロパティでは、アウトラインの幅をピクセル単位で定義します。
  • order - number, function、必須。 このプロパティは、論理レイヤーのレンダリング順序を定義します。 値が大きいレイヤーが上に表示されます。
  • padding - [integer, integer, integer, integer], [integer, integer]、任意。 プロパティでは、テキストのパディングを定義します。 これ は、top、right、bottom、およびleftのパディングを定義する 4 つの要素の配列として指定すること も、 2 つの要素の配列として指定して、それらの要素を定義verticalおよびhorizontalパディングすることもできます。
  • priority - integer, function、任意。 パラメーターは、フィーチャーの図面の優先度を定義します。 数値が小さいほど優先度が高くなり、優先度が高いフィーチャーが最初に描画され、レンダリングの機会が多くなります。 デフォルト値はNumber.MAX_SAFE_INTEGERです。
  • repeat_distance - integer、任意。 このプロパティは、タイル境界内のラベルの頻度を定義します。 距離はラベルの中心点から測定 repeat_groupされ、現在の境界球として処理できます。 デフォルト値は256pxです 。
  • repeat_group - string、任意。 このプロパティでは、ラベルのグループ化方法に従って名前を定義します。 異なるデータレイヤーのラベル repeat_group には、同じ名前を付けることができます。 これらのラベルには、同じ repeat_distance が適用されます。
  • style - string、任意。 このプロパティは 、設定のセクション stylesで定義されているスタイルを参照します。詳細について は、「カスタムスタイル」を参照してください。
  • text_source - string, function, [...string|function]、任意。 このパラメータでは、ラベルテキストのプロパティの名前を設定します。 これには、プロパティの名前である文字列リテラル、文字列リテラルを返す関数、または文字列または関数の配列を使用できます。 後者の場合、 null 以外の最初の値がラベルに使用されます。 デフォルト値はnameです。
  • text_wrap - integer、任意。 このプロパティでは、ラップされたテキストラベルの後の文字数を設定します。
  • visible - boolean、任意。 プロパティは、フィーチャーがレンダリングされたかどうかを示します。 デフォルト値はtrueです 。

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

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