Verwenden des MapLibre nativen SDK für iOS mit Amazon Location Service

Verwenden Sie MapLibre das native SDK für iOS, um clientseitige Karten in iOS-Anwendungen einzubetten.

Das MapLibre native SDK für iOS ist eine Bibliothek, die auf Mapbox microSD Native basiert und mit den Stilen und Kacheln kompatibel ist, die von der Amazon Location Service Maps API bereitgestellt werden. Sie können MapLibre das native SDK für iOS integrieren, um interaktive Kartenansichten mit skalierbaren, anpassbaren Vektorkarten in Ihre iOS-Anwendungen einzubetten.

In diesem Tutorial wird beschrieben, wie Sie das MapLibre native SDK für iOS in Amazon Location integrieren. Die Beispielanwendung für dieses Tutorial ist als Teil des Amazon Location Service-Beispiel-Repositorys auf verfügbarGitHub.

Erstellen der Anwendung: Initialisierung

So initialisieren Sie Ihre Anwendung:

1. Erstellen Sie ein neues Xcode-Projekt aus der -App-Vorlage.

2. Wählen Sie SwiftUI als Schnittstelle aus.

3. Wählen Sie die SwiftUI-Anwendung für ihren Lebenszyklus aus.

4. Wählen Sie Swift als Sprache aus.

Hinzufügen MapLibre von Abhängigkeiten mit Swift Packages

So fügen Sie Ihrem Xcode-Projekt eine Paketabhängigkeit hinzu:

1. Navigieren Sie zu Datei > Pakete austauschen > Paketabhängigkeit hinzufügen.

2. Geben Sie die Repository-URL ein: https://github.com/maplibre/maplibre-gl-native-distribution

   Anmerkung

   Weitere Informationen zu Swift-Paketen finden Sie unter Hinzufügen von Paketabhängigkeiten zu Ihrer App unter Apple.com

3. Installieren Sie in Ihrem Terminal CocoaPods:

   sudo gem install cocoapods

4. Navigieren Sie zum Projektverzeichnis Ihrer Anwendung und initialisieren Sie die Podfile mit dem CocoaPods Paketmanager:

   pod init

5. Öffnen Sie die Podfile-Datei, die AWSCore Sie als Abhängigkeit hinzufügen möchten:

   platform :ios, '12.0'
    
   target 'Amazon Location Service Demo' do
     use_frameworks!
    
     pod 'AWSCore'
   end

6. Abhängigkeiten herunterladen und installieren:

   pod install --repo-update

7. Öffnen Sie den Xcode-Workspace, den CocoaPods erstellt hat:

   xed .

Erstellen der Anwendung: Konfiguration

Fügen Sie die folgenden Schlüssel und Werte zu Info.plist hinzu, um die Anwendung zu konfigurieren:

Schlüssel	Wert
AWSRegion	us-east-1
IdentityPoolId	us-east-1:54f2ba88-9390-498d-aaaa5-0d97fb7ca3bd
MapName	ExampleMap

Erstellen der Anwendung: ContentView Layout

Um die Karte zu rendern, bearbeiten Sie ContentView.swift:

• Fügen Sie eine hinzuMapView, die die Zuordnung wiedergibt.

• Fügen Sie einen hinzuTextField, der die Zuordnung anzeigt.

Dadurch wird auch der anfängliche Mittelpunkt der Karte festgelegt.

import SwiftUI
 
struct ContentView: View {
    @State private var attribution = ""
 
    var body: some View {
        MapView(attribution: $attribution)
            .centerCoordinate(.init(latitude: 49.2819, longitude: -123.1187))
            .zoomLevel(12)
            .edgesIgnoringSafeArea(.all)
            .overlay(
                TextField("", text: $attribution)
                    .disabled(true)
                    .font(.system(size: 12, weight: .light, design: .default))
                    .foregroundColor(.black)
                    .background(Color.init(Color.RGBColorSpace.sRGB, white: 0.5, opacity: 0.5))
                    .cornerRadius(1),
                alignment: .bottomTrailing)
    }
}
 
struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

Anmerkung

Sie müssen für jeden Datenanbieter, den Sie verwenden, entweder in Ihrer Anwendung oder in Ihrer Dokumentation ein Wortzeichen oder eine Textzuweisung angeben. Attributionszeichenfolgen sind in der Style-Deskriptor-Antwort unter den source.grabmaptiles.attribution Schlüsseln sources.esri.attributionsources.here.attribution, und enthalten. Wenn Sie Amazon-Location-Ressourcen mit Datenanbietern verwenden, lesen Sie unbedingt die Servicebedingungen.

Erstellen der Anwendung: Anforderungstransformation

Erstellen Sie eine neue Swift-Datei mit dem Namen , die die folgende Klassendefinition AWSSignatureV4Delegate.swift enthält, um AWS-Anfragen abzufangen und sie mit Signature Version 4 zu signieren. Eine Instance dieser Klasse wird als Offline-Speicherdelegierter zugewiesen, der auch für das Umschreiben von URLs in der Kartenansicht verantwortlich ist.

import AWSCore
import Mapbox
 
class AWSSignatureV4Delegate : NSObject, MGLOfflineStorageDelegate {
    private let region: AWSRegionType
    private let identityPoolId: String
    private let credentialsProvider: AWSCredentialsProvider
 
    init(region: AWSRegionType, identityPoolId: String) {
        self.region = region
        self.identityPoolId = identityPoolId
        self.credentialsProvider = AWSCognitoCredentialsProvider(regionType: region, identityPoolId: identityPoolId)
        super.init()
    }
 
