スタイル GeoJSON の表示

HERE Data Inspector Library では、次の形状タイプがサポートされています。

追加のプロパティを持つジオメトリオブジェクトは Feature オブジェクトです。フィーチャーのセットは FeatureCollection オブジェクトに含まれています。 GeoJSON データの視覚的な外観をカスタマイズするには Feature 、次のカスタムプロパティをオブジェクトに追加します。

"properties": {
    "tooltip": "",          // can be applied to any geometry type. Renders a popup message when you hover a mouse pointer over a feature. If the "tooltip" property is not set, the popup is displayed with the list of all other configured "properties" for the feature.
    "style": {
        "color": "",        // can be applied to any geometry type
        "fill": "",         // can be applied to "Point/MultiPoint" with the "radius" property and "Polygon/MultiPolygon"
        "opacity": 0.5,     // can be applied to "Point/MultiPoint" with the "radius" property  in meters, "LineString/MultiLineString" and "Polygon/MultiPolygon" (only the filled part is affected, not the outline)
        "hoverColor": "",   // the color of the feature on mouse hover; can be applied to any feature
        "hoverOpacity": 0.2 // the opacity of the feature on mouse hover; can be applied to any feature except for markers and "Point/MultiPoint" with the "radius" property in pixels
    },
    "width": "7px",         // can be applied to "LineString/MultiLineString" and "Polygon/MultiPolygon" (for polygon outline); in pixels by default; for "LineString/MultiLineString" this value supports different units: "px", "m"; for example: "5px", "5m"; for polygon outlines any units are treated as pixels
    "minWidth": 3,          // for lines with width specified in meters, this property specifies a minimum width in pixels.
    "radius": "4m",         // can be applied to "Point/MultiPoint"; this value also supports these units: "px", "m"; for example "5px", "5m"; in meters by default
    "minRadius": 3,         // for "Point/MultiPoint" objects with the "radius" specified in meters, this property specifies a minimum radius in pixels
    "protobufRef": ""       // specifies a link to the original raw data property that this feature visualizes; for example, "prop.someArray[34].prop2"; can be applied to any feature
    "marker-image": "",     // an image for a marker that can be a data URL or a web URL; can be applied to "Point/MultiPoint" without the "radius" property
    "featureTags": ["tag"], // an array of string tags that are used for hierarchical filtering; featureTags values can have a pipe (|) inside thus making groups on different levels; for example, "group_1|group_2|group_3" will result in a three-level deep tree.
}

マップボックスの単純なスタイル

は GeoJsonDataSource、 Mapbox Simple Style Specification v1.1.0 もサポートしています。

以下に、サポートされている単純スタイル属性の例を示します。

"properties": {
    "title": "",            // simple tooltip title; HTML markup is not allowed and is removed before being displayed; can be applied to any geometry type
    "description": "",      // simple tooltip description; HTML markup is not allowed and is removed before being displayed; can be applied to any geometry type
    "marker-symbol": "",    // a short name for a marker image that maps to an image from a name-map of images defined in the "marker-symbol-images" property of a "FeatureCollection"; can be applied to "Point/MultiPoint" without the "radius" property
    "marker-size": "",      // possible values: "small", "medium", "large"; can be applied to "Point/MultiPoint" without the "radius" property
    "marker-color": "",     // the same as "properties.style.color", but for "Point/MultiPoint" only
    "stroke": "",           // the same as "properties.style.color", but for "LineString/MultiLineString" and "Polygon/MultiPolygon" (for polygon outline) only
    "stroke-opacity": 1.0,  // the same as "properties.style.opacity"; can be also applied to "Polygon/MultiPolygon" to set the opacity of the polygon outline
    "stroke-width": 1.0,    // the same as "properties.width"
    "fill": "",             // the same as "properties.style.fill"
    "fill-opacity": 1.0     // the same as "properties.style.opacity"
}

Mapbox の Simple スタイルプロパティが指定されている場合、tooltip、style、width、またはradiusの各プロパティよりも優先度が高いことに注意してください。

の使用状況 `properties.description`

デフォルトでは、すべてのpropertiesフィーチャーがクリック時にInfoPanelウィジェットに表示されます。 properties.description この動作は、文字列またはオブジェクトを受け取るプロパティで上書きできます。この場合、で指定し properties.description たアイテムのみが表示され、他のフィーチャープロパティは無視されます。

に文字列値を割り当てると description、次の HTML タグを使用して表示をカスタマイズできます。

