カスタムマップスタイル

HERE SDK for Flutter は、カスタムマップスキームを読み込んでマップをカスタマイズするための柔軟なソリューションを提供します。

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

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

マップをカスタマイズする最も柔軟なソリューションは、 WYSIWYG HERE Style Editor で生成された設定ファイルを使用して独自のマップスタイルを作成することです。

注

Web ベースの Unified HERE Style Editor は、 HERE platform で利用できます。 Maps API for JavaScript (JSAPI)および バージョン 4.12.1.0 以降の HERE SDK と互換性があります。従来のデスクトップエディタで作成されたカスタムマップスタイルは、新しい HERE Style Editor 形式に移行する必要があります。 HERE の担当者に連絡して、レガシーエディションからの潜在的なスタイルの更新について相談してください。

スクリーンショット：カスタムマップ設定を表示している HERE Style Editor 。

HERE Style Editor を使用するには、次の手順に従います。

HERE platform でアカウントにサインアップします。
追加の詳細情報を入力して、アカウントの生成を確認して完了します。
HERE platform のランディングページにあるランチャメニューから HERE Style Editor を選択するか、またはサインイン後にこの直接リンクを使用します。
カスタマイズする既存の基本スタイルのいずれかを選択して、 HERE Style Editor の使用を開始します。
カスタマイズした内容をマップスタイルに適用します。
カスタマイズした地図スタイルを [ ファイル ] -> [ 地図のエクスポート ] の順に選択してローカルコンピューターにエクスポートし、 以下の説明に従ってアプリに読み込みます。

結果の JSON をプロジェクトの "assets" ディレクトリにコピーします。まだ追加されていない場合は、 Android Studio を使用してそのフォルダを追加できます ( プロジェクトを右クリック : [ 新規 ] -> [ フォルダ ] -> [ アセット ] フォルダ) を選択します。次のフォルダを手動で生成することもできます。/your_app/assets。このフォルダは、次の場所にも含める必要があります pubspec.yaml。

# The following section is specific to Flutter.
flutter:

  # Here we store our custom map styles.
  assets:
    - assets/

次のようにマップシーンにスタイルを読み込みます。

void loadCustomMapStyle() {
  File file = File("assets/custom-dark-style-neon-rds.json");
  String filePath = file.path;
  _hereMapController.mapScene.loadSceneFromConfigurationFile(filePath, (MapError? error) {
    if (error == null) {
      // Scene loaded.
    } else {
      print("Map scene not loaded. MapError: " + error.toString());
    }
  });
}

上記のスニペットでは、 Flutter File のクラスを使用 *.json して、ファイルが予期した場所に存在することを確認します。

スクリーンショット：カスタムマップスタイル設定の別の例。

カスタムマップスタイルを使用すると、アプリを他のマップアプリケーションと区別するのに非常に効果的です。また、マップスタイルをオンザフライで変更して、アプリの現在の状態に基づいてユーザーの注意を特定のマップ要素に移すこともできます。

注

GitHub でCustomMapStylesサンプルのアプリを見つけることができます。

さまざまなカスタムマップスタイル設定を示すスクリーンショットのコレクション。

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

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

注

これはこの機能のベータリリースであるため、バグがいくつか発生したり、予期しない動作が発生する可能性があります。関連する API は、非推奨プロセスなしで新しいリリースで変更されることがあります。

カスタムのラスタレイヤーを追加するに RasterDataSourceは、を作成する必要があります。 A RasterDataSource は、表示するラスタタイルデータのソースを表します。また、設定の変更も可能です。で RasterDataSourceConfiguration は、 URL 、タイリングスキーム、ストレージレベル、キャッシュパラメータなど、データソースの設定を指定できます。

最後に、MapLayerBuilderMapLayerを作成して、レンダリング可能なマップオーバーレイをマップに追加できます。

MapLayerVisibilityRange マップレイヤーを表示するズームレベルを指定するために使用します。
MapLayerPriorityを使用して、MapLayerの描画順序を指定します。
で MapContentType 表示するデータのタイプを指定するには、を使用 MapLayerします。

ラスタタイルイメージの場合 MapContentType.rasterImageは、を使用します。

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

注

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

次 RasterDataSource のようにを作成します。

