HERE Maps API for Javascript を使用すると、 WebGL レンダリングエンジンを使用して、 HERE Vector Tile API によって提供されるベクターデータを簡単にレンダリングできます。 Maps API for JavaScript には、マップの実行時にマップスタイルおよびマップフィーチャの表示 / 非表示を操作するための、定義済みのベース マップスタイルおよびファシリティメソッドが用意されています。
// Create a Platform object (one per application):var platform =newH.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 =newH.Map(document.getElementById('mapContainer'),
defaultLayers.vector.normal.map);
このコードを実行すると、次のイメージが作成されます。
スタイル情報の検索
マップの有効期間中にスタイル情報を照会および変更して、新しいビジネスルールに従ってフィーチャを強調表示したり、アプリケーションで現在必要とされていないレイヤを削除したりできます。 Maps API for JavaScript omv H.service.omv.Provider は、次のメソッドを使用して実行時にマップスタイルを変更します。
// Assuming that the platform and map were initialized, and// the map uses vector base layer// get the OMV provider from the base layervar provider = map.getBaseLayer().getProvider();// get the style object for the base layervar 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" statevar 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);
カスタムマップスタイル - 簡単な紹介
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,inthis 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 RESTAPI 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 layervar baseLayer = map.getBaseLayer();
baseLayer.getProvider().setStyle(newH.map.Style(style));
次の図は、結果を示しています。
デフォルトのスタイル
前のセクションでは、スタイルpolygonを使用して水路をレンダリングしました。また、 HERE Maps API for Javascript では、直線、点、およびテキストのレンダリングに次のスタイルが提供されています。
points - ジオスペース内のポイントジオメトリ ( 例 : ロードシールド、 POI アイコンなど )
sources:omv:type:OMV
# global description of the map,inthis 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 RESTAPI 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:2color:[0.561,0.561,0.561,1.00]width:15
関連付けられているプロパティに基づいてマップフィーチャをフィルタリングできます。 前のセクションでは、道路ネットワークが灰色で表示されていたため、地図の読み取りが困難でした。 道路の道路ネットワーク属性と ベクタータイルの style 属性では、道路の重み付けが異なります。 使用可能なプロパティの一覧については、「 HERE Vector Tile API 」を参照してください。 以下のスニペットで 、新しいmajor_roadサブセクションがroadセクションに追加されました。 このサブセクションでは、 filter 属性を使用してマップ機能を絞り込みます。
sources:omv:type:OMV
# global description of the map,inthis 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 RESTAPI 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:2color:[0.561,0.561,0.561,1.00]
# the width is setin the world meters
width:15major_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 setin the screen pixels
width: 5px
sources:omv:type:OMV
# global description of the map,inthis 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 RESTAPI 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:2color:[0.561,0.561,0.561,1.00]
# the width is setin the world meters
width:15major_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 setin 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
sources:omv:type:OMV
# global description of the map,inthis 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 RESTAPI 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:2color:[0.561,0.561,0.561,1.00]
# the width is setin the world meters
width:15major_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 setin the screen pixels
width: 5px
tunnel:
# the filter adds more specific rules to the
# tunnel rendering
filter:is_tunnel:truedraw: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
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