allowedTags: [
    "abbr", "address", "article", "aside", "b", "bdi", "bdo", "blockquote", "br",
    "caption", "cite", "code", "col", "colgroup", "data", "dd", "del", "details",
    "dfn", "div", "dl", "dt", "em", "footer", "h3", "h4", "h5", "h6", "head",
    "header", "hr", "i", "kbd", "label", "legend", "li", "main", "mark", "meter",
    "nav", "ol", "p", "pre", "progress", "q", "rp", "rt", "ruby", "s", "samp",
    "section", "small", "span", "strike", "strong", "sub", "summary", "sup",
    "table", "tbody", "td", "tfoot", "th", "thead", "time", "title", "tr", "u",
    "ul", "var", "wbr"
]

にオブジェクトを割り当てると description、そのプロパティが 情報パネルの表に自動的に配置さ れ、次のように表示されます。

型のプロパティの HTML コード string は、生の形式で表示されます
型のプロパティ object は、自動的に文字列に変換されます

properties.description実装方法を示す例については、「ツールチップとスタイルの追加」を参照してください。

フィーチャープロパティの継承

MultiPoint、 MultiLineString、、または MultiPolygon( 各ポイント ) のプロパティを定義する場合は、 LineString 、またはポリゴンは、そのコンテナフィーチャーのプロパティを継承します。たとえば、カスタム SVG アイコンを MultiPoint ジオメトリに添付するとします。その結果、この配列のすべての点について同じアイコンが表示されます。さらに、これらの点のいずれかを選択すると、この MultiPoint 形状で定義されているすべての点も選択されます。

特定の点を高輝度表示するか、または個別に選択する場合は、コンテナMultiPointを独立したPoints（または小さいセットMultiPointのみ）に分割し、それらPointのそれぞれに個々の属性を割り当てます。同様のことが、 LineStrings とポリゴンにも当てはまります。

ジオメトリフィーチャーにカスタムアイコンを追加しています

Point/MultiPoint フィーチャーのカスタムアイコンを定義できます。 marker-image このプロパティは有効なデータ URL を受け入れ、次の内容を表示できます。

Base64 でエンコードされた PNG イメージ :

{
  "type": "Feature",
  "properties": {
      "marker-image": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAAAkCAYAAADhAJiYAAAAAXNSR0IArs4c6QAABFZJREFUWAntWEtonFUUvuefTp0ZpZLRtD5ADDFNZobmNY80CFXa4kK60VJQCkp1UReiKOJGaEvBhaClUES6UEHdia50JdRGbSEzSepkTGYkLQEVbCkmtLXtJJP5j+ek/uW+/tvpqAtLZ3PP4zvnfvfc/557GSFu//5nFYB2+PafLq/HpXqVYpNGPMCSF/G2l3tzPxi+FgxeCxgDAo36EBlNMoxEvMNvNh81glo0tEUIEbpd+UG4/a7YtgiBwEdcSalKbr8jOJTQQLX49GCtZJS+/2z5Tl/AZkdOdmXy88X7dEz254m+gVpxzy7EiO4LdOtHvWm2uIVWOcYgAJgBwKN+Iv5Z5Gr9Sd/HdxDFg0GC0BHEJfK9nYgmP7iysrADEPYi4hbGe554pZwaOWKLNQgdQPS+nC1NosBBOQBANIlI6MpkrCID+LQ4fScW457oKaZG/lCwpOhA8UWt9KJOhoPaInMt0JiDzB11hIPs1n9KhbJnJu5uLPlzVNpOHfhv66sVh8hQJZWryLkV9st13HezZOiIX6HvbIqSLsqJbyRzxcFvHtZxCiEh/N06wKFX6Yt/rDedXzedLmQrmZHkmrXRDJX8mCNGcaEQW/XTqBACsWYXTfK7EmVReNJ7EuuHK+nCd58DNAPIqZ7h2XK6sN0DeD+whY1cWQ+850pdhbMyRiE0ncl+H4uLYSI1JoMUGcTFaCyy53hXV12x/63Q9mFHvPMNahg1m59t9P3MoedtLqfzn+oYhRA7mXFfKr9NgPhaB7NO/eSrye7cLzZfYGOyROyjQJdHJhOPJnP6xxxgDELs4G3wEM4HIHlEgAlZD5PBC8EhXB7v6bkYFmclxGCfWk9Y0D+y00XoircSyuJElPbGej0AYs6VMPChb8fRcV83+uuM/elCwQahodrUA8tVf4zW8USQXB4RcAc10Idkmy4/Pj8fo372gm6/pmP35Ut/Tg7MlPhNZfwUQnyprjQbU3RPjBrIwEArbNSbH/OkgUkeiQgsXj3/Lu14n2yXZarSwz74J/ur48/LdpaVq2PTzDj3hA06KETnxvgSncgTQS8amptKN5cbR7jhhcQY5lgC7pd7kUao9B59zq8bUQ4DNzhaVo0q00WwDgfUcNHkx6YzI9tkh7Jla2NwkPqH9bjLQbJML4MEkRkm282RoeeMAO9VORfLCiFqeBcQxFs66L/R4eh0Ov+TnlshxM6dffkPqUqndCCVd0W3taKHxC3GAPfZ4g1CB1ZfeJHrpSRyFSrty3R/3QvgPUsT/GZLZNjoCUv4N5Odd3XQZfsMHYDjAYaesPttr0X2U377b2B2/Ckic+7HVOGkjOBHPi4sfeNsDUKco9MzKJ8ezsGP/BX0Rzf25j8JTqacm+VQQjpQ1onsIR/Fa7JNlinpt3R6tsq2VmVjy1oJRAGnnTi4gd8R3BYhevKcceSkW8ftd8W2RQijMT6FC9bEq382RE5YfbeNt2IF/gJLU1/JY8fCWAAAAABJRU5ErkJggg=="
  },
  "geometry": {
      "type": "Point",
      "coordinates": [13.382, 52.517]
  }
}

