Verwenden von Tangram ES für iOS mit Amazon Location Service

Tangram ES ist eine C++-Bibliothek zum Rendern von 2D- und 3D-Zuweisungen aus Vektordaten mit OpenGL ES. Es ist das native Gegenstück zu Tangram .

Tangram-Stile, die für die Arbeit mit dem Tilezen-Schema entwickelt wurden, sind weitgehend mit Amazon Location kompatibel, wenn Karten von HERE verwendet werden. Dazu zählen:

• Blasen-Wrap – Ein voll funktionsfähiger Stil mit hilfreichen Symbolen für wichtige Punkte

• Cinnabar – Ein klassisches Erscheinungsbild für allgemeine Mapping-Anwendungen

• Auffüllen – Ein microSD-Kartenstil, der für Datenvisualisierungs-Überlagerungen entwickelt wurde und dem halben Toner-Stil von Stamen Design entspricht

• Boln – Eine Untersuchung von Skalierungstransformationen in der visuellen Sprache von TRON

• Walkaround – Ein auf den Fußabdruck ausgerichteter Stil, der sich perfekt zum Erkunden oder Verlassen von eignet

In diesem Handbuch wird beschrieben, wie Sie Tangram ES für iOS mit Amazon Location integrieren, indem Sie den Tangram-Stil namens Cinnabar verwenden. Dieses Beispiel ist als Teil des Amazon Location Service-Beispiel-Repositorys auf verfügbarGitHub.

Obwohl andere Tangram-Stile am besten von Rasterkacheln begleitet werden, die Telefonieinformationen codieren, wird diese Funktion von Amazon Location noch nicht unterstützt.

Wichtig

Die Tangram-Stile im folgenden Tutorial sind nur mit Amazon Location Map-Ressourcen kompatibel, die mit dem -VectorHereContrastStil konfiguriert sind.

Erstellen der Anwendung: Initialisierung

So initialisieren Sie die Anwendung:

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

2. Wählen Sie SwiftUI als Schnittstelle aus.

3. Wählen Sie SwiftUI-Anwendung für ihre Lebensdauer aus.

4. Wählen Sie Swift als Sprache aus.

Erstellen der Anwendung: Abhängigkeiten hinzufügen

Um Abhängigkeiten hinzuzufügen, können Sie einen Abhängigkeitsmanager verwenden, z. B. CocoaPods:

1. Installieren Sie in Ihrem Terminal CocoaPods:

   sudo gem install cocoapods

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

   pod init

3. Öffnen Sie das Podfile, um AWSCore und Tangram-es als Abhängigkeiten hinzuzufügen:

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

4. Abhängigkeiten herunterladen und installieren:

   pod install --repo-update

5. Ö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 und Telemetrie zu deaktivieren:

Schlüssel	Wert
AWSRegion	us-east-1
IdentityPoolId	us-east-1:54f2ba88-9390-498d-aaaa5-0d97fb7ca3bd
MapName	ExampleMap
SceneURL	https://www.nextzen.org/carto/cinnabar-style/9/cinnabar-style.zip

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.

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 Nutzungsbedingungen für -Services.

import SwiftUI
import TangramMap
 
struct ContentView: View {
    var body: some View {
        MapView()
            .cameraPosition(TGCameraPosition(
                                center: CLLocationCoordinate2DMake(49.2819, -123.1187),
                                zoom: 10,
                                bearing: 0,
                                pitch: 0))
            .edgesIgnoringSafeArea(.all)
            .overlay(
                Text("© 2020 HERE")
                    .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()
    }
}

Erstellen der Anwendung: Anforderungstransformation

Erstellen Sie eine neue Swift-Datei mit dem Namen , die die folgende Klassendefinition AWSSignatureV4URLHandler.swift enthält, um AWS Anforderungen abzufangen und sie mit Signature Version 4 zu signieren. Dies wird als URL-Handler innerhalb des Tangram registriertMapView.

import AWSCore
import TangramMap
 
class AWSSignatureV4URLHandler: TGDefaultURLHandler {
    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()
    }
 
    override func downloadRequestAsync(_ url: URL, completionHandler: @escaping TGDownloadCompletionHandler) -> UInt {
        if url.host?.contains("amazonaws.com") != true {
            // not an AWS URL
            return super.downloadRequestAsync(url, completionHandler: completionHandler)
        }
 
        // URL-encode spaces, etc.
        let keyPath = String(url.path.dropFirst())
        guard let keyPathSafe = keyPath.addingPercentEncoding(withAllowedCharacters: .urlPathAllowed) else {
            print("Invalid characters in path '\(keyPath)'; unsafe to sign")
            return super.downloadRequestAsync(url, completionHandler: completionHandler)
        }
 
        // sign the URL
        let endpoint = AWSEndpoint(region: region, serviceName: "geo", url: url)
        let requestHeaders: [String: String] = ["host": endpoint!.hostName]
        let task = AWSSignatureV4Signer
            .generateQueryStringForSignatureV4(
                withCredentialProvider: credentialsProvider,
                httpMethod: .GET,
                expireDuration: 60,
                endpoint: endpoint!,
                keyPath: keyPathSafe,
                requestHeaders: requestHeaders,
                requestParameters: .none,
                signBody: true)
        task.waitUntilFinished()
 
        if let error = task.error as NSError? {
            print("Error occurred: \(error)")
        }
 
        if let result = task.result {
            // have Tangram fetch the signed URL
            return super.downloadRequestAsync(result as URL, completionHandler: completionHandler)
        }
 
        // fall back to an unsigned URL
        return super.downloadRequestAsync(url, completionHandler: completionHandler)
    }
}

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 AWSCore
import TangramMap
import SwiftUI
 
struct MapView: UIViewRepresentable {
    private let mapView: TGMapView
 
    init() {
        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 sceneURL = URL(string: Bundle.main.object(forInfoDictionaryKey: "SceneURL") as! String)!
 
        let region = (regionName as NSString).aws_regionTypeValue()
 
        // rewrite tile URLs to point at AWS resources
        let sceneUpdates = [
            TGSceneUpdate(path: "sources.mapzen.url",
                          value: "https://maps.geo.\(regionName).amazonaws.com/maps/v0/maps/\(mapName)/tiles/{z}/{x}/{y}")]
 
        // instantiate a TGURLHandler that will sign AWS requests
        let urlHandler = AWSSignatureV4URLHandler(region: region, identityPoolId: identityPoolId)
 
        // instantiate the map view and attach the URL handler
        mapView = TGMapView(frame: .zero, urlHandler: urlHandler)
 
        // load the map style and apply scene updates (properties modified at runtime)
        mapView.loadScene(from: sceneURL, with: sceneUpdates)
    }
 
    func cameraPosition(_ cameraPosition: TGCameraPosition) -> MapView {
        mapView.cameraPosition = cameraPosition
 
        return self
    }
 
    // MARK: - UIViewRepresentable protocol
 
    func makeUIView(context: Context) -> TGMapView {
        return mapView
    }
 
    func updateUIView(_ uiView: TGMapView, context: Context) {
    }
}

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.