カスタムマップスタイル

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

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

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

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

Web ベースの 統合された 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 を使用するには、次の手順に従います。

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

結果の 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 して、ファイルが予期した場所に存在することを確認します。

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

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

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

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

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

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

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

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

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

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

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

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

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

次のように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.withUrlProviderAndDefaults(
          TilingScheme.quadTreeMercator, storageLevels, TileUrlProviderFactory.fromXyzUrlTemplate(templateUrl));

  // 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));
}

必要に応じて、 次のようなtemplateUrl のコールにフックすることもできます。

RasterDataSourceProviderConfiguration rasterProviderConfig =
    RasterDataSourceProviderConfiguration.withUrlProviderAndDefaults(TilingScheme.quadTreeMercator, storageLevels,
        (int x, int y, int level) {
  return "https://stamen-tiles.a.ssl.fastly.net/toner/$level/$x/$y.png";
});

後者の場合、各タイルリクエストをリッスンするオプションが提供され、たとえば、必要に応じて、リクエストされたタイルをより詳細に制御できます。

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

このコードでは 、 Stamen Design のタイル ソースを使用 しています。このソースは、 CC BY 3.0 ライセンスの下で使用できます。 データ自体は 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 はマップの現在のズーム レベル を表し、 xTileyTile は水平および垂直のタイル 番号を定義します。 たとえば OSM の標準マップを表示するには、次の テンプレート URL を使用します

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

ここには、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);

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

スクリーンショット : マップ ビュー の上部にStamen Designのモノクロのスタイルマップ レイヤー を表示。

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

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

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

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

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

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

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

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