SVGs ：

{
  "type": "Feature",
  "properties": {
      "marker-image": "data:image/svg+xml;utf8,<svg width='128' height='128' viewBox='0 0 26 26' version='1.1' xmlns='http://www.w3.org/2000/svg'><g style='fill:rgb(217, 217, 242); stroke:rgba(198, 203, 221, 0.5)' transform='translate(0,5)'><path d='M 5,7 C 4.5,4.5 7.5,1.5 10,3 c 5.5,-5 13,-1.5 12.5,5 4,2 3.5,7.5 -0,7.5 -6,0 -10.5,0 -18.5,0 -5,-0 -4.5,-8.5 1,-8.5 z'/></g></svg>"
  },
  "geometry": {
      "type": "Point",
      "coordinates": [13.38, 52.517]
  }
}

外部画像 :

{
  "type": "Feature",
  "properties": {
      "marker-image": "https://upload.wikimedia.org/wikipedia/commons/thumb/c/c7/HERE_logo.svg/180px-HERE_logo.svg.png"
  },
  "geometry": {
      "type": "Point",
      "coordinates": [13.383, 52.517]
  }
}

注

画像は名前で参照することもでき、 GeoJSON 全体のサイズを削減できます。 marker-symbol このプロパティを使用して、名前とイメージのマップからイメージの名前を指定できます。名前とイメージのマップは、 GeoJSON データのルートオブジェクトに配置する必要FeatureCollectionがあります () 。

{
    "type": "FeatureCollection",
    "features": [
        {
            "type": "Feature",
            "properties": {
                "marker-symbol": "img"
            },
            "geometry": {
                "type": "MultiPoint",
                "coordinates": [
                    [12.85, 52.55],
                    [12.9, 52.3]
                ]
            }
        },
        {
            "type": "Feature",
            "properties": {
                "marker-symbol": "logo"
            },
            "geometry": {
                "type": "MultiPoint",
                "coordinates": [
                    [13.3, 52.35],
                    [13.4, 52.5]
                ]
            }
        }
    ],
    "marker-symbol-images": {
        "img": "data:image/svg+xml;utf8,<svg width='128' height='128' viewBox='0 0 26 26' version='1.1' xmlns='http://www.w3.org/2000/svg'><g style='fill:rgb(217, 217, 242); stroke:rgba(198, 203, 221, 0.5)' transform='translate(0,5)'><path d='M 5,7 C 4.5,4.5 7.5,1.5 10,3 c 5.5,-5 13,-1.5 12.5,5 4,2 3.5,7.5 -0,7.5 -6,0 -10.5,0 -18.5,0 -5,-0 -4.5,-8.5 1,-8.5 z'/></g></svg>",
        "logo": "https://upload.wikimedia.org/wikipedia/commons/thumb/c/c7/HERE_logo.svg/180px-HERE_logo.svg.png"
    }
}

marker-image との両方 marker-symbol が定義されている場合は marker-image 、のみが使用されます。これは、シンボル名で定義されたデフォルトのイメージを特定のフィーチャーで上書きする必要がある場合に役立ちます。

Point 簡単なマーカー ( 以下の章を参照 ) と同様に、カスタム画像を含む機能では、カスタムのホバーカラーがサポートされています。ホバーの色が画像に適用されます。 70% がユーザー定義のホバーの色で、 30% が画像自体です。カスタマイズできない選択カラーについても同じことが言えます。 #FCDB7F （ salomie ）カラーは、同じ割合の分布を持つ画像に適用されます。この割合は 70% x 30% です。

注

#SVG のデータ URL 内の hash() シンボル ( 色など ) #ffffffが正しく解釈されない場合があります。エスケープすることをお勧めします。マーカーシンボルに定義されているイメージは、データ URL または Web URL です。 __ 接頭辞が付いたマーカーシンボルは内部実装用に予約されているため、使用できません。

