カスタムマップスタイル

HERE SDK for Android には、地図をカスタマイズするための 2 つの柔軟なソリューションがあります。

  • 専用の WYSIWYG エディタを使用して作成できるカスタムマップスタイル。
  • 外部ソースからマップスタイルの上にロードできるカスタムのラスタレイヤ。

定義済みのマップスタイルを検索する 場合は、クイックスタートガイドの概要を参照してください。 HERE SDK には MapStyle.NORMAL_DAY 、またはなどの事前に設定されたマップスタイルのセットがすでに付属 MapStyle.SATELLITEしています。

カスタムマップスタイルを作成して読み込む

マップをカスタマイズする最も柔軟なソリューションは、 YAML マークアップ形式で記述された設定ファイルを使用して独自のマップスタイルを作成することです。 このようなファイルは 、 HERE が提供する WYSIWYG マップスタイルエディタを使用して生成できます。 ログインには、 HERE Credentials (access_key_id/access_key_secret) を使用してください。

スクリーンショット: HERE のオンライン地図スタイルエディタで地図をカスタマイズします。

次の例は、 HERE Vector Tile API によって提供されるウォーターレイヤーのレンダリング方法を定義する単純なマップスタイルを示しています。 Vector タイル API で使用できるレイヤーの詳細についてLayers は、 Vector タイル API のドキュメントのセクションを参照してください。

# Global description of the map. In this example
# the map background color is white.
sources:
  omv:
    type: OMV
scene:
  background:
    color: 'rgb(255, 255, 255)'

# This section contains the style information for the layers
# that are present on the map.
layers:
  # User defined name of the rendering layer.
  water_areas:
    # This 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 rendering.
    data:
      source: omv
      layer: water
    # This section defines how to render the layer.
    draw:
      polygons:
        order: 1 # z-order of the layer
        color: 'rgb(153, 206, 255)'

上記のマップスタイルでは、マップシーンの背景色と、 water_areas Vector タイル API water のレイヤーからビジュアル化に最適化した地図データをレンダリングする方法を記述するという名前のスタイルが定義されています。

このカスタムマップスタイルを マップスタイルエディタに貼り付け て、必要に応じて調整できます。

問題がなければ、テキストファイルに YAML マップスタイルの説明を保存し、プロジェクトの「 assets 」ディレクトリに配置します。 まだ追加されていない場合は、 Android Studio を使用してそのフォルダを追加できます ( プロジェクトを右クリック : [ 新規 ] -> [ フォルダ ] -> [ アセット ] フォルダ) を選択します。 次のようにファイルをマップ シーンに読み込みます。

private void loadCustomMapScene() {
    // Place the style in to the "assets" directory.
    // Full path example: app/src/main/assets/mapstyle.yaml
    // Adjust file name and path as appropriate for your project.
    String fileName = "mapstyle.yaml";
    AssetManager assetManager = context.getAssets();
    try {
        assetManager.open(fileName);
    } catch (IOException e) {
        Log.e(TAG, "Error: Map style not found!");
        return;
    }

    mapView.getMapScene().loadScene("asset:///" + fileName, new MapScene.LoadSceneCallback() {
        @Override
        public void onLoadScene(@NonNull MapScene.ErrorCode errorCode) {
            if (errorCode != null) {
                Log.d(TAG, "onLoadScene failed: " + errorCode.toString());
            }
        }
    });
}

HERE SDK から YAML ファイルにアクセスする必要があるため、ファイルをに渡すときに、 "asset://"-protocol" を追加してください loadScene()。 上記のスニペットでは、 Android を使用 AssetManager して、ファイルが予期した場所に存在することを確認しています。

以下のスクリーンショットは、上記の YAML マップスタイルの例がデバイスでどのように表示されるかを示しています。

スクリーンショット: 水のみを表示するカスタムマップスタイル設定を読み込んだ後のマップ。

カスタムマップスタイルを使用すると、アプリを他のマップアプリケーションと区別するのに非常に効果的です。 また、地図のスタイルをオンザフライで変更して、アプリの現在の状態に基づいて特定の地図要素にユーザーの注意を向けることもできます。 レイヤー数が多すぎると、パフォーマンスの低下が生じる可能性があります。 同様に、展開された建物を無効にするなど、ローエンドデバイスのパフォーマンスを向上させるために、適応したマップスタイルを使用できます。

カスタムマップスタイルを作成する方法の詳細について は、マップスタイルエディタのオンラインドキュメントを参照してください。

カスタムのラスターレイヤーを読み込む

マップの外観をカスタマイズするもう 1 つの方法は、 HERE マップスタイルの上に独自のラスタータイルサービスを追加することです。 これは、世界の選択した領域の上にオーバーレイとして表示するタイルをホストする独自のサーバー、または OpenStreetMap などのパブリックタイルサーバーにすることができます。 完全に不透明で透明なマップ タイルオーバーレイがサポートされています。 複数のラスターレイヤを同時にマップに追加することもできます。

URL の形式は次のとおりです。 https://YourRasterTileService.com/zoom/xTile/yTile.png

HERE 。 zoom この番号はマップの現在のズーム レベルを表し xTileyTile タイルの水平および垂直の番号を定義します。詳細については 、 OSM の標準スタイルを参照してください。

