Menggunakan Tangram ES untuk Android dengan Amazon Location Service

Tangram ES adalah pustaka C++ untuk merender peta 2D dan 3D dari data vektor menggunakan OpenGL ES. Ini adalah mitra asli Tangram.

Gaya Tangram yang dibuat untuk bekerja dengan skema Tilezen sebagian besar kompatibel dengan Lokasi Amazon saat menggunakan peta dari SINI. Ini termasuk:

• Bubble Wrap - Gaya pencarian jalan berfitur lengkap dengan ikon bermanfaat untuk tempat menarik.

• Cinnabar — Tampilan klasik dan pilihan untuk aplikasi pemetaan umum.

• Isi Ulang — Gaya peta minimalis yang dirancang untuk hamparan visualisasi data, terinspirasi oleh gaya Toner mani oleh Stamen Design.

• Tron — Eksplorasi transformasi skala dalam bahasa visual TRON.

• Walkabout — Gaya yang berfokus pada luar ruangan yang sempurna untuk hiking atau keluar dan berkeliling.

Panduan ini menjelaskan cara mengintegrasikan Tangram ES untuk Android dengan Lokasi Amazon menggunakan gaya Tangram yang disebut Cinnabar. Sampel ini tersedia sebagai bagian dari repositori sampel Amazon Location Service di. GitHub

Sementara gaya Tangram lainnya paling baik disertai dengan ubin raster, yang menyandikan informasi medan, fitur ini belum didukung oleh Amazon Location.

penting

Gaya Tangram dalam tutorial berikut hanya kompatibel dengan sumber daya peta Lokasi Amazon yang dikonfigurasi dengan VectorHereContrast gaya.

Membangun aplikasi: Inisialisasi

Untuk menginisialisasi aplikasi Anda:

1. Buat project Android Studio baru dari template Empty Activity.

2. Pastikan bahwa Kotlin dipilih untuk bahasa proyek.

3. Pilih SDK Minimum API 16: Android 4.1 (Jelly Bean) atau yang lebih baru.

4. Buka Struktur Proyek untuk memilih File, Struktur Proyek... , dan pilih bagian Dependensi.

5. Dengan <All Modules>dipilih, pilih tombol + untuk menambahkan Ketergantungan Perpustakaan baru.

6. Tambahkan AWS Android SDK versi 2.19.1 atau yang lebih baru. Sebagai contoh: com.amazonaws:aws-android-sdk-core:2.19.1

7. Tambahkan Tangram versi 0.13.0 atau yang lebih baru. Misalnya: com.mapzen.tangram:tangram:0.13.0.

   catatan

   Mencari Tangram: com.mapzen.tangram:tangram:0.13.0 akan menghasilkan pesan bahwa itu “tidak ditemukan”, tetapi memilih OK akan memungkinkannya untuk ditambahkan.

Membangun aplikasi: Konfigurasi

Untuk mengonfigurasi aplikasi Anda dengan sumber daya dan AWS Wilayah Anda:

1. Buatapp/src/main/res/values/configuration.xml.

2. Masukkan nama dan pengidentifikasi sumber daya Anda, dan juga AWS Wilayah tempat mereka dibuat:

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <string name="identityPoolId">us-east-1:54f2ba88-9390-498d-aaa5-0d97fb7ca3bd</string>
    <string name="mapName">TangramExampleMap</string>
    <string name="awsRegion">us-east-1</string>
    <string name="sceneUrl">https://www.nextzen.org/carto/cinnabar-style/9/cinnabar-style.zip</string>
    <string name="attribution">© 2020 HERE</string>
</resources>

Membangun aplikasi: Tata letak aktivitas

Suntingapp/src/main/res/layout/activity_main.xml:

• Tambahkan aMapView, yang membuat peta. Ini juga akan mengatur titik pusat awal peta.

• Tambahkan aTextView, yang menampilkan atribusi.

Ini juga akan mengatur titik pusat awal peta.

catatan

