ベクターデータ

HERE Maps API for Javascript を使用すると、 WebGL レンダリングエンジンを使用して、 HERE Vector Tile API によって提供されるベクターデータを簡単にレンダリングできます。 Maps API for JavaScript には、マップの実行時にマップスタイルおよびマップフィーチャの表示 / 非表示を操作するための、定義済みのベース マップスタイルおよびファシリティメソッドが用意されています。

基本的なベクトルマップ

マップのマップスタイルを簡単に設定するに は、クラスPlatformで定義されているメソッドcreateDefaultLayers()を使用します。 このメソッドは、さまざまなマップタイプを保持するオブジェクトを返しますが 、ベクタータイプはベクタールレイヤーを提供します。 名前付きのレイヤーは、マップタイプのさまざまなスタイルを表し、基本レイヤーとしてマップに直接割り当てることができます。

マップタイプのレイヤーは、標準の JavaScript ドット表記を使用して参照できます。 たとえば 、normalのマップスタイルのベクタータイルレイヤーを指定するに は、layers.vector.normal.mapを記述します。layersは、Platform.createDefaultLayers()からの戻り値を保持する変数の名前です。

次の例では、デフォルト (マップ タイプと) レイヤーを保持するオブジェクトを取得し、それらを使用してベクター ベース レイヤーで Map インスタンスを初期化します。

// Create a Platform object (one per application):
var platform = new H.service.Platform({
  'apikey': '{YOUR_API_KEY}'
});

// Get an object containing the default map layers:
var defaultLayers = platform.createDefaultLayers();

// Instantiate the map using the vecor map with the
// default style as the base layer:
var map = new H.Map(document.getElementById('mapContainer'),
            defaultLayers.vector.normal.map);

このコードを実行すると、次のイメージが作成されます。

基本レイヤーの変更後のマップ
図 1. 基本レイヤーの変更後のマップ

スタイル情報の検索

マップの有効期間中にスタイル情報を照会および変更して、新しいビジネスルールに従ってフィーチャを強調表示したり、アプリケーションで現在必要とされていないレイヤを削除したりできます。 Maps API for JavaScript omv H.service.omv.Provider は、次のメソッドを使用して実行時にマップスタイルを変更します。

  • extractRenderingConfig - 設定メソッドが複製されたコピーまたはセクション自身を返すことができる場合は、サブセクションを返します。 後者の場合、レイヤーは設定から削除され、マップに表示されなくなります。
  • mergeRenderingConfig - このメソッドは、呼び出し元とプロバイダによって提供された設定をマージします。
  • getRenderingConfig - スタイル設定の複製された完全なコピーを JavaScript オブジェクトとして返します。 これは、現在使用されている設定でマップの 2 番目のバージョンがインスタンス化されている場合、またはマップスタイル検査で使用されている場合に役立ちます。

次のスニペットでは、パークレイヤはベースレイヤ設定から取得されます。 パークレイヤの色が明るい赤色に変わり、設定がベースレイヤにマージされます。 変更できるプロパティの概要については、「スタイル」セクションを参照してください。

// Assuming that the platform and map were initialized, and
// the map uses vector base layer
// get the OMV provider from the base layer
var provider = map.getBaseLayer().getProvider();

// get the style object for the base layer
var parkStyle = provider.getStyle();

// query the sub-section of the style configuration
// the call removes the subsection from the original configuration
// NOTE: the style MUST be in the "READY" state
var parkConfig = parkStyle.extractConfig(['landuse.park']);

// change the color, for the description of the style section
// see the Developer's guide
parkConfig.layers.landuse.park.draw.polygons.color = '#FF0000'

// merge the configuration back to the base layer configuration
parkStyle.mergeConfig(parkConfig);
実行時にスタイル変更後のマップ
図 2. 実行時にスタイル変更後のマップ

カスタムマップスタイル - 簡単な紹介

Platform.createDefaultLayers() ファクトリメソッドによって提供される既定のマップスタイルに加えて、 HERE Map Tile API では、オンラインスタイル編集ツールを使用して新しいスタイルを作成できます。 ベース マップまたは実行時にレンダリングされるフィーチャーの表示 / 非表示を変更できます。

