Amazon Location Service로 iOS용 Tangram ES 사용

Tangram ES는 OpenGL ES를 사용하여 벡터 데이터에서 2D 및 3D 맵을 렌더링하기 위한 C++ 라이브러리입니다. 이것은 Tangram의 네이티브 버전입니다.

Tilezen 스키마와 함께 작동하도록 구축된 Tangram 스타일은 HERE의 맵을 사용할 때 Amazon Location과 대부분 호환됩니다. 다음이 포함됩니다.

• Bubble Wrap – 모든 기능을 갖춘 길 찾기 스타일로, 관심 지점을 표시하는 유용한 아이콘이 포함되어 있습니다.

• Cinnabar – 클래식한 디자인으로 일반 매핑 애플리케이션에 적합합니다.

• Refill – Stamen Design의 획기적인 Toner 스타일에서 영감을 받아 데이터 시각화 오버레이를 위해 디자인된 미니멀한 맵 스타일입니다.

• Tron – TRON의 시각적 언어를 활용한 스케일 변환에 대한 탐구

• Walkabout – 야외 활동에 초점을 맞춘 스타일로 하이킹이나 야외 활동에 안성맞춤입니다.

이 가이드에서는 Cinnabar라는 Tangram 스타일을 사용하여 iOS용 Tangram ES를 Amazon Location과 통합하는 방법을 설명합니다. 이 샘플은 의 Amazon Location Service 샘플 리포지토리의 일부로 제공됩니다 GitHub.

다른 Tangram 스타일은 지형 정보를 인코딩하는 래스터 타일을 사용하는 것이 가장 좋지만, Amazon Location에서는 아직 이 기능을 지원하지 않습니다.

중요

다음 튜토리얼의 Tangram 스타일은 VectorHereContrast 스타일로 구성된 Amazon Location 맵 리소스와만 호환됩니다.

애플리케이션 빌드: 초기화

애플리케이션을 초기화하려면,

1. 앱 템플릿에서 새 Xcode 프로젝트를 생성합니다

2. 인터페이스로 SwiftUI를 선택합니다.

3. 수명 주기로 SwiftUI 애플리케이션을 선택합니다.

4. 해당 언어로 Swift를 선택합니다.

애플리케이션 빌드: 종속성 추가

종속성을 추가하려면 다음과 같은 종속성 관리자를 사용할 수 있습니다. 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	us-east-1:54f2ba88-9390-498d-aaa5-0d97fb7ca3bd
MapName	ExampleMap
SceneURL	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 Location 리소스를 사용할 때는 서비스 이용 약관을 반드시 읽어보세요.

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 요청을 가로채고 Signature Version 4를 사용하여 서명합니다. 이는 Tangram 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.