マップアイテムの追加
HERE SDK を使用すると、マップのポリラインやマーカーなど、複数の種類のアイテムをマップに追加できます。 詳細については、以下のセクションで説明します。 現在、次のマップアイテムがサポートされています。
- マップポリライン: 移動できないレンダリングされた直線。
- マップの矢印 : マップ上に矢印のアイコンを表示する便利な方法。
- ポリゴンのマップ : 移動できないレンダリングされたシェイプ。
- マップ
の円 : ジオポリゴンとして定義できる、移動できないレンダリングされた円。
- マップマーカー : マップ上の「マーク」固有のスポットに固定できる画像。
- マップ マーカーのクラスタリング : ズーム レベルに依存してクラスタ化できるマップマーカーのグループ。
- 組み込み POI: 公共交通機関、レストラン、 ATM 、その他の施設など、あらかじめ設定された選択可能な POI オブジェクトおよび埋め込みの Carto POIs がマップ上に表示。
- 3Dマップマーカー : 指定した地理座標でマップ上にレンダリングされた 3D シェイプ。
- フラットマップマーカー : マップと一緒に回転および傾斜するマップの平面マーカー。
- マップ 上の現在のデバイスの場所を示す位置情報インジケータの定義済みアセット。
- マップ ビューピン : ネイティブの iOS
UIView
レイアウトをマップに表示する便利な方法です。
ポリライン、ポリゴン、および円は現在のズーム レベルに基づいてサイズを調整しますが、マーカーおよびピンはズームしても変更されません。
すべてのマップアイテムを使用 すると、マップから簡単に選択できます。
マップポリラインの追加
ポリラインは、マップ上のルートジオメトリなどをレンダリングする場合に便利です。 次のように作成できます。
private func createMapPolyline() -> MapPolyline {
let coordinates = [GeoCoordinates(latitude: 52.53032, longitude: 13.37409),
GeoCoordinates(latitude: 52.5309, longitude: 13.3946),
GeoCoordinates(latitude: 52.53894, longitude: 13.39194),
GeoCoordinates(latitude: 52.54014, longitude: 13.37958)]
let geoPolyline = try! GeoPolyline(vertices: coordinates)
let lineColor = UIColor(red: 0, green: 0.56, blue: 0.54, alpha: 0.63)
let mapPolyline = MapPolyline(geometry: geoPolyline,
widthInPixels: 30,
color: lineColor)
return mapPolyline
}
MapPolyline
は 、次の 3 つの要素で構成されている
- マップ上でポリラインを配置する場所を定義する 2 つ以上の地理座標のリスト。
- この座標のリストを含む
GeoPolyline
。 DashPattern
やLineCap
などのスタイルパラメーターを使用して、ポリラインの表示方法を定義。
幾何学的な線は 2 つ以上の点で定義 されているため、配列を作成する必要があります。この配列には、少なくとも 2 つの点GeoCoordinates
が含まれている必要があります。 それ以外の場合は、例外がスローされます。 線の外観を変更するには、線の太さをピクセル単位および色単位で設定します。 スクリーンショットの例については、以下を参照してください。
1 つ以上のマップポリラインを作成した後、次のものを使用してそれらのマップをマップ シーンに追加できます。
mapScene = mapView.mapScene
mapPolyline = createMapPolyline()
mapScene.addMapPolyline(mapPolyline!)
マップポリラインインスタンスがすでにマップ シーンに添付されている場合、それ以上追加しようとすると無視されます。
スクリーンショット: ポリラインを表示。 マップ ビューでは 1 つのシーンのみが許可され、すべてのマップアイテムがそのシーンに直接配置されます。 マップアイテムをグループ化する場合は、配列を使用してマップアイテムを整理し、個別に追加または削除できます。
次のコールを使用すると、mapPolyline
をマップからただちに削除できます。
mapScene.removeMapPolyline(line)
注 :MapPolyline
アイテム は選択可能で、アイテムを選択するときに取得できるMetadata
を保存できます。 例については、以下のマップマーカーのセクションを参照してください。
アイテムのリストMapMeasureRange
を設定することで、現在のズームレベルに応じてMapPolyline
の表示/非表示を調整できます。
マップの矢印の追加
マップの矢印は MapPolyline
アイテムと似ており、任意の数のポイントを持つポリラインで構成されていますが 、矢印の先端が最後に表示されます マップの矢印は、 13 を超えるズームレベルでのみ表示されます。 ルートジオメトリの一部にレンダリングする場合など、マップ上の方向を示すのに便利です。
private func createMapArrow() -> MapArrow {
let coordinates = [GeoCoordinates(latitude: 52.53032, longitude: 13.37409),
GeoCoordinates(latitude: 52.5309, longitude: 13.3946),
GeoCoordinates(latitude: 52.53894, longitude: 13.39194),
GeoCoordinates(latitude: 52.54014, longitude: 13.37958)]
let geoPolyline = try! GeoPolyline(vertices: coordinates)
let lineColor = UIColor(red: 0, green: 0.56, blue: 0.54, alpha: 0.63)
let mapArrow = MapArrow(geometry: geoPolyline,
widthInPixels: 30,
color: lineColor)
return mapArrow
}
MapArrow
は 、次の 3 つの要素で構成されている
- マップ上でポリラインを配置する場所を定義する 2 つ以上の地理座標のリスト。
- この座標のリストを含む
GeoPolyline
。 color
またはなどのスタイルパラメーター widthInPixels
を使用して、矢印の表示方法を定義します。
幾何学的な線は 2 つ以上の点で定義 されているため、配列を作成する必要があります。この配列には、少なくとも 2 つの点GeoCoordinates
が含まれている必要があります。 それ以外の場合は、例外がスローされます。 線の外観を変更するには、線の太さをピクセル単位および色単位で設定します。 スクリーンショットの例については、以下を参照してください。
1 つ以上のマップ矢印を作成したら、次のものを使用してマップ シーンに追加できます。
mapScene = mapView.mapScene
mapArrow = createMapArrow()
mapScene.addMapArrow(mapArrow!)
マップの矢印インスタンスがすでにマップ シーンに添付されている場合、それ以上追加しようとすると無視されます。
スクリーンショット: マップの矢印を表示。 マップ ビューでは 1 つのシーンのみが許可され、すべてのマップアイテムがそのシーンに直接配置されます。 マップアイテムをグループ化する場合は、配列を使用してマップアイテムを整理し、個別に追加または削除できます。
次のコールを使用すると、mapArrow
をマップからただちに削除できます。
mapScene.removeMapArrow(arrow)
注 :MapArrow
アイテム は選択可能で、アイテムを選択するときに取得できるMetadata
を保存できます。 例については、以下のマップマーカーのセクションを参照してください。
マップポリゴンの追加
MapPolygon
は 、少なくとも 3 つの座標で構成されているシェイプです。そうでない場合は、レンダリングできません。 MapPolyline
と同様に、座標が接続されます。 ポリゴンは、マップ上の領域を強調表示するのに役立ちます。
注 : 座標の順序は重要です。
ポリゴンの作成方法については、以下の例を参照してください。 座標は、リスト内の時計回りの順序に基づいて接続されます。 結果のシェイプは、次の色で塗りつぶすことができます。
private func createMapPolygon() -> MapPolygon {
let coordinates = [GeoCoordinates(latitude: 52.54014, longitude: 13.37958),
GeoCoordinates(latitude: 52.53894, longitude: 13.39194),
GeoCoordinates(latitude: 52.5309, longitude: 13.3946),
GeoCoordinates(latitude: 52.53032, longitude: 13.37409)]
let geoPolygon = try! GeoPolygon(vertices: coordinates)
let fillColor = UIColor(red: 0, green: 0.56, blue: 0.54, alpha: 0.63)
let mapPolygon = MapPolygon(geometry: geoPolygon, color: fillColor)
return mapPolygon
}
MapPolygon
は 、次の 3 つの要素で構成されている
- マップ上でポリゴンを配置する場所を定義する 3 つ以上の地理座標のリスト。
- この座標のリストを含む
GeoPolygon
。 Color
を使用して、ポリゴンエリアの塗りつぶし色を定義します。
ポリゴンは 3 つ以上のポイントで定義されているため 、 3 つ以上のポイントGeoCoordinates
を含む配列を作成する必要があります。 それ以外の場合は、例外がスローされます。 スクリーンショットの例については、以下を参照してください。
マップポリゴンを使用して、複雑な塗りつぶしまたは塗りつぶしなしの図形を作成できます。 ただし、自己交差するポリゴンは、座標がリストの順序で結合されているため、望ましくない結果につながる可能性があります。 別の方法として、複数のポリゴンを追加することも、目的の図形のアウトラインに表示されている座標を追加することもできます。
マップのポリラインとは異なり、マップのポリゴンのアウトラインは、最後の座標と一覧表の最初の座標の間で自動的に接続されます。
1 つ以上のマップポリゴンを作成したら、次のものを使用してマップ シーンに追加できます。
mapPolygon = createMapPolygon()
mapScene = mapView.mapScene
mapScene.addMapPolygon(mapPolygon!)
マップポリゴンがすでにマップ シーンに添付されている場合、それ以上追加しようとすると無視されます。
スクリーンショット: ポリゴンの表示 マップ ビューでは 1 つのシーンのみが許可され、すべてのマップアイテムがそのシーンに直接配置されます。 マップアイテムをグループ化する場合は、配列を使用してマップアイテムを整理し、個別に追加または削除できます。
mapPolygon
をマップからただちに削除するには、次のコマンドを呼び出します。
mapScene.removeMapPolygon(area)
注 :アイテムMapPolygon
は選択可能 で、 アイテムを選択すると取得できるMetadata
を保存することができます。 例については、以下のマップマーカーのセクションを参照してください。
アイテムのリストMapMeasureRange
を設定することで、現在のズームレベルに応じてMapPolygon
の表示/非表示を調整できます。
マップに円を追加
円形の形状は、マップ上のエリアを強調表示したり、位置精度のハローを描画したり、マップ上の個別のスポットをマークしたりするのに役立ちます。円は、技術的には三角形のポリゴンのシーケンスとしてレンダリングされます。
このため、次 のものGeoCircle
を使用して、円をインスタンスMapPolygon
として作成できます。
private func createMapCircle() -> MapPolygon {
let geoCircle = GeoCircle(center: GeoCoordinates(latitude: 52.530932, longitude: 13.384915),
radiusInMeters: 300.0)
let geoPolygon = GeoPolygon(geoCircle: geoCircle)
let fillColor = UIColor(red: 0, green: 0.56, blue: 0.54, alpha: 0.63)
let mapPolygon = MapPolygon(geometry: geoPolygon, color: fillColor)
return mapPolygon
}
円はポリゴンの特殊なシェイプであるため 、前述のセクション MapPolygon
で示したように、円をマップ シーンに追加(または、削除)できます。
スクリーンショット: 円を表示。 マップマーカーの追加
マップのマーカーを使用して、マップ上の位置を正確にポイントできます。 マップのマーカーは、マップに表示されている他のものの上に常に描画されます。
次のコードでは、マップ マーカーがマップに追加されます。
guard
let image = UIImage(named: "here_car.png"),
let imageData = image.pngData() else {
print("Error: Image not found.")
return
}
let mapImage = MapImage(pixelData: imageData,
imageFormat: ImageFormat.png)
let mapMarker = MapMarker(at: geoCoordinates,
image: mapImage)
mapView.mapScene.addMapMarker(mapMarker)
この例では 、 PNG ("here_cah.png") からUIImage
を作成 し、MapImage
に変換します。 これ MapImage
を インスタンスMapMarker
に設定できます。
上記では、デフォルトのピクセルサイズで画像がロードされます。 MapImage(imageData: Data, imageFormat: ImageFormat, width: UInt32, height: UInt32)
を使用して、カスタムサイズを設定できます。
注
HERE SDK for iOS は、透明度のある、または透明度のない PNG リソース (PDF チャネル ) 、および UIImage
によってネイティブにサポートされている他のすべての一般的なビットマップリソース (PDF など ) をサポートしています。 オーバーロードされたコンストラクタを使用 すると、 SVG Tiny 形式でグラフィックを読み込むことができます。
静的なイメージアセットとは対照的に、 SVG アセットは、 SVG アセットの XML コンテンツのみを更新する必要があるため、さまざまなコンテンツを表示するのにも役立ちます。 静的な画像アセットと SVG アセットは、その場で更新できます。 代わりに、より複雑なコンテンツについては、MapViewPins
を使用することをお勧めします ( 以下を参照 ) 。
イメージを表示するには、MapMarker
をマップ シーンに追加する必要があります。 MapImage
は、提供されたgeoCoordinates
の中央に表示されます。
スクリーンショット: ランダムに配置されたマップイメージを表示。 上にある赤いマップの円は、マーカーの位置を表示。 マーカーがマップに追加された後で、geoCoordinates
を更新することもできます。 プロパティmapMarker.coordinates
が更新されると、ただちに新しい場所に表示されます。
注
マップマーカーがマップに追加される時系列の順序によって、どのマーカーが最初にレンダリングされるかが決まります。 これは、明示 的な描画順序を設定することで調整できます。
MapMarker を削除する場合は、次のように呼び出します。
mapView.mapScene.removeMapMarker(mapMarker)
一度にタイプ[MapMarker]()
のマップマーカーのリストを削除することもできます。
mapView.mapScene.removeMapMarkers(mapMarkers)
同様に、addMapMarker(mapMarkers)
を使用してバッチ呼び出しで複数のマップマーカーを追加できます。
HERE SDK で MapMarker
は、アイテムのカスタマイズ性の高いアニメーションサポートも提供されています。 フェードインのアニメーションは、次の 1 行のコードで適用できます。
let durationInSeconds: TimeInterval = 3
mapMarker.fadeDuration = durationInSeconds
マーカーがMapView
に追加または削除されるたびに、アニメーションがフェードインまたはフェードアウトします。 アニメーションは、マーカーがビューポイント に戻されたとき、つまりマップをパンすることでマーカーが再び表示されたときにも再生されます。
クラスMapMarkerAnimation
では、マーカーの移動などの高度なカスタムアニメーションを使用できます。
アイテムのリストMapMeasureRange
を設定することで、現在のズームレベルに応じてMapMarker
の表示/非表示を調整できます。
さらに、不透明度の値を設定してマーカーを透明にするなど、より多くの機能を使用できます。
アンカー付き POI マーカー
デフォルトでは、各画像は指定した位置にセンタリングされており、一部の種類のマーカーでこの設定を変更できます。 POI マーカーの例としては、通常、下中央の位置を指す POI マーカーがあります。
そのため、画像をレンダリングする場所をシフトする必要があります。 デフォルトの中心は (0.5 、 0.5) です。 ビューの右下隅が設定した位置GeoCoordinates
を指すようにする場合は、アンカーポイントを (1,1) に設定する必要があります。
アンカーポイントを使用すると、マーカーをレンダリングする場所を簡単に指定できます。 左上隅は (0,0) のアンカーポイントに相当し、右下隅は (1,1) のアンカーポイントに相当します。 ビューの大きさに関係なく、幅または高さの半分のポイントは常に 0.5 になります。これは、正規化されたテクスチャ UV 座標の概念に似ています。
図 : 正規化されたアンカーポイントでは、マップ マーカーの内部または外部の任意の場所を指定可能。 POI をその場所をポイントするようにシフトする場合は、デフォルトの中央の位置( 0.5 )を維持できますが、画像を 1 つ上にシフトする必要があります。 1 は画像の高さと同じ長さになります。 1 より大きい値、または 0 より小さい値を指定して、イメージを任意の場所に移動することもできます。 2 は画像の高さの 2 倍を表します。
アンカー付き POI マーカーをマップに追加するには、以下の例を参照してください。
guard
let image = UIImage(named: "poi.png"),
let imageData = image.pngData() else {
print("Error: Image not found.")
return
}
let anchorPoint = Anchor2D(horizontal: 0.5, vertical: 1)
let mapMarker = MapMarker(at: geoCoordinates,
image: MapImage(pixelData: imageData,
imageFormat: ImageFormat.png),
anchor: anchorPoint)
mapView.mapScene.addMapMarker(mapMarker)
上記の例では、「 poi.png 」という名前のカスタム POI 画像が、プロジェクトのアセットカタログに異なる解像度で追加されています。 iOS プラットフォームは、デバイスの表示密度に基づいて適切な画像解像度を選択します。 この方法については、付属のサンプルアプリを参照してください。
スクリーンショット: ランダムに配置されたマップマーカーを表示。赤いマップの円は、マーカーのアンカー位置を表示。 ポリラインとは異なり、マップ MapImage
のズームインまたはズームアウト量に関係なく、各マップのサイズが保持されます。
マップマーカーの選択
マップにマップマーカーを追加した後、タップジェスチャデリゲートを使用して、ユーザーがマップ マーカーをタップしたかどうかを確認できます。
func onTap(origin: Point2D) {
mapView.pickMapItems(at: origin, radius: 2, completion: onMapItemsPicked)
}
func onMapItemsPicked(pickedMapItems: PickMapItemsResult?) {
guard let topmostMapMarker = pickedMapItems?.markers.first else {
return
}
showDialog(title: "Map marker picked:", message: "Location: \(topmostMapMarker.coordinates)")
}
クラスは TapDelegate
プロトコルに準拠する必要があります。また、 TAP イベントを受け取るには、クラスをデリゲートとして設定する必要があります。 タップジェスチャが認識されたら、潜在的なアイテムを選択するための完了ハンドラを設定する必要があります。
注
HERE SDK では、ジェスチャイベントなどの繰り返し発生するイベントにプロトコルが使用されます。 1 つのイベントのみを処理する必要がある場合は、完了ハンドラの形式でコールバック関数を使用する必要があります。
タップジェスチャが検出されるとすぐに、画面上のタップされた位置のビュー座標を使用して、その位置を囲むマップマーカーをマップ ビューに要求できます。 ほとんどの場合、半径を 2 ピクセルに指定するのが適切です。 次に、PickMapItemsResult
で検出されたマップアイテム、MapPolyline
またはMapMarker
などへのアクセスを提供します。
注
同じタイプのアイテムを選択する場合 ===
、 - 演算子を使用してインスタンスを比較できます。
多くの場合、ユーザーは表示されているマーカーと対話したい場合があります。たとえば、検索結果をタップして、レストランの詳細を確認できます。 この目的のために、MapMarker
はクラスMetadata
のインスタンスを保持できるので、さまざまな種類のデータをクラスに添付できます。カスタムタイプもサポートされています。
Metadata
は、複数のキー / 値のペアを保持できます。 以下では、"key_poi"
という名前の新しいキーを作成し マーカーのタイプに関する情報を含む値としてString
を設定します。
let metadata = Metadata()
metadata.setString(key: "key_poi", value: "This is a POI.")
mapMarker.metadata = metadata
必要に応じて、任意の情報を設定できます。 インスタンスMetadata
の内容を読み取る瞬間に、キーに保存されているデータを要求するだけです。この例"key_poi"
を次に示します。
if let message = topmostMapMarker.metadata?.getString(key: "key_poi") {
showDialog(title: "Map Marker picked", message: message)
return
}
デフォルトでは、 MapMarker
インスタンスには Metadata
が含まれておらず、 topmostMapMarker.metadata
nil
含まれている場合もあります。 オブジェクトMetadata
にそのような情報が含まれていない場合、キーによってアクセスされるデータは、nil
になることもあります。
存在する場合は、格納されているキー"key_poi"
String
を探し、ヘルパーメソッドを呼び出して、格納されているString
をユーザーに提示します。 設定に基づいて任意の文字列をキーとして選択できますが、一意のキーを使用するか、または別のデータアイテムに保存されているコンテンツを上書きします。 サンプルのソースコード全体を確認 するには、 MapMarker のサンプルアプリを確認してください。
注
CustomMetadataValue
インターフェイスを使用して、Metadata
にカスタムオブジェクトを保存することもできます。 検索 結果データオブジェクト全体が保存されている [ 検索 ] セクションに例があります。
マップ マーカークラスターの追加
ズーム レベルによっては、複数のアイテム MapMarker
を重ねることができます。 クラス MapMarkerCluster
を使用すると、複数のアイテムMapMarker
をグループ化して視覚的な乱雑さを軽減できます。 オーバーラップしているマーカーは、単一の画像表現に置き換えられます。 このようなクラスタイメージは選択でき、その中に含まれているマーカーのみが含まれます。
次のコードは、複数のMapMarker
アイテムを含むクラスタを作成する方法を示しています。
guard
let image = UIImage(named: "green_square.png"),
let imageData = image.pngData() else {
print("Error: Image not found.")
return
}
let clusterMapImage = MapImage(pixelData: imageData,
imageFormat: ImageFormat.png)
var counterStyle = MapMarkerCluster.CounterStyle()
counterStyle.textColor = UIColor.black
counterStyle.fontSize = 40
counterStyle.maxCountNumber = 9
counterStyle.aboveMaxText = "+9"
let mapMarkerCluster = MapMarkerCluster(imageStyle: MapMarkerCluster.ImageStyle(image: clusterMapImage),
counterStyle: counterStyle)
mapView.mapScene.addMapMarkerCluster(mapMarkerCluster)
mapMarkerClusters.append(mapMarkerCluster)
var index = 1
for _ in 1...10 {
let indexString = String(index)
mapMarkerCluster.addMapMarker(marker: createRandomMapMarkerInViewport(indexString))
index = index + 1
}
複数の重複するマップマーカーのクラスタを表すために使用するMapImage
を設定できます。
なお、MapMarker
はすでにマップ上に表示されているMapMarkerCluster
に対して追加・削除することができます。すべてのマーカーを含むクラスタを削除する場合は、次の呼び出しを行います。
mapView.mapScene.removeMapMarkerCluster(mapMarkerCluster)
クラスタに含まれているアイテムMapMarker
は、pickMapItemsResult.markers
の一部ではありません。 そのため、pickMapItems()
のコールから選択結果を受け取った後、以下に示すコードを使用してそれらを個別に選択できます (セクションMapMarker
を参照)。
if let groupingList = pickedMapItems?.clusteredMarkers {
handlePickedMapMarkerClusters(groupingList)
}
...
private func handlePickedMapMarkerClusters(_ groupingList: [MapMarkerCluster.Grouping]) {
guard let topmostGrouping = groupingList.first else {
return
}
let clusterSize = topmostGrouping.markers.count
if (clusterSize == 0) {
return
}
if (clusterSize == 1) {
let metadata = getClusterMetadata(topmostGrouping.markers.first!)
showDialog(title: "Map Marker picked", message: "This MapMarker belongs to a cluster. Metadata: \(metadata)")
} else {
var metadata = ""
for mapMarker in topmostGrouping.markers {
metadata += getClusterMetadata(mapMarker)
metadata += " "
}
let metadataMessage = "Contained Metadata: " + metadata + ". "
showDialog(title: "Map marker cluster picked",
message: "Number of contained markers in this cluster: \(clusterSize). \(metadataMessage) Total number of markers in this MapMarkerCluster: \(topmostGrouping.parent.markers.count)")
}
}
private func getClusterMetadata(_ mapMarker: MapMarker) -> String {
if let message = mapMarker.metadata?.getString(key: "key_cluster") {
return message
}
return "No metadata."
}
このコードを使用すると、クラスタが選択されたかどうかを検出し、含まれているマーカーをユーザーに通知できます。 markers
リストに 1 つのアイテムのみが含まれている場合は、 1 つのMapMarker
インスタンスを指定することもできます。
複数のマップ マーカー クラスタ。 数値は、含まれているマーカーを表示。 通常、必要なインスタンスMapMarkerCluster
は 1 つだけです。このインスタンスを超えると、最上位のクラスタのみが処理されます。
マーカーの距離に応じて、同じインスタンス MapMarkerCluster
に複数のクラスタイメージを表示できます。各イメージには、クラスタ化されたマーカーの合計数のサブセットが含まれています。
GitHub の例については、 MapItems アプリを参照してください。
埋め込み POIの選択
埋め込み POI は、事前設定されており、デフォルトで MapView
に表示されるcarto POI マーカーです。MapMarker
アイテムとは異なり、アイテムの内容や外観は HERE Style Editor の使用が必要です。 ただし、このようなアイコンをタップして、場所や PlaceCategory
POI の名前などの情報を取得することはできます。
埋め込み POI は 、別のマップアイテムによって現在非表示になっていない限り、マップに表示されている他のアイテムMapMarker
と並行して選択できます。
func onTap(origin: Point2D) {
let rectangle2D = Rectangle2D(origin: origin,
size: Size2D(width: 1, height: 1))
mapView.pickMapContent(inside: rectangle2D, completion: onMapItemsPicked)
}
func onMapItemsPicked(pickedMapContent: PickMapContentResult?) {
guard let pickedMapContent = pickedMapContent else {
return
}
let cartoPOIList = pickedMapContent.pois
if cartoPOIList.count == 0 {
return
}
let topmostCartoPOI = cartoPOIList.first!
let name = topmostCartoPOI.name
let lat = topmostCartoPOI.coordinates.latitude
let lon = topmostCartoPOI.coordinates.longitude
...
}
選択した各埋め込み POI にはofflineSearchId
が含まれており、OfflineSearchEngine
を使用して詳細Place
情報を取得できます。 この情報はすでにマップ データの一部になっているため 、提供された ID はオンラインSearchEngine
で使用できません。
GitHub の例については、 CartoPOIPicking アプリを参照してください。
マップに埋め込まれている POI の表示範囲は、MapScene.setPoiVisibility()
で制御 できます。この機能を使用すると、 POI カテゴリのリストのVisibilityState
を設定できます。
すべての POI カテゴリがすべてのマップスキームで利用できるわけではありません。
サポートされているカテゴリの一覧については 、 HERE Style Editor のドキュメントを参照してください。
3D マップマーカーの追加
HERE SDK を使用すると、カスタム 3D モデルをマップに追加できます。 オプション Color
で、これらのモデルをブレンドと一緒にテクスチャ化できます。 共通の.obj ファイル形式は、 3D モデルの形状を指定するために使用されます。 無料の 3.js オンラインエディタなど、一般的な 3D モデリングソフトウェアを使用して生成できます。
この例で使用する Obstacle.obj 3D オブジェクト。 obj ファイル形式では、モデルのレンダリング方法を定義する頂点、法線、テクスチャ座標、およびフェースを指定します。 結果のモデルは、その座標を更新することで、マップの周囲を移動できます。 ベアリング、ピッチ、ロールを更新することで、その方向を変更できます。
HERE SDK では、材料ファイル( *.mtl )およびマルチテクスチャリングはサポートされていません。
obj 形式でモデルを定義し、モデルを囲むテクスチャを作成したら、ドラッグ & ドロップを使用して、両方のファイルをプロジェクトの assets ディレクトリに追加します。
この例で使用する obstacle_texture.png テクスチャ。 iOS を使用して Bundle
リソースへのパスを取得します。
private func getResourceStringFromBundle(name: String, type: String) -> String {
let bundle = Bundle(for: ViewController.self)
let resourceUrl = bundle.url(forResource: name,
withExtension: type)
guard let resourceString = resourceUrl?.path else {
fatalError("Error: Resource not found!")
}
return resourceString
}
この設定を使用すると、予期したファイルの場所にファイルが存在しない場合に例外が発生します。
次のコードを使用して、MapMarker3D
をマップに追加できるようになりました。
let geometryFile = getResourceStringFromBundle(name: "obstacle", type: "obj")
let textureFile = getResourceStringFromBundle(name: "obstacle_texture", type: "png")
let mapMarker3DModel = MapMarker3DModel(geometryFilePath: geometryFile, textureFilePath: textureFile)
let mapMarker3D = MapMarker3D(at: geoCoordinates, model: mapMarker3DModel)
mapMarker3D.scale = 6
mapMarker3D.isDepthCheckEnabled = true
mapView.mapScene.addMapMarker3d(mapMarker3D)
上の例 MapMarker3DModel
では、モデルを定義するコンストラクタに両方のアセットファイルを渡します。 同様に、MapImage
要素についてすでに確認したように、使用可能なMapMarker3D
コンストラクタのいずれかにモデルを渡すことができます。 モデルが 6 倍以上に見えるようにスケール係数も設定します。 obj モデルは 3D 座標空間で定義されているため、長さの単位は含まれていません。
MapMarker3D
を使用 MapScene
して、他のマップアイテムと同様にアイテムを追加および削除できます。
注
ヒント : テクスチャのサイズは 1 ピクセル以上である必要があります。 透明ピクセルをテクスチャイメージとして追加すると、テクスチャなしモデルを、 3 番目のパラメーターとしてMapMarker3DModel
コンストラクタに渡すことができるColor
とブレンドできます。
以下に、表示方法の例を示します。 モデルは、提供された地理座標を中心に配置されます。 モデルの中心は、その座標系の原点によって定義されます。
傾斜したマップに表示される 2 つのカスタム 3D マップマーカー。 このプロパティ isDepthCheckEnabled
は、 3D マーカーの頂点の深さをレンダリング時に考慮するかどうかを指定し、デフォルトで false に設定されます。
-
isDepthCheckEnabled
が、false に設定されている場合、アイテムMapMarker3D
が、常にマップに表示されている他のアイテムの上に描画されます。 isDepthCheckEnabled
が true に設定されている場合、 3D マーカーは、押し出された建物などの他のマップオブジェクトによって隠されている可能性があります。 このメソッド isDepthCheckEnabled
は、外側と内側の領域を持つトーラスのような複雑な 3D オブジェクトを描画するのに役立ちます。
2D MapMarker
アイテムと同様に、MapMarker3D
は マップを拡大または縮小してもサイズは変更されませんが、マップと一緒に回転します。
3D マーカーをマップと合わせて拡大 / 縮小する場合は、どうすればよいですか?
このためには、 RenderSize.Unit
を受け取る簡易コンストラクタMapMarker3D
を使用します。 たとえば densityIndependentPixels
、拡大縮小を禁止する場合に使用します。その結果作成されるマーカーは、ズーム レベル とは独立した固定サイズで作成されます。 スケーリング を許可するには、RenderSize.Unit
と meters
を使用します。
アイテムのリストMapMeasureRange
を設定することで、現在のズームレベルに応じてMapMarker3D
の表示/非表示を調整できます。
MapMarker3D
の透明度を変更する場合は、次の係数 opacity
を指定できます。 係数はマーカーのテクスチャのアルファチャンネルに適用されます。 このrenderInternalsEnabled
フラグを設定することで 、前面に面したポリゴンによって隠された内部ジオメトリをレンダリングするかどうかを指定できます。
フラットマップマーカーの追加
既定では、アイテムMapMarker
はマップとともに回転せず、マップを傾けると傾いてしまいます。 これは、MapMarker3D
を使用して フラットにすることで変更できます。 実際、フラットマップマーカーは、 3D 空間の Z 軸に 0 の長さを含むアイテムの特殊なケース MapMarker3D
です。
MapImage
パラメータを受け取る簡易コンストラクタを使用して、フラットMapMarker3D
オブジェクトを作成できます。 スケーリング を禁止するには、RenderSize.Unit
とdensityIndependentPixels
を使用します。 作成されたマーカーは、ズーム レベル とは独立した固定サイズで作成されます。 スケーリングを許可するには、RenderSize.Unit
とmeters
を使用します。
作成されたフラットマーカーはマップとともに傾き、マップを回転するときにも回転します。
guard
let image = UIImage(named: "poi.png"),
let imageData = image.pngData() else {
print("Error: Image not found.")
return
}
let scaleFactor: Double = 0.5
let mapImage:MapImage = MapImage(pixelData: imageData, imageFormat: ImageFormat.png)
let mapMarker3D: MapMarker3D = MapMarker3D(at: geoCoordinates, image: mapImage, scale: scaleFactor, unit: RenderSize.Unit.densityIndependentPixels)
mapView.mapScene.addMapMarker3d(mapMarker3D)
この例では、リソースから PNG ( "ipo.png" )を読み込み、その中からMapImage
を作成します。 これ MapImage
を インスタンスMapMarker
に設定できます。
イメージを表示するには、MapMarker
をマップ シーン に追加する必要があります。 MapImage
は、 提供されたgeoCoordinates
の中央に表示されます。
マップを使用して3D フラットマーカーを拡大縮小する場合は、どうすればよいですか ?
MapMarker3D
を使用してフラットなマップ マーカー を作成 し、RenderSize.Unit
meters
を使用して拡大 / 縮小時のスケーリングを可能にします。
2D モデルからフラット 2D マップ マーカー を作成する方法
次の段落では、手書きの obj ファイルから 2D モデルを作成する方法を示します。 その結果、前のセクションと同じフラットマップ マーカー を作成できます。
以下に、平面の 2D 例を示します。この例では、 x 軸と y 軸に 2 つの単位があります。 3D オブジェクトは簡単にスケーリングできるため、モデルのサイズは重要ではありません。 この例の座標系の原点は、平面の下部にあります。 このようにして、 POI マーカーアセットを、指定した地理座標をポイントするテクスチャとしてラップできます。
# A 2 x 2 square, centered upon origin.
v -1 2 0
v 1 2 0
v -1 0 0
v 1 0 0
# 4 vertices
vt 0 1
vt 1 1
vt 0 0
vt 1 0
# 4 texture vertices
vn 0 0 1
vn 0 0 1
vn 0 0 1
vn 0 0 1
# 4 vertex normals
f 1/1/1 3/3/3 2/2/2
f 3/3/3 4/4/4 2/2/2
# 2 faces
この例では、上記の平面のモデル定義を "plane.obj" という名前のテキストファイルに保存します。
この例で使用する plane.obj 3D モデル。 平面は正方形であるため、画像が正方形になるように、左右の POI 画像のサイズを透明な領域で拡張します。 元の画像は正方形ではなく長方形であるため、平面にラップすると変形します。
obj 形式でモデルを定義し、モデルを囲むテクスチャを作成したら、ドラッグ & ドロップを使用して、両方のファイルをプロジェクトの assets ディレクトリに追加します。
この例で使用する poi_texture.png テクスチャ。 マップにフラットマーカーを追加するには、次のコードを使用します。
let geometryFile = getResourceStringFromBundle(name: "plane", type: "obj")
let textureFile = getResourceStringFromBundle(name: "poi_texture", type: "png")
let mapMarker3DModel = MapMarker3DModel(geometryFilePath: geometryFile, textureFilePath: textureFile)
let mapMarker3D = MapMarker3D(at: geoCoordinates, model: mapMarker3DModel)
mapMarker3D.scale = 70
mapView.mapScene.addMapMarker3d(mapMarker3D)
getResourceStringFromBundle(name:type:)
メソッドのコードは、前のセクションで確認できます。
3D 空間で正規化された 2 単位の長さを使用したため、モデルを 60 倍大きいサイズに拡張します。 結果は以下のスクリーンショットに表示されます。
フラットマップマーカー - マップと一緒に回転および傾斜。 フラットマーカーが参照している場所を示す赤い円が追加されました。
マップと一緒にマップの平面マーカーが回転します。また、マップを傾けるとマップ マーカーも傾斜し、 2D モデルが平坦であっても 3D のような効果が得られます。 デフォルトでは、フラットマップマーカー の縮尺値はマップのズーム レベルと一緒には変更されません。 たとえば、地図をズームアウトしても、地図マーカーは表示されたままになります。これは、展開されていない MapMarker
の場合と同じです
マップでマーカーを拡大縮小する場合は、前のセクションで示したように、フラットなマップ マーカー を作成します。
位置情報インジケータの追加
別の種類の 3D マップアイテムはLocationIndicator
です 。 通常、マップ上のユーザーのデバイスの現在の位置を示すインスタンスが 1 つだけ追加されます ( 見出し方向を含む ) 。
他のマップ項目とは異なり、 LocationIndicator
は MapViewLifecycleDelegate
プロトコルを実装します。これは、プロトコルが追加されると MapView
によってライフサイクルが管理されるためです。
HERE SDK では、さまざまなユースケースに合わせて事前定義された 3D アセットが提供されます。 必要に応じて、定義済みの各スタイルに独自のカスタマイズされたMapMarker3DModel
を設定することで、これらのスタイルを置き換えることができます。
マップ ビューのズーム レベルが変更されても、すべてのマップマーカーのスケールLocationIndicator
は変更されません。 ただしマップが傾いている場合 、地平線に向かって移動するとLocationIndicator
が小さくなります。
マップにLocationIndicator
を追加する方法の例を示します。
private func addLocationIndicator(geoCoordinates: GeoCoordinates,
style: LocationIndicator.IndicatorStyle) {
let locationIndicator = LocationIndicator()
locationIndicator.locationIndicatorStyle = style
var location = Location(coordinates: geoCoordinates)
location.time = Date()
location.bearingInDegrees = getRandom(min: 0, max: 360)
locationIndicator.updateLocation(location)
mapView.addLifecycleDelegate(locationIndicator)
}
上記のように、アセットは必要ありません。 代わりに、IndicatorStyle
が設定されます。
-
LocationIndicator.IndicatorStyle.navigation
: ナビゲーションの使用例を想定して設計されたアセット。 -
LocationIndicator.IndicatorStyle.pedestrian
: 座っているときや歩いているときなど、ハンドヘルドで使用できるように設計されたアセット。
注
アセットのハローは、提供されたLocation
の実際の水平精度をまだ示していないことに注意してください。 これは、次回の HERE SDK アップデートのいずれかに対応する予定です。
どちらのスタイルも、現在のベアリングを示します。このベアリングは、ユーザーの進行方向を表します。 この例では、 0 ° ~ 360 ° の範囲のランダムなベアリング値を設定します。 0 ° の方位が 北向きであることを示しているため、マップも 北向きになっているので、デフォルトでは矢印が上向きになっています。
ナビゲーションユースケースの位置情報インジケータ。 ナビゲーション中に、ユーザーが運転している方向にマップを回転させるのが一般的な UX アプローチです。これにより、方位が変化しても、方向矢印が上向きのままになります。 通常、ナビゲーション中、矢印はユーザーが走行している道路の方向を指していることが想定されています。
徒歩によるユースケースの場合、ユーザーの現在の位置に焦点が当てられます。 そのため、方向はより小さい矢印で示されます。
徒歩ユースケースの位置を示すインジケータ。 ベアリング値の用途に応じて異なります。 Location
オブジェクトから派生したベアリングの値は 移動の方向を示しますが、アプリケーションは真の北を基準にしてベアリングを設定することもできます(コンパスモード)。 矢印が真の北を指すようにする場合は、ベアリング値を 0 ° に変更します。 このような補正は、位置情報ソースから新しいLocation
の更新を受け取るたびに行う必要があります ( 以下を参照 ) 。
通常、 LocationIndicator
の 1 つのインスタンスのみがマップに設定されます。 updateLocation()
を呼び出すことで、場所を更新でき、setLocationIndicatorStyle()
を呼び出すことで、その場でスタイルを更新できます。
各スタイルには、GPS 信号が失われたときのグレーの状態など、さまざまな状態を定義する複数の関連値 MarkerType
があります。 LocationIndicator
がカスタマイズされている場合は、すべてのタイプを設定することが重要です。そうしないと、状態を変更しても効果はありません。
次のコード スニペットは、事前定義されたグレーのタイプ( 非アクティブ な状態を示す)とデフォルトの状態を切り替える方法を示しています。
let isActive = locationIndicator.isActive
locationIndicator.isActive = !isActive
LocationIndicator
は MapViewLifecycleDelegate
プロトコルを実装しているため、 MapView
のライフサイクルと結合されます。
最も一般的なユースケースをサポートするメリットとして、LocationIndicator
をマップに一度追加すると、そのライフサイクルがMapView
によって自動的に管理されます。 ただし LocationIndicator
、自分でを削除する場合は、次の電話番号に連絡してください。
mapView.removeLifecycleDelegate(locationIndicator)
注
LocationIndicator
はまだ選択できません。描画の順序を設定せずに、常に他のすべての要素の上に描画されます。
ほとんどの場合、 LocationIndicator
は頻繁なLocation
更新に基づいて更新されます。 分離された使用例を MapItems サンプルアプリの一部として確認できます。
注
LocationIndicator は常に 0 に近い固定の高度でレンダリングされます。 MapCamera
を高度が高い地理座標を表示するようにを変更すると、問題が発生する可能性があります。 MapCamera
の角度が傾斜していて高度が高すぎる場合、新しい視点によりLocationIndicator
がビューポイントから消えることがあります。
[ 位置情報の取得 ] セクションで、デバイスの GPS チップから実際のLocation
更新情報を取得する方法を確認してください。 Positioning Example アプリでは、この目的での LocationIndicator
の使用方法を示しています。
注
NavigationCustom サンプル アプリは、ナビゲーションが停止したときにカスタム LocationIndicator
と別のマーカー タイプに切り替える方法を示します
MapViewLifecycleListener の使用方法
は MapViewLifecycleListener
、のライフサイクルをリッスンする任意のクラスによって実装 MapView
できます。 たとえば、で LocationIndicator
は、このインターフェイスはすでに実装されています。 この実装では、次のイベントへの対応が処理されます。
-
onAttach(to mapView: MapViewBase)
: インプリメントするオブジェクトをマップ ビューに追加するときに呼び出されます。 -
onPause()
: インプリメント元のオブジェクトが添付されているマップ ビューが一時停止されたときに呼び出されます ( 通常は、アプリがバックグラウンドに入ったとき ) 。 -
onResume()
: インプリメント元のオブジェクトが添付されているマップ ビューが再開されたときに呼び出されます ( 通常は、アプリがフォアグラウンドに入るとき ) 。 -
onDetach(from mapView: MapViewBase)
: マップ ビューからインプリメントするオブジェクトを削除するときに呼び出されます。 -
onDestroy()
: インプリメント元のオブジェクトが添付されているマップ ビューが削除されたときに呼び出されます。
次のように、インプリメントするオブジェクトを添付および削除できます。
mapView.addLifecycleDelegate(myObject)
:オブジェクトをライフサイクルMapView
に添付します。 mapView.removeLifecycleDelegate(myObject)
:ライフサイクルMapView
からオブジェクトを削除します。
注
LocationIndicator
の場合、メソッドonPause()
およびonResume()
は何も行いません。 アタッチ / 削除の実装では、インジケータをに追加 MapView
して表示または削除する処理が行われます。
マップビュー からマップアイテムの選択方法
次の表に、現在選択可能なマップアイテムを選択する方法を示します。
MapItems |
選択方法 |
MapPolyline | _mapView.pickMapItems(at: origin, radius: 2, completion: onMapItemsPicked) |
MapPolygon | mapView.pickMapItems(at: origin, radius: 2, completion: onMapItemsPicked) |
MapMarker | mapView.pickMapItems(at: origin, radius: 2, completion: onMapItemsPicked) |
MapMarkerCluster.Grouping | mapView.pickMapItems(at: origin, radius: 2, completion: onMapItemsPicked) |
埋め込み POI | mapView.pickMapContent(inside: rectangle2D, completion: onMapItemsPicked) |
MapViewPin | UITapGestureRecognizer(target: self, action: #selector(onMapViewPinTapped)) |
マップ ビューピンの追加
マップマーカーを使用 すると、マップにアイテムをシームレスに配置できますが、マップのピンを使用して、マップにネイティブのものUIView
を固定できます。 情報のポップアップバブル ( またはアニメーション化された情報バブル ) 、注釈、またはカスタマイズされたコントロールを表示する場合に便利です。 たとえば、マップ マーカーをタップすると、マーカーの場所に関する追加情報を含むマップ オーバーレイを表示できます。
マップピンは複数の UIViews
ピンで構成でき、ユーザー定義の自動レイアウト制約、アニメーション、ネイティブのジェスチャ処理などに応じて、各ピンを他の UIView
ピンと同様に使用できます。このため、 UITapGestureRecognizers
などを使用できます。
注
ビューピンはネイティブビューで構成されているため、マップ ビュー に添付されますが、マップ自体の一部ではありません。 したがって、マップ ビュー をパンすると、ピンはマップ ビュー と一緒に移動しますが、わずかな遅延が発生します。 この問題を回避する場合 は、インスタンスMapMarker
の使用を検討してください。特に、一度に複数のインスタンスを表示する場合は、この点を考慮してください。
カスタムの場合と同様に、 Interface Builder のレイアウトファイルでビューを定義してViewController
に接続するか、またはプログラムで目的のビューコンテンツを生成できます。 例 :
let tapRecognizer = UITapGestureRecognizer(target: self, action: #selector(onMapViewPinTapped))
let textView = UITextView(frame: CGRect(x: 0, y: 0, width: 200, height: 40))
textView.textAlignment = .center
textView.isEditable = false
textView.backgroundColor = UIColor(red: 72/255, green: 218/255, blue: 208/255, alpha: 1)
textView.textColor = .white
textView.font = .systemFont(ofSize: 17)
textView.text = "Centered ViewPin"
textView.addGestureRecognizer(tapRecognizer)
タップジェスチャリスナーを設定するには、上の図のように UITextView
に UITapGestureRecognizer
を追加します。 次に、以下に示すように UITAPGestureRecognizer のハンドラを追加します。
@objc func onMapViewPinTapped() {
print("Tapped on MapViewPin.")
}
UITextView
はUIView
の子孫で、ピンとして直接使用できます。 ここで、マップにビューを追加するだけで済みます。 ポリゴンやマーカーなどの他のマップアイテムとは異なり、ピンはマップに直接追加できます。
let viewPin = mapView.pinView(view: textView, at: geoCoordinates)
このメソッドは、アンカーポイントの指定など、ピン接続の制御に使用できるプロキシオブジェクトを返します。
mapView
に追加されると、ネストされているすべてのサブビューを含むビューが指定した場所geoCoordinates
の中央に表示され、マップの移動時にその場所が自動的に指定した地理的位置に調整されます。
textView.isEditable
で始まる行を削除してください 。 どうなりますか? ViewPin
は、 提供された場所に実際 のビューがレンダリングされるようにするため、これによってUITextView
のデフォルトの動作が有効になり、編集可能になります。
スクリーンショット: UITextView を示すマップピン。 デフォルトでは、ビューは指定した場所の中央に配置。 アニメーションをビューに適用したり、他のインタラクションリスナーを添付したりすることもできます。 ビューがマップ ビューに添付されると、他の iOSのUIView
と同様に動作します 。ただし、ビューはマップ上で固定されたままになり、パンまたはズーム時に移動する点が異なります。 マップを回転しても、マップのポリラインやマップのマーカーと同様に、は回転しません。ViewPin
マップピンはいくつでも追加できますが、パフォーマンスを考慮する必要があります。 たとえば、マップ上で複数の検索結果を指定する場合、マップのピンのパフォーマンスはマップのマーカーよりも低くなります。
マップから ピンを削除するには、次をコールするだけです。
mapView.unpinView(view: textView)
複数 のインスタンス ViewPin
を追加した場合は 、次のコマンドを呼び出して、オブジェクトmapView
からすべてのピンにアクセスできます。
let viewPins = mapView.viewPins
通常、マップのピン は 、マップ上の特定の場所での追加の動的コンテンツを表示するのに最適です。
アンカー付きマップのピン数
既定では、マップのピンは指定した場所の中央に配置されます。 ただし、下の領域を覆わずにピンを使用する場合は、どうすればよいですか。
この目的のために、任意のUIView
で行うのと同様に、アンカーポイントを指定できます。
textView.layer.anchorPoint = CGPoint(x: 0.5, y: 1)
これにより、ビューが位置の中央に水平に配置され、ビューの下部が指定した座標と一致します。 以下のスクリーンショットで表示されているように、マップピンは、マップピンの提供された中心位置を示すマップ円オブジェクトの上に配置されます。
スクリーンショット: 固定されたマップのピン。 アンカーポイントを使用すると、ビューをレンダリングする場所を簡単に指定できます。 ビューの大きさに関係なく、幅または高さの半分のポイントは常に 0.5 になります。これは、正規化されたテクスチャ UV 座標の概念に似ています。
デフォルトでは、アンカーポイントは (0.5 、 0.5) で、ビューがその位置を中心にレンダリングされます。 ビューのサイズは任意であるため、最大の幅と高さの値は 1 になります。 ビューの寸法は、完全に膨張した後で計算されます。 ビューの正確な寸法がわかっている場合は、ビュー内の特定の点を、最大値の 1 を基準にして簡単に計算できます。
注 : オフセット を使用すると、 x 軸および y 軸に沿った平行移動を指定できますが 、基準点は、ビューなどの長方形の左上隅の相対位置を定義します。 ビューの境界を基準 GeoCoordinates
にして、ビューが指定した位置を中心とする点を定義します。