マップのスタイル設定ルールは、 YAML 形式の設定を指定するオープンソースの Tangram レンダリングエンジンによって定義された一般的なパターンに従います。 次の例では、 HERE Vector Tile API によって提供されるウォーターレイヤーをレンダリングする方法を定義します。 Vector タイル API で使用できるレイヤーの詳細については、 REST API のドキュメントの「レイヤー」セクションを参照してください。

sources:
    omv:
        type: OMV
# global description of the map, in this example
# the map background color is white
scene:
    background:
        color: [1.000, 1.000, 1.000, 1.00]

# section contains the style information for the layers
# that are present on the map
layers:
    # user defined name of the rendering layer
    water_areas:
        # the section defines where the rendering layer takes
        # its data from source: omv is mandatory for the Vector Tile API
        # layer: water specifies what vector layer is taken
        # for the rendering see REST API documentation for the
        # list of available layers.
        data: {source: omv, layer: water}
        # section defines how to render the layer
        draw:
            polygons:
                order: 1 # z-order of the layer
                color: [0.055, 0.604, 0.914, 1.00]

上のスタイルは、マップの背景色を定義します。 water_areasという名前のスタイル は、ベクタータイル のレイヤーwater からデータをレンダリングする方法を定義します。 次のように、既存の Maps API for JavaScript OMV レイヤーにスタイルを設定できます。

var style = `
sources:
    omv:
        type: OMV
# global description of the map, in this example
# the map background color is white
scene:
    background:
        color: [1.000, 1.000, 1.000, 1.00]

# section contains the style information for the layers
# that are present on the map
layers:
    # user defined name of the rendering layer
    water_areas:
        # the section defines where the rendering layer takes
        # its data from source: omv is mandatory for the Vector Tile API
        # layer: water specifies what vector layer is taken
        # for the rendering see REST API documentation for the
        # list of available layers.
        data: {source: omv, layer: water}
        # section defines how to render the layer
        draw:
            polygons:
                order: 1 # z-order of the layer
                color: [0.055, 0.604, 0.914, 1.00]
`;

// provided that map was instantiated with the vector layer
// as a base layer
var baseLayer = map.getBaseLayer();
baseLayer.getProvider().setStyle(new H.map.Style(style));

次の図は、結果を示しています。

ベクターベースレイヤースタイルの設定変更した後のマップ
図 3. ベクターベースレイヤースタイルの設定変更後のマップ

デフォルトのスタイル

前のセクションでは、スタイルpolygonを使用して水路をレンダリングしました。また、 HERE Maps API for Javascript では、直線、点、およびテキストのレンダリングに次のスタイルが提供されています。

  • points - ジオスペース内のポイントジオメトリ ( 例 : ロードシールド、 POI アイコンなど )
  • lines - Lineジオメトリ( 道路網、鉄道、フェリーなど )
  • polygons - 特定の地理的領域をカバーするポリゴン( 例 : ランドユース、水路、ビルディング形状 )
  • text - ジオメトリのテキスト ( 道路ラベル、建物番号、都市名など )

前の例を基にして、単純な道路ネットワーク表現をスタイルに追加できます。以前は polygonsのスタイルは、水路に使われていました。 次の例では、道路ネットワークをレンダリングするために lines を使用する必要があります。

sources:
    omv:
        type: OMV
# global description of the map, in this example
# the map background color is white
scene:
    background:
        color: [1.000, 1.000, 1.000, 1.00]

# section contains the style information for the layers
# that are present on the map
layers:
    # user defined name of the rendering layer
    water_areas:
        # the section defines where the rendering layer takes
        # its data from source: omv is mandatory for the Vector Tile API
        # layer: water specifies what vector layer is taken
        # for the rendering see REST API documentation for the
        # list of available layers.
        data: {source: omv, layer: water}
        # section defines how to render the layer
        draw:
            polygons:
                order: 1 # z-order of the layer
                color: [0.055, 0.604, 0.914, 1.00]
    road:
        data: {source: omv, layer: roads}
        draw:
            lines:
                order: 2
                color: [0.561, 0.561, 0.561, 1.00]
                width: 15