Anda harus memberikan tanda kata atau atribusi teks untuk setiap penyedia data yang Anda gunakan, baik pada aplikasi atau dokumentasi Anda. String atribusi disertakan dalam respons deskriptor gaya di bawahsources.esri.attribution,sources.here.attribution, dan kunci. source.grabmaptiles.attribution

Karena Tangram tidak meminta sumber daya ini, dan hanya kompatibel dengan peta dari SINI, gunakan “© 2020 DI SINI”. Saat menggunakan sumber daya Lokasi Amazon dengan penyedia data, pastikan untuk membaca syarat dan ketentuan layanan.

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">
 
    <com.mapzen.tangram.MapView
        android:id="@+id/map"
        android:layout_height="match_parent"
        android:layout_width="match_parent" />
 
    <TextView
        android:id="@+id/attributionView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="#80808080"
        android:padding="5sp"
        android:textColor="@android:color/black"
        android:textSize="10sp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        tools:ignore="SmallSp" />
</androidx.constraintlayout.widget.ConstraintLayout>

Membangun aplikasi: Minta transformasi

Buat kelas bernama SigV4Interceptor untuk mencegat AWS permintaan dan menandatanganinya menggunakan Signature Version 4. Ini akan terdaftar dengan klien HTTP yang digunakan untuk mengambil sumber daya peta saat Aktivitas Utama dibuat.

package aws.location.demo.okhttp
 
import com.amazonaws.DefaultRequest
import com.amazonaws.auth.AWS4Signer
import com.amazonaws.auth.AWSCredentialsProvider
import com.amazonaws.http.HttpMethodName
import com.amazonaws.util.IOUtils
import okhttp3.HttpUrl
import okhttp3.Interceptor
import okhttp3.Request
import okhttp3.Response
import okio.Buffer
import java.io.ByteArrayInputStream
import java.net.URI
 
class SigV4Interceptor(
    private val credentialsProvider: AWSCredentialsProvider,
    private val serviceName: String
) : Interceptor {
    override fun intercept(chain: Interceptor.Chain): Response {
        val originalRequest = chain.request()
 
        if (originalRequest.url().host().contains("amazonaws.com")) {
            val signer = if (originalRequest.url().encodedPath().contains("@")) {
                // the presence of "@" indicates that it doesn't need to be double URL-encoded
                AWS4Signer(false)
            } else {
                AWS4Signer()
            }
 
            val awsRequest = toAWSRequest(originalRequest, serviceName)
            signer.setServiceName(serviceName)
            signer.sign(awsRequest, credentialsProvider.credentials)
 
            return chain.proceed(toSignedOkHttpRequest(awsRequest, originalRequest))
        }
 
        return chain.proceed(originalRequest)
    }
 
    companion object {
        fun toAWSRequest(request: Request, serviceName: String): DefaultRequest<Any> {
            // clone the request (AWS-style) so that it can be populated with credentials
            val dr = DefaultRequest<Any>(serviceName)
 
            // copy request info
            dr.httpMethod = HttpMethodName.valueOf(request.method())
            with(request.url()) {
                dr.resourcePath = uri().path
                dr.endpoint = URI.create("${scheme()}://${host()}")
 
                // copy parameters
                for (p in queryParameterNames()) {
                    if (p != "") {
                        dr.addParameter(p, queryParameter(p))
                    }
                }
            }
 
            // copy headers
            for (h in request.headers().names()) {
                dr.addHeader(h, request.header(h))
            }
 
            // copy the request body
            val bodyBytes = request.body()?.let { body ->
                val buffer = Buffer()
                body.writeTo(buffer)
                IOUtils.toByteArray(buffer.inputStream())
            }
 
            dr.content = ByteArrayInputStream(bodyBytes ?: ByteArray(0))
 
            return dr
        }
 
        fun toSignedOkHttpRequest(
            awsRequest: DefaultRequest<Any>,
            originalRequest: Request
        ): Request {
            // copy signed request back into an OkHttp Request
            val builder = Request.Builder()
 
            // copy headers from the signed request
            for ((k, v) in awsRequest.headers) {
                builder.addHeader(k, v)
            }
 
            // start building an HttpUrl
            val urlBuilder = HttpUrl.Builder()
                .host(awsRequest.endpoint.host)
                .scheme(awsRequest.endpoint.scheme)
                .encodedPath(awsRequest.resourcePath)
 
            // copy parameters from the signed request
            for ((k, v) in awsRequest.parameters) {
                urlBuilder.addQueryParameter(k, v)
            }
 
            return builder.url(urlBuilder.build())
                .method(originalRequest.method(), originalRequest.body())
                .build()
        }
    }
}

