What's new in MapKit

ハイライト

MapKit チームの Eric と Yingxiu が、iOS 16 の MapKit への 5 つの主要なアップデートについて説明します。Apple Maps の新しい地図と没入型の Look Around エクスペリエンスがリリースされて以来、対象範囲はカナダ、ヨーロッパの複数の国、日本にまで拡大し、昨年は車線区分線、横断歩道、自転車レーンを備えた 3D 都市エクスペリエンスが導入されました。今年、MapKit はこれらすべての機能をサードパーティ開発者に公開しました。

主要内容

地図アプリの難しさは「地図を載せること」ではありません。難しいのは、地図とビジネスコンテンツをどのように共存させるかです。

レンタカー、ナビゲーション、旅行、店舗の場所などのアプリは、通常、操作エリア、ルート、興味のあるポイント、詳細カードを地図上にオーバーレイします。以前は、このコンテンツは簡単にマップラベルを覆い隠したり、3D 都市の建物によって隠されたりする可能性がありました。ユーザーに見えるのはビジネスグラフィックスのレイヤーであり、地図自体の道路、建物、地形は背景に隠れます。

(02:13) iOS 16 の MapKit は、まずアップグレードコストを削減します。新しい SDK で再コンパイルした後、iOS、macOS、tvOS アプリは自動的に新しい Apple マップを使用し、利用可能なエリアで 3D シティエクスペリエンスを表示します。次に、MapKit には、構成、オーバーレイ、ブレンディングモード、選択可能な地図機能、Look Around の 5 つの API セットが追加され、ビジネスコンテンツが実際の地図に対して機能できるようになりました。

この講演のサンプルアプリは、サンフランシスコのスクーターレンタルアプリです。これには、エリアの操作、サイクリングルート、ウォーターフロントの名所の探索、アトラクションの閲覧 Look Around の 4 つの機能があります。後続の各 API は、この特定のシナリオに該当します。

詳細

Map Configuration API を使用してマップをアトミックに構成する

(02:41) iOS 15 より前、開発者はMKMapViewマップ上で複数のプロパティを構成します。 iOS 16 では、これらの散在するプロパティをそっと破棄し、MKMapConfiguration新しい中央エントランスとして。

MKMapConfigurationこれは、次の 3 つの特定の構成を持つ抽象基本クラスです。

MKImageryMapConfiguration：衛星画像のみを表示します。 -MKHybridMapConfiguration: イメージマップを表示し、道路ラベルや名所などの地図の機能をオーバーレイします。 -MKStandardMapConfiguration: 完全にグラフィカルな標準地図を表示します。

これらの構成は地形も制御します。elevationStyleできるflatまたはrealistic。標準マップもサポートemphasisStyle、でmutedこれにより、マップの詳細のコントラストが減り、独自のグラフィックコンテンツに注意が向けられます。

// 概念例: transcript に登場した構成クラスとプロパティを整理し、実プロジェクトでの互換性判定は省略しています。
let configuration = MKStandardMapConfiguration()
configuration.elevationStyle = .realistic
configuration.emphasisStyle = .muted
configuration.showsTraffic = true

mapView.preferredConfiguration = configuration

キーポイント:

MKStandardMapConfiguration()スピーチの「完全にグラフィックベースのマップ」に相当する、グラフィックの標準マップを選択します。 -elevationStyle = .realistic現実的な地形をリクエストすると、地図には丘、道路の高低差、3D 都市効果が表示されます。 -emphasisStyle = .muted地図の詳細のコントラストを下げて、オーバーレイされたビジネスグラフィックをより目立たせるようにします。 -showsTraffic = true標準地図とハイブリッド地図の両方に対応した交通量表示スイッチに対応。 -preferredConfigurationこれらの選択肢を構成オブジェクトとして渡しますMKMapView、複数の属性の散在的な変更を避けるため。

(05:42) 3D City Experience にはハードウェアと地域の制限があります。 iOS には A12 以降のデバイスが必要で、macOS には M1 以降の Mac が必要です。利用できないエリアは平坦なマップに戻ります。他のデバイスでもフラットバージョンが表示されます。講演では、3D フォールバックとフラットフォールバックの両方をテストすることを推奨しています。