上記の例では、セクション roads が追加されています。 このセクションでは、線の色と幅を指定するベクタータイルデータレイヤーroadsを使用します。 上記の JavaScript スニペットで テンプレート リテラルstyleが置き換えられると、コードは次の結果を生成します。

道路のスタイルを追加後のマップ
図 4. 道路のスタイルを追加後のマップ

色は次の形式で定義できます。

  • CSS の名前付きカラー
  • [r 、 g 、 b 、 a] - 0 ~ 1 の範囲の RGBA 値を含む配列
  • '#RRGGBB' - RGB 16 進文字列
  • rgb(R, G, B) - 0 ~ 255 または 0 ~ 100% の範囲の CSS RGB カラー
  • RGBA(R, G, B, A) - 0 ~ 255 の範囲の CSS RGB カラーおよび 0 ~ 1 の範囲のアルファチャネル

マップ機能のフィルタリング

関連付けられているプロパティに基づいてマップフィーチャをフィルタリングできます。 前のセクションでは、道路ネットワークが灰色で表示されていたため、地図の読み取りが困難でした。 道路の道路ネットワーク属性と ベクタータイルの style 属性では、道路の重み付けが異なります。 使用可能なプロパティの一覧については、「 HERE Vector Tile API 」を参照してください。 以下のスニペットで 、新しいmajor_roadサブセクションがroadセクションに追加されました。 このサブセクションでは、 filter 属性を使用してマップ機能を絞り込みます。

sources:
    omv:
        type: OMV
# global description of the map, in this example
# the map background color is white
scene:
    background:
        color: [1.000, 1.000, 1.000, 1.00]

# section contains the style information for the layers
# that are present on the map
layers:
    # user defined name of the rendering layer
    water_areas:
        # the section defines where the rendering layer takes
        # its data from source: omv is mandatory for the Vector Tile API
        # layer: water specifies what vector layer is taken
        # for the rendering see REST API documentation for the
        # list of available layers.
        data: {source: omv, layer: water}
        # section defines how to render the layer
        draw:
            polygons:
                order: 1 # z-order of the layer
                color: [0.055, 0.604, 0.914, 1.00]
    road:
        data: {source: omv, layer: roads}
        draw:
            lines:
                order: 2
                color: [0.561, 0.561, 0.561, 1.00]
                # the width is set in the world meters
                width: 15
        major_road:
            # the filter section narrows down to what features of the
            # data layer the style must be applied to
            filter:
                kind: 'major_road'
            draw:
                lines:
                    color: [0.882, 0.553, 0.086, 1.00]
                    # the width is set in the screen pixels
                    width: 5px

スタイルを適用後、マップ上の主要な道路は、他の道路網とは異なる線の色と幅でレンダリングされます。

2 種類の道路スタイルの
図 5. 2 種類の道路スタイルのマップ

線幅は、画面のピクセル単位またはメートル単位で定義できます。 画面のピクセル単位で定義すると、すべてのズームレベルで線幅が同じままになります。

特定のルールをフィルタに追加して、詳細なマップ表示制御を取得できます。 フィルタで複数のプロパティが使用されている場合、それらのプロパティは論理ANDを使用して結合されます。 次の例では、新しいセクション major_road_tertiary が追加されています。 このセクションでは 、属性kind_detailが「 3 次」に設定されている道路は、異なる幅でスタイル設定され、黄色で色付けされます。元々のフィルタmajor_roadも変更され、「セカンダリ」に絞り込まれていることに注意してください。

sources:
    omv:
        type: OMV
# global description of the map, in this example
# the map background color is white
scene:
    background:
        color: [1.000, 1.000, 1.000, 1.00]

