เอกสาร / การตั้งค่า / Android / MapTiler

การตั้งค่า MapTiler

นี่คือขั้นตอนการใช้ MapTiler Android SDK อย่างเป็นทางการ (com.maptiler:maptiler-sdk-kotlin) จาก MapConductor คุณสามารถเลือกรูปแบบอ้างอิงของ MapTiler Cloud ตามชื่อได้

MODULE
com.mapconductor:for-maptiler
API KEY
จำเป็น
VIEW
MapTilerMapView
TIME
10 นาที
ผู้ให้บริการเดียวกัน แพลตฟอร์มอื่นiOSReact

ก่อนเริ่ม

สภาพแวดล้อมการพัฒนา Android (Android Studio)
บัญชีและคีย์ API ของ MapTiler Cloud
STEP 01

รับคีย์ API

สร้างคีย์ API ในแดชบอร์ดของ MapTiler Cloud มีโควต้าฟรีให้ใช้

STEP 02

เพิ่มการพึ่งพา

MapTiler SDK สามารถรับได้จาก Maven Central

app/build.gradle.ktsKotlin
dependencies {
    // MapTiler Android SDK
    implementation("com.maptiler:maptiler-sdk-kotlin:2.1.0")

    // MapConductor BOM pins every module below
    implementation(platform("com.mapconductor:mapconductor-bom:1.3.1"))

    implementation("com.mapconductor:core")
    implementation("com.mapconductor:for-maptiler")
}
STEP 03

ส่งคีย์ API

โมดูลจะอ่านคีย์จาก meta-data ของไฟล์ Manifest หากใช้ Secrets Gradle Plugin ให้ใช้ผ่านตัวยึดตำแหน่ง สามารถตั้งค่าได้โดยตรงจากโค้ด

AndroidManifest.xmlXML
<manifest>
    <uses-permission android:name="android.permission.INTERNET" />

    <application>
        <meta-data
            android:name="MAPTILER_API_KEY"
            android:value="${MAPTILER_API_KEY}" />
    </application>
</manifest>
MainActivity.ktKotlin
// Alternative: set it in code before the first map is shown
com.maptiler.maptilersdk.MTConfig.apiKey = "YOUR_MAPTILER_API_KEY"
ข้อควรระวัง
อย่า commit secrets.properties ไปยังระบบควบคุมเวอร์ชัน การเพิ่มลงใน .gitignore จะช่วยป้องกันข้อผิดพลาด ใน CI ให้ส่งผ่านช่องทางที่ปลอดภัยอื่นเช่นตัวแปรสภาพแวดล้อม

ตรวจสอบ

สิ่งที่ควรเห็น

เลือกรูปแบบและแสดงแผนที่ หากกระเบื้องโหลดแล้วถือว่าเสร็จสิ้น

TestMapTiler.ktJetpack Compose
@Composable
fun TestMapTiler(modifier: Modifier = Modifier) {
    val mapState = rememberMapTilerMapViewState(
        mapDesign = MapTilerDesign.Streets,
        cameraPosition = MapCameraPosition(
            position = GeoPoint(35.6812, 139.7671),
            zoom = 11.0,
        ),
    )

    // If the map appears, the setup is correct.
    MapTilerMapView(state = mapState, modifier = modifier)
}

ดีไซน์แผนที่

MapTilerDesign เป็นการรวบรวมรูปแบบอ้างอิงของ MapTiler Cloud ตามที่เป็นอยู่

MapTilerDesign
Notes
Streets / StreetsDark / StreetsLight
แผนที่ถนนมาตรฐานพร้อมรูปแบบสว่างและมืด
Basic / Bright
รูปแบบที่ลดรายละเอียดข้อมูล
Satellite
ภาพดาวเทียม
Outdoor / Winter / Topo
กลางแจ้ง ฤดูหนาว ภูมิประเทศ
Toner / Dataviz / Backdrop
สำหรับแผนที่ฐานเพื่อแสดงข้อมูล
Ocean / Landscape / Aquarelle / OpenStreetMap
รูปแบบตามธีมอื่นๆ

การแก้ปัญหา

แผนที่ขาวโพลง

  • ตรวจสอบว่ามีค่าจริงอยู่ใน MAPTILER_API_KEY ในไฟล์ Manifest หรือไม่
  • ตรวจสอบที่ฝั่ง MapTiler Cloud ว่าคีย์มีผลอยู่หรือไม่ และไม่ได้เกินโควต้าฟรี
  • ตรวจสอบว่ามีสิทธิ์ INTERNET หรือไม่

บิลด์ไม่ผ่าน

  • ตรวจสอบว่าพิกัดและเวอร์ชันของ Map SDK ตรงกับที่ระบุใน Version Catalog หรือไม่
  • ตรวจสอบว่ามีคำจำกัดความของ Repository อยู่ใน settings.gradle.kts หรือไม่ (หาก repositoriesMode เป็น FAIL_ON_PROJECT_REPOS รีโพซิทอรีฝั่งโมดูลจะถูกละเว้น)
  • หากมี Map SDK หลายตัวพร้อมกัน ให้ตรวจสอบความขัดแย้งของการพึ่งพาด้วย ./gradlew :app:dependencies

ถัดไป

Marker, Polyline, Polygon, Circle, GroundImage, RasterLayer, InfoBubble สามารถใช้งานได้ทั้งหมดผ่าน API ทั่วไป เนื่องจาก Android SDK ของ MapTiler ทำงาน MapLibre GL JS ใน WebView รูปร่างจะถูกเพิ่มลงในสไตล์เป็น GeoJSON sources และเลเยอร์ fill/line เนื่องจากการประมาณค่าเส้นโค้งทางภูมิศาสตร์และการจัดการรูปร่างที่มีรูเป็นโมฆะใช้การใช้งานหลักทั่วไป จึงมีรูปร่างเหมือนกับผู้ให้บริการรายอื่น