オーバーレイはマップを大まかに押さえつけなくなりました

(06:55) MapKit のオーバーレイには常に 2 つのレベルがあります。aboveRoadsそしてaboveLabels。aboveLabelsラベルも含めてすべてをカバーします。 Apple は、データとマップを相互作用させたくない場合にのみこれを使用することをお勧めします。

iOS16aboveRoads新しいデフォルトレベルとして。ラベルのコンテキストを維持しながら、地形、道路、土地被覆、水域の上にオーバーレイを配置します。

// 概念例: 講演の Operating Area 機能では、polygon を運用エリアとして地図に重ねます。
let operatingArea = MKPolygon(coordinates: coordinates, count: coordinates.count)
mapView.addOverlay(operatingArea, level: .aboveRoads)

キーポイント:

MKPolygonスピーチの「ポリゴンオーバーレイ」に相当し、スクーターの操作可能領域を表すために使用されます。 -addOverlayビジネスエリアをマップに追加します。 -level: .aboveRoadsiOS 16 の推奨レベルを選択すると、オーバーレイはマップラベルをカバーしません。
選択した場合aboveLabels、オーバーレイはマップコンテキストのより多くをカバーし、いくつかのシナリオにのみ適しています。

(08:11) iOS 16 では、透明な建物も追加されます。マップに高低がある場合、木や建物が遮る場合aboveRoadsカバーは自動的に透明になります。ピッチが 0 度に戻ると、競合する地上オブジェクトがビューから消え、カバーが完全に見える状態になります。

デモでは、Yingxiu は操作領域のアルファを次のように変更しました。0.8。これにより、地図を傾けなくても下の道路や建物を見ることができます。

// 概念例: renderer 内で polygon の塗りつぶしを半透明にします。
func mapView(_ mapView: MKMapView, rendererFor overlay: MKOverlay) -> MKOverlayRenderer {
    let renderer = MKPolygonRenderer(overlay: overlay)
    renderer.fillColor = UIColor.systemPurple.withAlphaComponent(0.8)
    return renderer
}

キーポイント:

rendererFor overlayこれは、MapKit がオーバーレイを描画するために使用するデリゲートエントリです。 -MKPolygonRendererポリゴンの描画を担当します。 -withAlphaComponent(0.8)対応する音声で、アルファを次のように変更します。0.8手術。
半透明のオーバーレイと透明な建物は組み合わせて有効になり、マップは空間コンテキストを保持します。

ルートオーバーレイは実際の地形に従うことができます

(13:14) 通常のオーバーレイがリアルな地形マップに追加されると、MapKit は自動的にマップをフラットに切り替えます。最後のオーバーレイを削除した後、リアルに戻します。例外は、Directions API によって返されるルートオーバーレイであり、実際の地形に従います。

デモのライド機能は、プレシディオパークの入り口からバッテリースペンサーまで進み、ゴールデンゲートブリッジを渡るルートをリクエストします。ルートラインは橋と道路の高低差に沿って表示され、橋脚や木々の前にもルートラインが表示されます。

// 概念例: 講演では Directions API でルートを取得し、route polyline を地図に追加します。
let source = MKMapItem(placemark: MKPlacemark(coordinate: startCoordinate))
let destination = MKMapItem(placemark: MKPlacemark(coordinate: endCoordinate))

let request = MKDirections.Request()
request.source = source
request.destination = destination

let directions = MKDirections(request: request)
let response = try await directions.calculate()

if let route = response.routes.first {
    mapView.addOverlay(route.polyline, level: .aboveRoads)
}

キーポイント:

MKPlacemark開始座標と終了座標を場所にパックします。 -MKDirections.Requestソースと宛先を保存します。 -MKDirections道順をリクエストします。 -route.polylineDirections API によって返されるルートオーバーレイです。
このタイプのオーバーレイは、講演で特に述べられた例外です。マップを平坦化するのではなく、現実的な地形を保持します。

