使用七巧板 ES 適用於 iOS 與 Amazon 定 Location Service

七巧板 ES 是一個 C ++ 庫，用於使用 OpenGL ES 從矢量數據渲染 2D 和 3D 地圖。這是七巧板的原生對應物。

使用來自 HERE 的地圖時，為與 Tlezen 架構搭配使用而建立的七巧板樣式與 Amazon 位置大致相容。其中包含：

• 泡沫包裝-一個全功能的尋路風格與興趣點有用的圖標

• 朱砂 — 一般地圖應用的經典外觀和首選

• 筆芯 — 一種簡約的地圖風格，專為數據可視化覆蓋而設計，靈感來自 Stamen Design 的開創性碳粉樣式

• Tron — TRON 視覺語言中規模轉換的探索

• Walkabout — 一種以戶外為中心的風格，非常適合徒步旅行或外出

本指南說明如何使用稱為朱砂的七巧板風格整合 iOS 版的七巧板 ES 與 Amazon 位置。此範例可作為上 Amazon 定 Location Service 範例儲存庫的一部分提供GitHub。

雖然其他七巧板樣式最好配有對地形資訊進行編碼的點陣圖磚，但 Amazon Location 尚未支援此功能。

重要

以下教學中的七巧板樣式僅與使用該樣VectorHereContrast式設定的 Amazon 位置地圖資源相容。

構建應用程序：初始化

若要初始化應用程式：

1. 從應用程序模板創建一個新的 Xcode 項目。

2. 選擇屏幕作為其界面。

3. 為其生命週期選取 SwiftUI 應用程式。

4. 選擇斯威夫特作為它的語言。

構建應用程序：添加依賴關係

要添加依賴關係，您可以使用依賴關係管理器，例如 CocoaPods：

1. 在您的終端中，安裝 CocoaPods：

   sudo gem install cocoapods

2. 導航到應用程序的項目目錄，並使用軟件 CocoaPods包管理器初始化 Podfile：

   pod init

3. 打開要添加的 Podfile AWSCore 並Tangram-es作為依賴關係：

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

4. 下載並安裝依賴關係：

   pod install --repo-update

5. 打開創建的 Xcode 工 CocoaPods 作區：

   xed .

構建應用程序：配置

將下列機碼和值新增至 Info.plist 以設定應用程式並停用遙測：

金鑰	值
AWSRegion	us-east-1
IdentityPoolId	美國東部-1：54 福爾巴 88-9390-498D
MapName	ExampleMap
場景網址	https://www.nextzen.org/carto/cinnabar-style/9/cinnabar-style.zip

構建應用程序： ContentView 佈局

若要彩現地圖，請編輯ContentView.swift：

• 添加MapView渲染地圖的一個。

• 添加一TextField個顯示歸因。

這也會設定地圖的初始中心點。

注意

您必須在應用程式或文件上為您使用的每個資料提供者提供文字標記或文字歸因。歸因字串包含在sources.esri.attribution、sources.here.attribution和source.grabmaptiles.attribution鍵下的樣式描述元回應中。搭配資料供應商使用 Amazon 位置資源時，請務必閱讀服務條款與條件。

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

構建應用程序：請求轉換

創建一個名為AWSSignatureV4URLHandler.swift包含以下類定義的新 Swift 文件，以攔截AWS請求並使用簽名版本 4 對其進行簽名。這將在七巧板MapView中註冊為 URL 處理程序。

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

構建應用程序：地圖視圖

地圖檢視負責初始化的執行個體，AWSSignatureV4Delegate並設定基礎MGLMapView，以擷取資源並呈現對應。它也會處理將歸因字串從樣式描述元的來源傳播回. ContentView

創建一個名為MapView.swift包含以下struct定義的新 Swift 文件：

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

執行此應用程式會以您選擇的樣式顯示全螢幕地圖。此範例可作為上 Amazon 定 Location Service 範例儲存庫的一部分提供GitHub。