ピンチ、回転、ズームなどの既定のマップジェスチャ操作は、 HERE Vector Mapの場合と同様にラスタータイルでも動作しますが、いくつかの違いがあります。 たとえば、ラスタータイルはビットマップとしてロードされるため、ラスターマップ タイルを回転すると、タイルに含まれているすべてのラベルおよび道路名が回転します。

カスタムマップスタイルまたは デフォルトのマップスタイルを使用してマップ シーンをロードする場合、マップ情報が頂点とパスで構成されるベクターデータとして表されるベクタータイルを使用してマップがレンダリングされ、スケーラビリティとパフォーマンスが向上します。 これとは対照的に、ラスタータイルは定期的に正方形で配置され、ピクセル情報のみを表すビットマップイメージで構成されています。 衛星マップスタイルもラスターベースであることに注意してください。

以下に、マップスタイルの上にカスタムラスタレイヤを読み込む方法の例を示します。

  String myCustomRasterLayerName = "my_custom_raster_layer";
  long maxZoom = 19;
  long drawOrder = 1000;
  TileServerProvider staticTileServerProvider = new SimpleTileServerProvider("https://a.tile.openstreetmap.org/{z}/{x}/{y}.png");

  RasterLayer rasterLayer = new RasterLayer(
          myCustomRasterLayerName,
          maxZoom,
          drawOrder,
          staticTileServerProvider);

  mapSceneConfig = new MapSceneConfig();
  mapSceneConfig.rasterLayers.add(rasterLayer);
  mapSceneConfig.customMapLayers.put(myCustomRasterLayerName, LayerState.ENABLED);

  mapView.getMapScene().loadScene(MapStyle.EMPTY, mapSceneConfig, new MapScene.LoadSceneCallback() {
      @Override
      public void onLoadScene(@Nullable MapScene.ErrorCode errorCode) {
          if (errorCode != null) {
              Log.d(TAG, "onLoadScene failed: " + errorCode.toString());
          }
      }
  });

SimpleTileServerProvider TileServerProvider インターフェイスを実装します。 実行時にプロバイダを切り替える場合は、独自の実装を指定できます。 たとえば、この機能を使用 SimpleTileServerProvider すると、世界中のリージョンに基づいて異なるラスタレイヤソースを使用できます。は、静的プロバイダを設定する便利な実装です。

上記の例では、 OpenStreetMap の標準タイルレイヤーのドイツ版フォークを使用RasterLayer しています。このレイヤーは、 0 ~ 19 のズームレベルをサポートしています。 描画の順序を指定することもできます。 そのためには、ほとんどの HERE SDK マップ項目で使用されている既定値を選択するだけです。 描画順を設定することで、ラスタレイヤを他のマップ項目の下または上に表示するかどうかを指定できます。 既定値の 1000 を選択すると、既定のマップスタイルの上にラスタレイヤーが描画されます。

上記の例では MapStyle.EMPTY、 OpenStreetMap タイルが完全に不透明であるために選択しまし MapStyle.EMPTY た。パン中に他のマップ データをロードすることはありません。空の YAML マップスタイルファイルで構成されています。

URL に構文エラーが含まれている場合、または コールバックに到達できない場合、LoadSceneCallbackはエラーを示しません。 が完了すると、最初のタイルのロードが開始され、カスタムのラスタレイヤーが既知のレイヤーのリストに追加されます。 カスタムサービスが、ズーム レベルとタイルの特定の組み合わせのタイルビットマップをホストしていない場合 MapStyle 、カスタムのラスタタイルはレンダリングされず、指定したビットマップが再び表示されます。

カスタムラスタレイヤの主な利点の 1 つは、カスタムタイルソースを上に配置して HERE マップスタイルを簡単に拡張できることです。たとえば、天気データやマップの上に表示したいその他のデータを表示できます。 透明なタイルを使用すると、この効果が向上します。 不透明なラスタタイルソースを使用する場合は、上記の例に示すように、ラスタベースのマップスタイルまたは空のマップスタイルと組み合わせることをお勧めします。

シーンが読み込まれると、次のコードでカスタムラスタレイヤーの表示範囲を制御できます ( HERE ではレイヤーを非表示にします ) 。

try {
    mapView.getMapScene().setLayerState(myCustomRasterLayerName, LayerState.DISABLED);
} catch (MapScene.MapSceneException e) {
    Log.d(TAG, "setLayerState failed: " + e.getMessage());
}

新しいレイヤー状態の設定は同期的に実行されますが、以前にロードしておく必要がある有効なマップ シーンが必要です。 また、新しいマップ シーンの読み込み中に新しいレイヤーの状態を設定すると、例外が発生する可能性があります。

新しいレイヤー状態を設定することで MapLayer 、マップスタイルの上に他のオーバーレイを表示することもできます。 たとえば、リアルタイムのトラフィックフローを示すようにマップ レイヤーをイネーブルにできます。 この例については、「交通状況」セクションを参照してください。

ご自身のアプリでカスタムタイルサーバーを使用する前に、ご希望のタイルサービスに適用される使用条件を満たしていることを確認してください。

スクリーンショット: OpenStreetMap.org のラスタタイルと HERE のマップマーカー。

上記のスクリーンショットでは、カスタムのラスタタイルを他の HERE SDK 機能と簡単に組み合わせることができます。 この例では MapMarker、 OpenStreetMap タイルサーバーからのタイルデータの上に複数のインスタンスをレンダリングします。

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

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