    class func doubleEncode(path: String) -> String? {
        return path.addingPercentEncoding(withAllowedCharacters: .urlPathAllowed)?
            .addingPercentEncoding(withAllowedCharacters: .urlPathAllowed)
    }
 
    func offlineStorage(_ storage: MGLOfflineStorage, urlForResourceOf kind: MGLResourceKind, with url: URL) -> URL {
        if url.host?.contains("amazonaws.com") != true {
            // not an AWS URL
            return url
        }
 
        // URL-encode spaces, etc.
        let keyPath = String(url.path.dropFirst())
        guard let percentEncodedKeyPath = keyPath.addingPercentEncoding(withAllowedCharacters: .urlPathAllowed) else {
            print("Invalid characters in path '\(keyPath)'; unsafe to sign")
            return url
        }
 
        let endpoint = AWSEndpoint(region: region, serviceName: "geo", url: url)
        let requestHeaders: [String: String] = ["host": endpoint!.hostName]
 
        // sign the URL
        let task = AWSSignatureV4Signer
            .generateQueryStringForSignatureV4(
                withCredentialProvider: credentialsProvider,
                httpMethod: .GET,
                expireDuration: 60,
                endpoint: endpoint!,
                // workaround for https://github.com/aws-amplify/aws-sdk-ios/issues/3215
                keyPath: AWSSignatureV4Delegate.doubleEncode(path: percentEncodedKeyPath),
                requestHeaders: requestHeaders,
                requestParameters: .none,
                signBody: true)
        task.waitUntilFinished()
 
        if let error = task.error as NSError? {
            print("Error occurred: \(error)")
        }
 
        if let result = task.result {
            var urlComponents = URLComponents(url: (result as URL), resolvingAgainstBaseURL: false)!
            // re-use the original path; workaround for https://github.com/aws-amplify/aws-sdk-ios/issues/3215
            urlComponents.path = url.path
 
            // have Mapbox GL fetch the signed URL
            return (urlComponents.url)!
        }
 
        // fall back to an unsigned URL
        return url
    }
}

Erstellen der Anwendung: Kartenansicht

Die Kartenansicht ist für die Initialisierung einer Instance von AWSSignatureV4Delegate und die Konfiguration der zugrunde liegenden verantwortlichMGLMapView, die Ressourcen abruft und die Karte rendert. Außerdem übernimmt es die Weitergabe von Attributionszeichenfolgen aus der Quelle des Stildeskriptors zurück an die ContentView.

Erstellen Sie eine neue Swift-Datei mit dem Namen , die die folgende struct Definition MapView.swift enthält:

import SwiftUI
import AWSCore
import Mapbox
 
struct MapView: UIViewRepresentable {
    @Binding var attribution: String
 
    private var mapView: MGLMapView
    private var signingDelegate: MGLOfflineStorageDelegate
 
    init(attribution: Binding<String>) {
        let regionName = Bundle.main.object(forInfoDictionaryKey: "AWSRegion") as! String
        let identityPoolId = Bundle.main.object(forInfoDictionaryKey: "IdentityPoolId") as! String
        let mapName = Bundle.main.object(forInfoDictionaryKey: "MapName") as! String
 
        let region = (regionName as NSString).aws_regionTypeValue()
 
        // MGLOfflineStorage doesn't take ownership, so this needs to be a member here
        signingDelegate = AWSSignatureV4Delegate(region: region, identityPoolId: identityPoolId)
 
        // register a delegate that will handle SigV4 signing
        MGLOfflineStorage.shared.delegate = signingDelegate
 
        mapView = MGLMapView(
            frame: .zero,
            styleURL: URL(string: "https://maps.geo.\(regionName).amazonaws.com/maps/v0/maps/\(mapName)/style-descriptor"))
 
        _attribution = attribution
    }
 
    func makeCoordinator() -> Coordinator {
        Coordinator($attribution)
    }
 
    class Coordinator: NSObject, MGLMapViewDelegate {
        var attribution: Binding<String>
 
        init(_ attribution: Binding<String>) {
            self.attribution = attribution
        }
 
        func mapView(_ mapView: MGLMapView, didFinishLoading style: MGLStyle) {
            let source = style.sources.first as? MGLVectorTileSource
            let attribution = source?.attributionInfos.first
            self.attribution.wrappedValue = attribution?.title.string ?? ""
        }
    }
 
    // MARK: - UIViewRepresentable protocol
 
    func makeUIView(context: UIViewRepresentableContext<MapView>) -> MGLMapView {
        mapView.delegate = context.coordinator
 
        mapView.logoView.isHidden = true
        mapView.attributionButton.isHidden = true
        return mapView
    }
 
    func updateUIView(_ uiView: MGLMapView, context: UIViewRepresentableContext<MapView>) {
    }
 
    // MARK: - MGLMapView proxy
 
    func centerCoordinate(_ centerCoordinate: CLLocationCoordinate2D) -> MapView {
        mapView.centerCoordinate = centerCoordinate
        return self
    }
 
    func zoomLevel(_ zoomLevel: Double) -> MapView {
        mapView.zoomLevel = zoomLevel
        return self
    }
}

Wenn Sie diese Anwendung ausführen, wird eine Vollbildkarte im Stil Ihrer Wahl angezeigt. Dieses Beispiel ist als Teil des Amazon Location Service-Beispiel-Repositorys auf verfügbarGitHub.