ジオメトリフィーチャーの効果をハイライト表示します

Feature オブジェクトのタイプに応じて、データインスペクターライブラリでは、ホバーバリアントを持つオブジェクトのデフォルトおよび選択した状態に異なる効果が提供されます。カスタムレンダラプラグインコードでの GeoJSON データの強調表示方法をカスタマイズできます。

デフォルトおよび選択した行の状態での GeoJSON スタイルの動作を確認するには、interactive / DI / fullサンプルアプリケーションを実行します。

多角形

の Polygon状態に応じて、次のスタイルが適用されます。

デフォルト :#1EE0FF (1 ピクセルの線を 100 ％で塗りつぶし、 20 ％の不透明度で塗りつぶす )
選択済み :#FCDB7F (1 ピクセルの線を 100 ％で塗りつぶし、 40 ％の不透明度で塗りつぶす )

両方の状態には、塗りと線のカラーに +20% の不透明度が追加されたホバーのバリエーションがあります。

既定の状態の不透明度を含む既定の状態の色をカスタマイズできます。不透明度は 20% のままにし Polygonsて、最大 4 つのレイヤーを重ねることをお勧めします。ただし、選択した状態の不透明度の上昇は含まれません ( 常に 20% が追加されます ) 。

選択した状態はカスタマイズできません。 #FCDB7F 予約され、既定の状態で使用されているため、データ検査で混乱が生じる可能性があります。

Polygonの線幅をカスタマイズすることもできます。サポートされている単位は、ピクセルおよびメートルです。

直線

の Line状態に応じて、次のスタイルが適用されます。

デフォルト :#1EE0FF (2 ピクセルの線幅 )
選択済み :#FCDB7F (2 ピクセルの線幅 )

どちらの状態にも、線幅が 200% に増加し、不透明度が 20% 追加されたホバー変数があります。

既定の状態の不透明度を含む既定の状態の色をカスタマイズできます。

選択した状態の色はカスタマイズできません。 #FCDB7F が予約され、既定の状態で使用されていると、操作が複雑になることがあります。

Lineの線幅をカスタマイズすることもできます。サポートされている単位は、ピクセルおよびメートルです。単位が定義されていない場合、値はピクセル単位の値として扱われます。

線の最小レンダリングサイズは 1px です。

半径のない点

の Point状態に応じて、次のスタイルが適用されます。

デフォルト : #1EE0FF
選択済み : #FCDB7F

Pointのホバーの色をカスタマイズできます。ホバードマーカーは 150% に拡大縮小され、常に不透明になります。

の選択した状態の色はカスタマイズでき Pointません。

半径が N の点 (N>0)

の Points状態に応じて、次のスタイルが適用されます。

デフォルト :#1EE0FF (1 ピクセルの線を 100 ％で塗りつぶし、 20 ％の不透明度で塗りつぶす )
選択済み :#FCDB7F (1 ピクセルの線を 100 ％で塗りつぶし、 40 ％の不透明度で塗りつぶす )

両方の状態には、塗りと線のカラーに +20% の不透明度が追加されたホバーのバリエーションがあります。

既定の状態の不透明度を含む既定の状態の色をカスタマイズできます。ただし、最大 4 つのスタック構成を許可するには、 20% のままにすることをお勧め Polygonsします。これには、選択した状態の不透明度の増加は含まれません (20% が常に追加されます ) 。

選択した状態はカスタマイズできません。 #FCDB7F が予約され、既定の状態で使用されていると、データ検査で混乱が生じる可能性があります。

は radius 、ピクセル単位の値をサポートしています。単位が定義されていない場合、値はメートル単位の値として扱われます。

Point 半径がメートルのの最小レンダリングサイズは 12 ピクセルです。半径が 12 ピクセル以下の場合、塗りつぶしの不透明度は 100 ％に増加し、マウスポインターを合わせるとサイズが 150 ％に増加します。

Points ホバーリング時に、半径がピクセル単位ののののサイズが 150% に増加します。常に不透明です。

スタイル GeoJSON の表示

スタイル GeoJSON の表示

マップボックスの単純なスタイル

の使用状況 `properties.description`

フィーチャープロパティの継承

ジオメトリフィーチャーにカスタムアイコンを追加しています

注

注

ジオメトリフィーチャーの効果をハイライト表示します

多角形

直線

半径のない点

半径が N の点 (N>0)

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

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

開発者

スタイル GeoJSON の表示

マップボックスの単純なスタイル

の使用状況 properties.description

フィーチャープロパティの継承

ジオメトリフィーチャーにカスタムアイコンを追加しています

注

注

ジオメトリフィーチャーの効果をハイライト表示します

多角形

直線

半径のない点

半径が N の点 (N>0)

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

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

開発者

の使用状況 `properties.description`

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