Utilisation de Tangram ES pour iOS avec Amazon Location Service

Tangram ES est une bibliothèque C++ pour le rendu de cartes 2D et 3D à partir de données vectorielles à l'aide d'OpenGL ES. C'est l'équivalent natif de Tangram.

Les styles Tangram conçus pour fonctionner avec le schéma Tilezen sont largement compatibles avec Amazon Location lorsque vous utilisez des cartes provenant de HERE. Il s'agit des licences suivantes :

• Bubble Wrap — Un style d'orientation complet avec des icônes utiles pour les points d'intérêt

• Cinnabar — Un look classique et incontournable pour les applications cartographiques générales

• Refill — Un style de carte minimaliste conçu pour les superpositions de visualisation de données, inspiré du style Toner emblématique de Stamen Design

• Tron — Une exploration des transformations d'échelle dans le langage visuel de TRON

• Walkabout — Un style axé sur le plein air, parfait pour la randonnée ou les sorties

Ce guide explique comment intégrer Tangram ES pour iOS à Amazon Location en utilisant le style Tangram appelé Cinnabar. Cet exemple est disponible dans le référentiel d'exemples Amazon Location Service sur GitHub.

Bien que les autres styles Tangram soient mieux accompagnés de tuiles matricielles, qui encodent les informations du terrain, cette fonctionnalité n'est pas encore prise en charge par Amazon Location.

Important

Les styles Tangram présentés dans le didacticiel suivant sont uniquement compatibles avec les ressources cartographiques Amazon Location configurées avec ce VectorHereContrast style.

Création de l'application : initialisation

Pour initialiser l'application, procédez comme suit :

1. Créez un nouveau projet Xcode à partir du modèle d'application.

2. Sélectionnez SwiftUI pour son interface.

3. Sélectionnez l'application SwiftUI pour son cycle de vie.

4. Sélectionnez Swift pour sa langue.

Création de l'application : ajout de dépendances

Pour ajouter des dépendances, vous pouvez utiliser un gestionnaire de dépendances tel que CocoaPods:

1. Dans votre terminal, installez CocoaPods :

   sudo gem install cocoapods

2. Accédez au répertoire du projet de votre application et initialisez le Podfile avec le gestionnaire de CocoaPods packages :

   pod init

3. Ouvrez le Podfile pour ajouter AWSCore et en Tangram-es tant que dépendances :

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

4. Téléchargez et installez les dépendances :

   pod install --repo-update

5. Ouvrez l'espace de travail Xcode qui CocoaPods a créé :

   xed .

Création de l'application : Configuration

Ajoutez les clés et valeurs suivantes à Info.plist pour configurer l'application et désactiver la télémétrie :

Clé	Valeur
AWSRegion	us-east-1
IdentityPoolId	us-east- 1:54 f2ba88-9390-498d-aaa5-0d97fb7ca3bd
MapName	ExampleMap
URL de la scène	https://www.nextzen.org/carto/cinnabar-style/9/cinnabar-style.zip

Création de l'application : ContentView mise en page

Pour afficher la carte, modifiez ContentView.swift :

• Ajoutez un MapView qui affiche la carte.

• Ajoutez un TextField qui affiche l'attribution.

Cela définit également le point central initial de la carte.

Note

Vous devez indiquer l'attribution d'un mot ou d'un texte pour chaque fournisseur de données que vous utilisez, que ce soit sur votre application ou dans votre documentation. Les chaînes d'attribution sont incluses dans la réponse du descripteur de style sous les source.grabmaptiles.attribution touches sources.esri.attributionsources.here.attribution, et. Lorsque vous utilisez les ressources Amazon Location avec des fournisseurs de données, assurez-vous de lire les conditions générales du service.

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()
    }
}

Création de l'application : transformation des demandes

Créez un nouveau fichier Swift nommé AWSSignatureV4URLHandler.swift contenant la définition de classe suivante pour intercepter les AWS demandes et les signer à l'aide de Signature Version 4. Cela sera enregistré en tant que gestionnaire d'URL dans le MapView Tangram.

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)
    }
}

Création de l'application : vue cartographique

La vue cartographique est chargée d'initialiser une instance du sous-jacent AWSSignatureV4Delegate et de le configurerMGLMapView, qui récupère les ressources et affiche la carte. Il gère également la propagation des chaînes d'attribution depuis la source du descripteur de style vers le. ContentView

Créez un nouveau fichier Swift nommé MapView.swift contenant la struct définition suivante :

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) {
    }
}

L'exécution de cette application affiche une carte en plein écran dans le style de votre choix. Cet exemple est disponible dans le référentiel d'exemples Amazon Location Service sur GitHub.