この記事は Developer Advocate の Alex Muramoto による Google Cloud Blog の記事 "Announcing Advanced Polylines for the Maps SDKs for Android" を元に翻訳・加筆したものです。詳しくは元記事をご覧ください。

デベロッパーによる Google マップの基本地図のスタイル設定とカスタマイズを可能にする継続的な取り組みの一環として、この度、Maps SDK for Android 向けの高度なポリラインのスタイル設定の提供を開始することを発表します。この機能は、現在 Google が提供しているポリライン機能の上に構築されています。デベロッパーはこの機能を使って、地図上に表示される定型の線を作成できます。こうした定型の線は、経路、パレードルート、通行止めなどの情報を表すためによく使用されます。ポリラインは、Google Maps Platform のデベロッパーが、ユーザー向けに地図をカスタマイズする際に最もよく使う機能の一つです。

高度なポリラインのスタイル設定では、マルチカラー ポリライン、グラデーションのポリライン、スタンプ型ポリラインの 3 つの新しいポリラインのカスタマイズを導入することで、ポリラインのコア機能をより豊かに、表現力のあるものにできます。

高度なポリラインのスタイル設定は、最新のレンダラを有効にしたバージョン 18.1.0 以降の Maps SDK for Android とバージョン 5.2.0 の Maps SDK for iOS において、利用可能です。

マルチカラー ポリライン

マルチカラー ポリラインを使うと、ポリラインをセグメント化し、各セグメントに異なる色を適用して情報を表現することができます。このカスタマイズは、経路上のさまざまな情報を伝える、季節のキャンペーンで企業のブランディングに合わせる、あるエリアに注目を集めるなど、さまざまなユースケースで活用できます。

マルチカラー ポリラインを使用するには、`StyleSpan` オブジェクトを作成し、`addSpan()` または `addSpans()` メソッドを `PolylineOptions` に追加します。デフォルトでは、配列の各アイテムが対応する線分の色に設定されます。次の例では、セグメントの色を設定して、緑と紫(マゼンタ)のセグメントを持つポリラインを作成しています。

 Polyline line = map.addPolyline(new PolylineOptions()

        .add(new LatLng(37.789258, -122.387819),

          new LatLng(37.786572, -122.390556),

          new LatLng(37.786140, -122.390899))

        .addSpan(new StyleSpan(Color.MAGENTA))

        .addSpan(new StyleSpan(Color.GREEN))

      );

グラデーションのポリライン

グラデーションのポリラインは、ポリライン全体に 2 色のグラデーションを適用します。交通の流れや標高の変化など、強弱の変化を表現するのに便利です。

グラデーション ポリラインを使用するには、ポリラインの開始色と終了色を設定する 2 つの 32 ビットの ARGB(alpha、red、green、blue)値を指定してグラデーションを定義し、次に `PolylineOptions.addSpan()` を呼び出して、このプロパティを図形のオプション オブジェクトに設定します。

以下は、サンフランシスコからランチョ コラール デ ティエラまでのグラデーション ポリラインを作成する例です。

 Polyline line = map.addPolyline(new PolylineOptions()

        .add(new LatLng(37.662953, -122.400542), new LatLng(37.5414277, -122.4845455))

        .addSpan(new StyleSpan(StrokeStyle.gradientBuilder(Color.GREEN, Color.RED).build())));

スタンプ型ポリライン

スタンプ型ポリラインを使うと、選択したビットマップ画像を繰り返し使ってポリラインを作成できます。これにより、図形とポリラインの外観のカスタマイズが可能になります。

スタンプ型ポリラインを使用するには、`TextureStyle` の `StampStyle` を作成して、ポリラインの外観をビットマップ テクスチャの繰り返しに設定します。このプロパティは、`PolylineOptions.addSpan()` を呼び出すことで、図形のオプション オブジェクトに設定できます。

 StampStyle stampStyle = TextureStyle.newBuilder(BitmapDescriptorFactory.fromResource(R.drawable.arrow)).build();

Polyline line = map.addPolyline(

new PolylineOptions()

.add(

new LatLng(37.789258, -122.387819), 

new LatLng(37.786572, -122.390556), 

new LatLng(37.786140, -122.390899))

.addSpan(new StyleSpan(StrokeStyle.colorBuilder(Color.BLUE).stamp(stampStyle).build()))

.addSpan(new StyleSpan(StrokeStyle.colorBuilder(Color.YELLOW).stamp(stampStyle).build()))

);

スタイル設定とカスタマイズ機能は、ユーザーにより良いマッピング サービスを提供し、重要な情報を伝え、独自の地図を作り上げるために、最適かつ最も簡単な方法の一つです。最近リリースしたクラウドベースのマップスタイル設定、データドリブンのスタイル設定、WebGL を活用したマップ機能などのスタイル設定やカスタマイズ機能はもちろんのこと、Google Maps Platform チームは、それぞれのニーズを満たす柔軟性を備えた素晴らしいマッピング サービスを提供するツールをお届けできるよう、取り組みを続けています。この新しい、マップ上のポリラインのカスタマイズとスタイル設定をぜひご活用ください。

Google Maps Platform に関する詳しい情報はこちらをご覧ください。ご質問やフィードバックはページ右上の「お問い合わせ」より承っております。


Posted by 丸山 智康 (Tomoyasu Maruyama) - Developer Relations Engineer