(16:28) 高架ルートラインは、A12 以降の iOS デバイスをサポートしています。古いデバイスでは、2D マップ上の 2D ルートが自動的に取得されます。

BlendMode を使用してオーバーレイとマップ間の視覚的な関係を制御する

(17:02) カスタムコンテンツをより目立たせることだけが目的の場合は、オーバーレイを配置する必要はありません。aboveLabels。 iOS 16が与えるものMKOverlayRenderer追加したblendModeプロパティでは、CoreGraphics のブレンドモードを使用できます。

講演では例としてプレシディオ国立公園を使用しています。まず、切り欠きのある大きなオーバーレイを使用してマップ領域をカバーし、次に色相、ハードライト、カラーバーンなどの混合モードをそれぞれ設定します。その結果、公園の外側のエリアは彩度が低くなり、暗くなりますが、公園の内部は焦点が合ったままになります。

// 概念例: 講演では MKOverlayRenderer に blendMode プロパティが追加されたことを明示しています。
func mapView(_ mapView: MKMapView, rendererFor overlay: MKOverlay) -> MKOverlayRenderer {
    let renderer = MKPolygonRenderer(overlay: overlay)
    renderer.fillColor = UIColor.gray
    renderer.blendMode = .colorBurn
    return renderer
}

キーポイント:

MKOverlayRendererすべてのオーバーレイレンダラーの基本クラスです。 -blendModeiOS 16 の新しい属性です。 -.colorBurnCoreGraphics ブレンドモードから来ており、より抑制された Presidio ハイライト効果を得るためにプレゼンテーションに使用されます。
オーバーレイの挿入順序は結果に影響します。下部のオーバーレイが最初にマップと混合され、上部のオーバーレイが前の結果と混合されます。

ユーザーが地図上の POI、エリア、自然地物を直接選択できるようにします

(20:09) 以前は、ユーザーは自分でマップ上に追加した注釈をクリックすることしかできませんでした。 Apple がマップ内で提供する店舗、レストラン、ランドマーク、都市、州、山、湖、その他の要素は背景にすぎません。

iOS 16 の選択可能な地図機能 API はこれを変更します。開発者は、どのマップ機能がオプションであるかを構成し、デリゲートを通じて選択イベントを受け取ることができます。

// 概念例: 講演の Explore 機能では points of interest だけを有効にしています。
mapView.pointOfInterestFilter = MKPointOfInterestFilter(excluding: [
    .airport,
    .carRental,
    .hospital,
    .laundry
])

mapView.selectableMapFeatures = [.pointsOfInterest]

キーポイント:

pointOfInterestFilterスピーチ内の無関係な POI カテゴリを最初に除外するステップに対応します。 -.airport、.carRental、.hospital、.laundryは、デモでは名前によって除外されるカテゴリです。 -selectableMapFeatures新しいオプションのマップ機能構成エントリです。
選択された例のみ.pointsOfInterest、スピーチでは、領土と身体的特徴もオプションであるとも述べられました。

(22:41) ユーザーがマップ要素をクリックすると、MapKit は 2 つの入り口を受け取ります。新しいdidSelect annotation選択イベントを処理するコールバック。既存viewFor annotation選択した状態の注釈ビューをカスタマイズするためのコールバック。

// 概念例: 講演では MapFeatureAnnotation で選択状態のスタイルをカスタマイズし、MKMapItemRequest を開始します。
func mapView(_ mapView: MKMapView, didSelect annotation: MKAnnotation) {
    guard let feature = annotation as? MKMapFeatureAnnotation else { return }

    Task {
        let request = MKMapItemRequest(mapFeatureAnnotation: feature)
        let mapItem = try await request.mapItem
        showInfoCard(for: mapItem)
    }
}

func mapView(_ mapView: MKMapView, viewFor annotation: MKAnnotation) -> MKAnnotationView? {
    guard let feature = annotation as? MKMapFeatureAnnotation else { return nil }

    let view = MKMarkerAnnotationView(annotation: feature, reuseIdentifier: "Feature")
    view.markerTintColor = .systemPurple
    view.glyphImage = feature.iconStyle.image
    view.selectedGlyphImage = feature.iconStyle.image
    return view
}