# section contains the style information for the layers
# that are present on the map
layers:
    # user defined name of the rendering layer
    water_areas:
        # the section defines where the rendering layer takes
        # its data from source: omv is mandatory for the Vector Tile API
        # layer: water specifies what vector layer is taken
        # for the rendering see REST API documentation for the
        # list of available layers.
        data: {source: omv, layer: water}
        # section defines how to render the layer
        draw:
            polygons:
                order: 1 # z-order of the layer
                color: [0.055, 0.604, 0.914, 1.00]
    road:
        data: {source: omv, layer: roads}
        draw:
            lines:
                order: 2
                color: [0.561, 0.561, 0.561, 1.00]
                # the width is set in the world meters
                width: 15
        major_road:
            # the filter section narrows down to what features of the
            # data layer the style must be applied to
            filter:
                kind: 'major_road'
                kind_detail: 'secondary'
            draw:
                lines:
                    color: [0.882, 0.553, 0.086, 1.00]
                    # the width is set in the screen pixels
                    width: 5px
        major_road_tertiary:
            filter:
                kind: 'major_road'
                kind_detail: 'tertiary'
            draw:
                lines:
                    color: [0.882, 0.835, 0.086, 1.00]
                    width: 3px

結果のマップには 3 つの異なる道路タイプがレンダリングされます。デフォルト カラーは灰色、二次道路は茶色、三次道路は黄色です。

3 種類の道路スタイルの
図 6. 3 種類の道路スタイルのマップ

階層化することでスタイルを変更することもできます。 次のスニペットは、二次道路でのトンネル レンダリング用の特定のルールを追加します。

スタイルがネストされている場合、すべてのスタイルプロパティが親から継承されます。

sources:
    omv:
        type: OMV
# global description of the map, in this example
# the map background color is white
scene:
    background:
        color: [1.000, 1.000, 1.000, 1.00]

# section contains the style information for the layers
# that are present on the map
layers:
    # user defined name of the rendering layer
    water_areas:
        # the section defines where the rendering layer takes
        # its data from source: omv is mandatory for the Vector Tile API
        # layer: water specifies what vector layer is taken
        # for the rendering see REST API documentation for the
        # list of available layers.
        data: {source: omv, layer: water}
        # section defines how to render the layer
        draw:
            polygons:
                order: 1 # z-order of the layer
                color: [0.055, 0.604, 0.914, 1.00]
    road:
        data: {source: omv, layer: roads}
        draw:
            lines:
                order: 2
                color: [0.561, 0.561, 0.561, 1.00]
                # the width is set in the world meters
                width: 15
        major_road:
            # the filter section narrows down to what features of the
            # data layer the style must be applied to
            filter:
                kind: 'major_road'
                kind_detail: 'primary'
            draw:
                lines:
                    color: [0.882, 0.553, 0.086, 1.00]
                    # the width is set in the screen pixels
                    width: 5px
            tunnel:
                # the filter adds more specific rules to the
                # tunnel rendering
                filter:
                    is_tunnel: true
                draw:
                    lines:
                        color: [0.192, 0.882, 0.086, 1.00]
        major_road_tertiary:
            filter:
                kind: 'major_road'
                kind_detail: 'tertiary'
            draw:
                lines:
                    color: [0.882, 0.835, 0.086, 1.00]
                    width: 3px

上記の YAML 設定のトンネル サブセクションは、二次道路のトンネルの色を変更します。以下の画像を参照してください。

追加のトンネルスタイルのマップ
図 7. 追加のトンネルスタイルのマップ

破線

国境、鉄道、フェリー乗り場などのマップフィーチャーには破線が必要です。 スタイルlinesを使用すると、破線を簡単にレンダリングできます。 このプロパティ dash には、ダッシュパターンを記述する数値の配列が含まれています。 このプロパティの動作は、 HTML5 Canvas setLineDash の segments エレメントの動作と似ています。 次の例では、鉄道を破線で描画する特定のルールを追加します。

rail:
    filter:
        kind: 'rail'
    draw:
        lines:
            # define the dash period
            dash: [3, 3]
            # dash foreground color
            color: '#FFFFFF'
            # dash background color
            dash_background_color: '#FFAAAA'
            width: 8px
            # outline of the line
            outline:
                color: '#FFAAAA'
                width: .5px

上記の例のスタイル設定の道路セクションにスニペットを追加すると、下の図に示すように、鉄道がピンクで破線で表示されます。

鉄道マップの破線表示されました
図 8. 鉄道マップの破線表示

参照 :

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

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