UIビルディングブロックを追加する
このセクションでは、HERE SDKのサービスの一部としてすでに利用可能なさまざまなUI要素と関連するコードスニペットについて説明します。運転操作手順や運転操作アイコンアセットから、視覚的なルート表現まで、これらの要素をアプリケーションインターフェースに統合する方法を確認します。今後、再利用可能なUIビルディングブロックの追加が計画されています。
運転指示を取得する
Routeオブジェクトの各Sectionには、目的地に到達するためにユーザーが従う必要がある運転指示が含まれています。それぞれの右左折では、Maneuverオブジェクトに運転操作を実行する必要がある場所とアクションが含まれます。アクションは、「出発」などのアクションや「左折」などの指示を示す場合があります。
// Log maneuver instructions per route section.
List<Section> sections = route.getSections();
for (Section section : sections) {
logManeuverInstructions(section);
}// Log maneuver instructions per route section.
val sections: List<Section> = route.sections
for (section in sections) {
logManeuverInstructions(section)
}セクションごとの運転指示にアクセスするコードは次のとおりです。
private void logManeuverInstructions(Section section) {
Log.d(TAG, "Log maneuver instructions per route section:");
List<Maneuver> maneuverInstructions = section.getManeuvers();
for (Maneuver maneuverInstruction : maneuverInstructions) {
ManeuverAction maneuverAction = maneuverInstruction.getAction();
GeoCoordinates maneuverLocation = maneuverInstruction.getCoordinates();
String maneuverInfo = maneuverInstruction.getText()
+ ", Action: " + maneuverAction.name()
+ ", Location: " + maneuverLocation.toString();
Log.d(TAG, maneuverInfo);
}
}private fun logManeuverInstructions(section: Section) {
Log.d(TAG, "Log maneuver instructions per route section:")
val maneuverInstructions: List<Maneuver> = section.maneuvers
for (maneuverInstruction in maneuverInstructions) {
val maneuverAction: ManeuverAction = maneuverInstruction.action
val maneuverLocation: GeoCoordinates = maneuverInstruction.coordinates
val maneuverInfo: String = (maneuverInstruction.text
+ ", Action: " + maneuverAction.name
+ ", Location: " + maneuverLocation.toString())
Log.d(TAG, maneuverInfo)
}
}これは、ルート全体を書面で説明する運転指示リストを簡単に作成するのに役立ちます。たとえば、ManeuverAction列挙型を使用して、独自のルート検索エクスペリエンスを構築できます。

Screenshot: An example screen showing a route preview with maneuver instructions.
注 (HERE SDK for Android Navigate)ナビゲーション中の
Maneuver指示テキスト (maneuverInstruction.getText()) は、NavigatorまたはVisualNavigatorから取得された場合は空になります。これには、Routeインスタンスから取得された場合のローカライズされた指示のみが含まれます。ManeuverAction列挙型は、ナビゲーション中に視覚的なインジケーターを表示するために使用されることが想定されており、テキストによる指示は、移動を開始する前に運転指示をプレビューするリストに適しています。反対に、
maneuverInstruction.getRoadTexts()、maneuverInstruction.getNextRoadTexts()、maneuverInstruction.getExitSignTexts()は、ナビゲーション中に経路誘導運転操作の一部として表示されることを意図しているため、ManeuverがNavigatorまたはVisualNavigatorから取得された場合には空になりません。Routeインスタンスから取得した場合は、これらの属性は常に空になります。
注 (HERE SDK for Android Explore)属性
maneuverInstruction.getRoadTexts()、maneuverInstruction.getNextRoadTexts()、maneuverInstruction.getExitSignTexts()はナビゲーション中に経路誘導運転操作の一部として表示されることを目的としているため、Navigateなどのライセンスを持つユーザーのみが使用できます。Routeインスタンスから取得した場合は、これらの属性は常に空になります。
「APIリファレンス」では利用可能な運転操作アクションの概要を確認できます。
以下の表は、すべてのManeuverActionアイテムとプレビューの説明およびアセットの例をまとめたものです。HERE SDK 自体には運転操作アイコンが付属していないことに注意してください。アセットは、オープンソースのHERE Icon Libraryの一部として、さまざまな密度のSVGまたはソリッドPNGとして利用できます。
利用可能な運転操作アクションは、「APIリファレンス」に記載されている順序で並べ替えられています。
現時点では、LEFT_ROUNDABOUT_PASSとRIGHT_ROUNDABOUT_PASSのHEREアセットはSVGとしてのみ利用可能であり、一部の運転操作アセットはサブフォルダー「wego-fallback-roundabout」でのみ利用できます。
道路標識アイコンを取得する
iconProvider.createRoadShieldIcon(...)を使用すると、「A7」や「US-101」などの道路番号がマップ ビューにすでに表示されているように、非同期でBitmapを作成できます。
道路標識アイコンの作成はオフラインで行われ、インターネット接続は必要ありません。アイコンの作成に必要なデータは、Route自体から取得されますが、手動で入力することもできます。