RasterDataSource _createRasterDataSource(String dataSourceName) {
  // The URL template that is used to download tiles from the device or a backend data source.
  String templateUrl = "https://stamen-tiles.a.ssl.fastly.net/toner/{z}/{x}/{y}.png";
  // The storage levels available for this data source. Supported range [0, 31].
  List<int> storageLevels = [2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16];
  RasterDataSourceProviderConfiguration rasterProviderConfig =
      RasterDataSourceProviderConfiguration.withDefaults(templateUrl, TilingScheme.quadTreeMercator, storageLevels);

  // Raster tiles are stored in a separate cache on the device.
  String path = "cache/raster/toner";
  int maxDiskSizeInBytes = 1024 * 1024 * 128; // 128 MB
  RasterDataSourceCacheConfiguration cacheConfig = RasterDataSourceCacheConfiguration(path, maxDiskSizeInBytes);

  // Note that this will make the raster source already known to the passed map view.
  return RasterDataSource(_hereMapController.mapContext,
      RasterDataSourceConfiguration.withDefaults(dataSourceName, rasterProviderConfig, cacheConfig));
}

カスタムのラスタレイヤでは、独自のキャッシュディレクトリが使用されます。このキャッシュディレクトリは、ベクトルベースのマップデータで使用されるマップキャッシュとは独立している可能性があります。 API リファレンスを参照してください。

このコードでは、 Stamen Design のタイルソースを使用しています。このソースは、 3.0 ライセンスで CC の下で使用できます。データ自体は OpenStreetMap から取得されます。詳細については、 http://maps.stamen.com/#watercolor/12/37.7706/-122.3782 を参照してください。

OSM 標準スタイル形式に従う他のタイルソースを使用することもでき /zoom/x/y.pngます。は templateURL 次のようになります。

https://YourRasterTileService.com/{zoom}/{xTile}/{yTile}.png

ここでは、この値 zoom はマップの現在のズームレベルを表し、 xTile、yTile は水平および垂直のタイル番号を定義します。たとえば 'OSM の標準マップを表示するには ' 次のテンプレート URL を使用します

let templateUrl = "https://a.tile.openstreetmap.org/{z}/{x}/{y}.png"

HERE には、 OSM 形式に準拠するタイルサーバがさらに一覧表示されます。 HERE SDK はタイルサーバのみをサポートしています。ベクトルデータを提供するサーバーはサポートされていません。ベクトルベースのタイルは、 HERE Style Editor および埋め込みマップスタイルでのみ使用できます ( 上記を参照 ) 。

タイルソースを作成すると MapLayer 、を作成できます。

MapLayer _createMapLayer(String dataSourceName) {
  // The layer should be rendered on top of other layers.
  MapLayerPriority priority = MapLayerPriorityBuilder().renderedLast().build();
  // And it should be visible for all zoom levels.
  MapLayerVisibilityRange range = MapLayerVisibilityRange(0, 22 + 1);

  try {
    // Build and add the layer to the map.
    MapLayer mapLayer = MapLayerBuilder()
        .forMap(_hereMapController.hereMapControllerCore) // mandatory parameter
        .withName(dataSourceName + "Layer") // mandatory parameter
        .withDataSource(dataSourceName, MapContentType.rasterImage)
        .withPriority(priority)
        .withVisibilityRange(range)
        .build();
    return mapLayer;
  } on MapLayerBuilderInstantiationException {
    throw Exception("MapLayer creation failed.");
  }
}

最後 MapTileに、レイヤーを有効または無効にすることで、の表示範囲を制御できます。一意の名前も指定する必要があります。各 RasterDataSource は 1 回のみ作成できます。

String dataSourceName = "myRasterDataSourceTonerStyle";
_rasterDataSourceTonerStyle = _createRasterDataSource(dataSourceName);
_rasterMapLayerTonerStyle = _createMapLayer(dataSourceName);

_rasterMapLayerTonerStyle?.setEnabled(true);

結果のレイヤーは次のようになります。

スクリーンショット：マップビューの上部にスタンペンデザインのモノクロトナースタイルマップレイヤーが表示されます。

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

注

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

空のベースマップスタイルを使用しない場合は、基本となるマップスキームがラスターレイヤーのタイルがロードされるまで「輝き」ます。付属のアプリの例では、このような外観を示しています。

その他にも、調整できるパラメータがあります。

たとえば、アプリで複数のラスタレイヤーを使用している場合、MapLayerBuilderでレイヤーを作成するときに、読み込みの優先順位を定義できます。整数値を指定できます。値を大きくすると、値が小さいレイヤーの前にレイヤーがロードされます。この操作では、レイヤーがロードされた時間だけが制御され、によって MapLayerPriority レイヤーのレンダリング方法が制御されます。たとえば、 renderedLast() は、レイヤーが他のすべてのレイヤーの上にレンダリングされることを意味します。
透明なマップスタイルを表示するに rasterProviderConfig.hasAlphaChannel は、 true に設定します。
パラメータの詳細については 、 API リファレンスを参照してください。

地図のパン中に読み込み時間を短縮する別のオプションとして、機能の設定を調整することもできます。

カスタムマップスタイル

カスタムマップスタイル