Membangun aplikasi: Kegiatan utama

Aktivitas Utama bertanggung jawab untuk menginisialisasi tampilan yang akan ditampilkan kepada pengguna. Ini melibatkan:

• Membuat Instantiasi Amazon Cognito. CredentialsProvider

• Mendaftarkan pencegat Signature Version 4.

• Mengkonfigurasi peta dengan mengarahkannya ke gaya peta, mengganti URL ubin, dan menampilkan atribusi yang sesuai.

MainActivityjuga bertanggung jawab untuk meneruskan peristiwa siklus hidup ke tampilan peta.

package aws.location.demo.tangram
 
import android.os.Bundle
import android.widget.TextView
import androidx.appcompat.app.AppCompatActivity
import aws.location.demo.okhttp.SigV4Interceptor
import com.amazonaws.auth.CognitoCachingCredentialsProvider
import com.amazonaws.regions.Regions
import com.mapzen.tangram.*
import com.mapzen.tangram.networking.DefaultHttpHandler
import com.mapzen.tangram.networking.HttpHandler
 
private const val SERVICE_NAME = "geo"
 
class MainActivity : AppCompatActivity(), MapView.MapReadyCallback {
    private var mapView: MapView? = null
 
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
 
        setContentView(R.layout.activity_main)
 
        mapView = findViewById(R.id.map)
 
        mapView?.getMapAsync(this, getHttpHandler())
        findViewById<TextView>(R.id.attributionView).text = getString(R.string.attribution)
    }
 
    override fun onMapReady(mapController: MapController?) {
        val sceneUpdates = arrayListOf(
            SceneUpdate(
                "sources.mapzen.url",
                "https://maps.geo.${getString(R.string.awsRegion)}.amazonaws.com/maps/v0/maps/${
                    getString(
                        R.string.mapName
                    )
                }/tiles/{z}/{x}/{y}"
            )
        )
 
        mapController?.let { map ->
            map.updateCameraPosition(
                CameraUpdateFactory.newLngLatZoom(
                    LngLat(-123.1187, 49.2819),
                    12F
                )
            )
            map.loadSceneFileAsync(
                getString(R.string.sceneUrl),
                sceneUpdates
            )
        }
    }
 
    private fun getHttpHandler(): HttpHandler {
        val builder = DefaultHttpHandler.getClientBuilder()
 
        val credentialsProvider = CognitoCachingCredentialsProvider(
            applicationContext,
            getString(R.string.identityPoolId),
            Regions.US_EAST_1
        )
 
        return DefaultHttpHandler(
            builder.addInterceptor(
                SigV4Interceptor(
                    credentialsProvider,
                    SERVICE_NAME
                )
            )
        )
    }
 
    override fun onResume() {
        super.onResume()
        mapView?.onResume()
    }
 
    override fun onPause() {
        super.onPause()
        mapView?.onPause()
    }
 
    override fun onLowMemory() {
        super.onLowMemory()
        mapView?.onLowMemory()
    }
 
    override fun onDestroy() {
        super.onDestroy()
        mapView?.onDestroy()
    }
}

Menjalankan aplikasi ini menampilkan peta layar penuh dengan gaya yang Anda pilih. Sampel ini tersedia sebagai bagian dari repositori sampel Amazon Location Service di. GitHub