Examples of road shield icons.
使用例はGitHubの「Rerouting」サンプルアプリの一部で確認できます。このアプリにはHERE SDK (Navigate) が必要ですが、IconProviderのコードは他のエディションでも使用でき、たとえば、ルートプレビューの一部として道路標識アイコンを表示できます。IconProviderの詳細については、「道路標識アイコンを取得する」の章を参照してください。
地図にルートを表示する
以下のコードスニペットは、出発地と目的地を含むルートの各座標間に描画されるMapPolylineを使用して地図にルートを表示する方法を示しています。
GeoPolyline routeGeoPolyline = route.getGeometry();
float widthInPixels = 20;
Color polylineColor = Color.valueOf(0, 0.56f, 0.54f, 0.63f);
MapPolyline routeMapPolyline = null;
try {
routeMapPolyline = new MapPolyline(routeGeoPolyline, new MapPolyline.SolidRepresentation(
new MapMeasureDependentRenderSize(RenderSize.Unit.PIXELS, widthInPixels),
polylineColor,
LineCap.ROUND));
} catch (MapPolyline.Representation.InstantiationException e) {
Log.e("MapPolyline Representation Exception:", e.error.name());
} catch (MapMeasureDependentRenderSize.InstantiationException e) {
Log.e("MapMeasureDependentRenderSize Exception:", e.error.name());
}
mapView.getMapScene().addMapPolyline(routeMapPolyline);val routeGeoPolyline: GeoPolyline = route.geometry
val widthInPixels = 20f
val polylineColor = Color(0f, 0.56.toFloat(), 0.54.toFloat(), 0.63.toFloat())
var routeMapPolyline: MapPolyline? = null
try {
routeMapPolyline = MapPolyline(
routeGeoPolyline, MapPolyline.SolidRepresentation(
MapMeasureDependentRenderSize(RenderSize.Unit.PIXELS, widthInPixels.toDouble()),
polylineColor,
LineCap.ROUND
)
)
} catch (e: MapPolyline.Representation.InstantiationException) {
Log.e("MapPolyline Representation Exception:", e.error.name)
} catch (e: MapMeasureDependentRenderSize.InstantiationException) {
Log.e("MapMeasureDependentRenderSize Exception:", e.error.name)
}
mapView.mapScene.addMapPolyline(routeMapPolyline)以下の最初のスクリーンショットは、追加の経由地のないルート、つまりルートセクションが1つだけのルートを示しています。出発地と目的地は、丸で囲まれた緑色のマップ マーカー オブジェクトで示されています。円で囲まれたオブジェクトを描画するコードはここには示されていませんが、興味があればサンプルのソースコードから確認できます。

Screenshot: Showing a route on the map.
2 番目のスクリーンショットは上記と同じルートを示していますが、赤丸で囲まれたマップ マーカー オブジェクトで示される 2 つの追加の STOPOVER 経由地があります。このため、ルートには3つのルートセクションが含まれています。

Screenshot: Showing a route with two additional waypoints.
stopoverで経由地を追加すると、ルートが複数のセクションに分割され、ルートはこれらのポイントを通過して、各ポイントで運転操作指示を生成するように強制されます。
内部的には、MapPolylineのレンダリングが非常に長いルート向けに最適化されていることに注意してください。たとえば、ズームレベルが高ければすべての座標をレンダリングする必要はありませんが、ズームレベルが低いとルート全体が表示されません。このためのアルゴリズムは公開されていませんが、基本原理はHEREのflexible-polylineオープンソースプロジェクトで見ることができます。
ルートにズームする
ユースケースによっては、計算されたルートにズームすると便利な場合があります。カメラクラスには、ルートが収まるようにビューポートを調整する便利なメソッドが用意されています。
GeoBox routeGeoBox = route.getBoundingBox();
// Set null values to keep the default map orientation.
camera.lookAt(routeGeoBox, new GeoOrientationUpdate(null, null));ここでは、ルートオブジェクトの囲みバウンディング ボックスを使用します。これを使用すると、カメラを即座に更新できます。指定されたバウンディング長方形がビューポートに正確に収まるように、カメラのズームレベルとターゲット ポイントが変更されます。さらに、方向を指定してさらに多くのカメラパラメーターを指定することもできます。ここではデフォルト値をそのまま使用します。lookAt()を呼び出すとビューが即座に変更されることに注意してください。
ほとんどのユースケースでは、アニメーションを使用してルートにズームすると、ユーザーエクスペリエンスが向上します。以下に、GeoBoxに50ピクセルの追加のパディングを加えてズームする例を示します。
private void animateToRoute(Route route) {
// The animation should result in an untilted and unrotated map.
double bearing = 0;
double tilt = 0;
// We want to show the route fitting in the map view with an additional padding of 50 pixels
Point2D origin = new Point2D(50, 50);
Size2D sizeInPixels = new Size2D(mapView.getWidth() - 100, mapView.getHeight() - 100);
Rectangle2D mapViewport = new Rectangle2D(origin, sizeInPixels);
// Animate to the route within a duration of 3 seconds.
MapCameraUpdate update = MapCameraUpdateFactory.lookAt(
route.getBoundingBox(),
new GeoOrientationUpdate(bearing, tilt),
mapViewport);
MapCameraAnimation animation =
MapCameraAnimationFactory.createAnimation(update, Duration.ofMillis(3000), new Easing(EasingFunction.IN_CUBIC));
mapView.getCamera().startAnimation(animation);
}CameraKeyframeTracksサンプルアプリでは、これがどのように見えるかを示しています。
ルートに交通情報を表示する
ルート上に交通状況を視覚化する方法については、交通流に沿ってポリラインをレンダリングする方法やカスタムの交通情報オーバーレイなど、「ルート上の交通状況を視覚化する」参照してください。
7 日前の更新
















