キーポイント:

MKMapFeatureAnnotationこれは iOS 16 の新しいタイプであり、ユーザーが選択した地図機能を表します。 -feature.iconStyleスピーカーが Apple のアイコンを保存するために使用する POI のアイコンと色の情報を提供します。 -MKMapItemRequest地図の特徴に基づいてより完全なものをリクエストするMKMapItem。
MKMapItem住所、名前、電話番号、URLが表示されます。 -viewFor annotation戻るnilカスタムビューに戻ると、MapKit はデフォルトのグラデーションアノテーションを使用します。カスタムビューに戻るときに、アプリ独自のブランドカラーを適用できます。

Look Around を独自のインターフェースに組み込む

(31:14) Look Around は、iOS 13 以降のマップアプリで利用できます。iOS 16 では、MapKit に導入されています。開発者はまずアプリに小さなプレビューを表示し、ユーザーがそれをクリックして全画面の対話型ビューに入ることができます。

使用プロセスには 3 つのステップがあります。ターゲット位置に Look Around データがあるかどうかを確認します。シーンを Look Around ビューコントローラーまたはスナップショットに渡します。データが利用可能な場合は、UI 表示プレビューを更新します。

// 概念例: 講演では LookAroundSceneRequest を coordinate または map item で初期化できると説明しています。
let request = MKLookAroundSceneRequest(mapItem: mapItem)
let scene = try await request.scene

if let scene {
    lookAroundViewController.scene = scene
    previewContainer.isHidden = false
} else {
    previewContainer.isHidden = true
}

キーポイント:

MKLookAroundSceneRequestiOS 16 の新しいクラスで、特定の場所に Look Around データがあるかどうかを確認するために使用されます。 -sceneはオプションの非同期プロパティです。利用可能な場合はシーンを返し、利用できない場合は返しますnil、リクエストが失敗するとエラーがスローされます。
Look Around シーンは不透明なオブジェクトであり、使いやすさと表示に必要なトークンとしてのみ使用されます。 -lookAroundViewController.scene = sceneスピーチ内で既存のViewControllerにシーンを割り当てる方法に対応します。 -previewContainer.isHiddenデータが利用可能かどうかに基づいて、UI を使用してプレビューを表示または非表示にする必要があることを示します。

(36:44) Yingxiu のハイライト機能MKLookAroundViewController左下のコンテナに埋め込みます。ユーザーが Ferry Building を選択すると、マップはまず新しいカメラ API を使用してその位置にアニメーションを付けます。アニメーションが完了すると、Look Around シーンが要求されます。データがある場合はプレビューが表示されます。フェリービルディングはランドマークであるため、厳選されたカメラのフレーミングが行われます。ドラゴンゲートはランドマークではないため、真上からの眺めになります。

静止画像のみが必要な場合は、次のようにすることもできます。MKLookAroundSnapshotterスナップショットを取得します。

// 概念例: 講演では、静止画像だけが必要な場面に snapshotter が適していると説明しています。
let request = MKLookAroundSceneRequest(coordinate: coordinate)
if let scene = try await request.scene {
    let snapshotter = MKLookAroundSnapshotter(scene: scene)
    let snapshot = try await snapshotter.snapshot
    imageView.image = snapshot.image
}

キーポイント:

MKLookAroundSceneRequest(coordinate:)座標を使用して空き状況を確認します。 -MKLookAroundSnapshotter受け取りシーン。 -snapshot静的なプレビュー画像を返す非同期プロパティです。
この方法はリストカード、検索結果、または軽量のプレビューに適しており、最初から完全な対話型コントローラーを埋め込む必要はありません。

重要ポイント

1. 都市部の自転車走行エリアの地図を作成する

何をすべきか: 地図上に走行可能なエリア、駐車禁止ゾーン、推奨駐車スポットを表示します。
実行する価値がある理由:aboveRoads、透明な建物、半透明のポリゴンにより、操作エリアが道路、ラベル、建物を覆い隠すことがなくなります。
開始方法: を使用しますMKPolygonに挿入される領域を表します.aboveRoads、次に使用しますMKPolygonRenderer半透明の塗りつぶしを設定します。

2. 実際の高低差のある都市のウォーキングルートを作成する

機能: 橋、ランプ、公園ルートの地形に適したルートラインを表示します。
価値がある理由: Directions API によって返されるルートポリラインは、通常のオーバーレイの例外であり、現実的な地形を保持します。
開始方法: を使用しますMKDirections.Request道順をリクエストして、route.polylineマップに追加し、A12 以降のデバイスで 3D 効果をテストします。

3. クリック可能なアトラクション探索マップを作成する

何をすべきか: ユーザーが地図上のレストラン、ランドマーク、または美術館をクリックすると、ブランド情報カードがポップアップ表示されます。
実行する価値がある理由: 選択可能な地図機能を使用すると、Apple Maps の組み込み POI をインタラクティブなオブジェクトにすることができるため、すべての注釈データを自分で管理する必要がなくなります。
開始方法: selectableMapFeatures = [.pointsOfInterest] を設定し、didSelect 内で MKMapItemRequest を使って住所、URL、電話番号を取得します。

4. 視覚的に強調した公園やビジネス街の地図を作成する

何をすべきか: ターゲットエリアを強調表示し、周囲のマップを暗くするか彩度を下げます。
実行する価値がある理由:MKOverlayRenderer.blendModeラベル上のレイヤーを覆うよりも自然な、オーバーレイとマップベースマップの混合方法を制御できます。
開始方法: ターゲット領域ポリゴンと外側マスクポリゴンを準備し、順番にオーバーレイを挿入し、実験します.hue、.hardLight、.colorBurnなどブレンドモード。

5. 景色の良い「Look Around」プレビューカードを作成する

操作方法: ユーザーがランドマークを選択すると、地図の隅に小さな Look Around ウィンドウが表示され、クリックすると全画面ストリートビューが表示されます。
実行する価値がある理由:MKLookAroundSceneRequest空白の UI を避けるために、まずデータが存在するかどうかを判断できます。
開始方法: マップアイテムを使用してリクエストを作成し、シーンを取得して割り当てます。MKLookAroundViewController; シーンがない場合はプレビューコンテナを非表示にします。

What's new in MapKit

ハイライト

主要内容

詳細

Map Configuration API を使用してマップをアトミックに構成する

オーバーレイはマップを大まかに押さえつけなくなりました

ルートオーバーレイは実際の地形に従うことができます

BlendMode を使用してオーバーレイとマップ間の視覚的な関係を制御する

ユーザーが地図上の POI、エリア、自然地物を直接選択できるようにします

Look Around を独自のインターフェースに組み込む

重要ポイント

1. 都市部の自転車走行エリアの地図を作成する

2. 実際の高低差のある都市のウォーキングルートを作成する

3. クリック可能なアトラクション探索マップを作成する

4. 視覚的に強調した公園やビジネス街の地図を作成する

5. 景色の良い「Look Around」プレビューカードを作成する

関連セッション

コメント

ハイライト

主要内容

詳細

Map Configuration API を使用してマップをアトミックに構成する

オーバーレイはマップを大まかに押さえつけなくなりました

ルート オーバーレイは実際の地形に従うことができます

BlendMode を使用してオーバーレイとマップ間の視覚的な関係を制御する

ユーザーが地図上の POI、エリア、自然地物を直接選択できるようにします

Look Around を独自のインターフェースに組み込む

重要ポイント

1. 都市部の自転車走行エリアの地図を作成する

2. 実際の高低差のある都市のウォーキング ルートを作成する

3. クリック可能なアトラクション探索マップを作成する

4. 視覚的に強調した公園やビジネス街の地図を作成する

5. 景色の良い「Look Around」プレビュー カードを作成する

関連セッション

コメント

ルートオーバーレイは実際の地形に従うことができます

2. 実際の高低差のある都市のウォーキングルートを作成する

5. 景色の良い「Look Around」プレビューカードを作成する