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

การตั้งค่า MapTiler

นี่คือขั้นตอนการใช้สไตล์จาก MapTiler Cloud ผ่าน MapConductor เวอร์ชัน iOS ใช้ MapLibre Native เป็นเรนเดอร์และเลือกสไตล์อ้างอิงของ MapTiler ตามชื่อได้

PACKAGE

ios-for-maptiler

API KEY

จำเป็น

MIN iOS

15.1

VIEW

MapTilerMapView

ผู้ให้บริการเดียวกัน แพลตฟอร์มอื่นAndroid React

ดูเดโมแผนที่ร้านค้า · React ↗

ก่อนเริ่ม

Xcode 15 ขึ้นไป

บัญชี MapTiler Cloud และคีย์ API

เป้าหมายการนำไปใช้งาน iOS 15.1 ขึ้นไป

STEP 01

รับคีย์ API

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

STEP 02

เพิ่มด้วย Swift Package Manager

ป้อน URL ของแพ็กเกจจาก File > Add Package Dependencies ใน Xcode MapLibre Native ซึ่งเป็นเรนเดอร์จะถูกเพิ่มเป็นการพึ่งพาโดยอัตโนมัติ

Package URLSwift Package Manager

https://github.com/MapConductor/ios-for-maptiler

Package.swiftSwift

dependencies: [
    .package(url: "https://github.com/MapConductor/ios-sdk-core", from: "1.3.1"),
    .package(url: "https://github.com/MapConductor/ios-for-maptiler", from: "1.0.0"),
],
targets: [
    .target(
        name: "YourApp",
        dependencies: [
            .product(name: "MapConductorCore", package: "ios-sdk-core"),
            .product(name: "MapConductorForMapTiler", package: "ios-for-maptiler"),
        ]
    ),
]

STEP 03

ส่งคีย์ API

ส่งผ่านต่อมุมมองหรือวางไว้ใน Info.plist เมื่อ apiKey ของมุมมองเป็น nil จะใช้ Info.plist แนวคิดเดียวกับเวอร์ชัน Android ที่อ่าน MAPTILER_API_KEY จาก AndroidManifest

ContentView.swiftSwift

// Per view
MapTilerMapView(state: mapViewState, apiKey: "YOUR_MAPTILER_API_KEY")

Info.plistXML

<!-- Fallback, used when the view's apiKey is nil -->
<key>MapTilerAPIKey</key>
<string>YOUR_MAPTILER_API_KEY</string>

ข้อควรระวัง

อย่าเขียนคีย์ลงในซอร์สโค้ดโดยตรง แต่ให้ฉีดเข้าไปในขณะสร้างผ่าน xcconfig หรือตัวแปรสภาพแวดล้อม

ตรวจสอบ

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

ถ้าแผนที่และมาร์กเกอร์ปรากฏขึ้นแสดงว่าเสร็จสิ้นแล้ว

ContentView.swiftSwiftUI

import SwiftUI
import MapConductorCore
import MapConductorForMapTiler

struct ContentView: View {
    @StateObject private var mapViewState = MapTilerViewState(
        cameraPosition: MapCameraPosition(
            position: GeoPoint(latitude: 35.6762, longitude: 139.6503),
            zoom: 11
        )
    )

    var body: some View {
        MapTilerMapView(state: mapViewState) {
            Marker(
                position: GeoPoint(latitude: 35.6762, longitude: 139.6503),
                icon: DefaultMarkerIcon(label: "Tokyo")
            )
        }
    }
}

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

MapTilerDesign รองรับสไตล์อ้างอิงของ MapTiler Cloud

MapTilerDesign

Notes

Streets / StreetsDark / StreetsLight

แผนที่ถนนมาตรฐานและรูปแบบสว่าง/มืด

Basic / Bright

สไตล์ที่ลดปริมาณข้อมูล

Satellite

ภาพดาวเทียม

Outdoor / Winter / Topo

กิจกรรมกลางแจ้ง ฤดูหนาว ภูมิประเทศ

Toner / Dataviz / Backdrop

สำหรับชั้นฐานเพื่อแสดงข้อมูล

Ocean / Landscape / Aquarelle / OpenStreetMap

สไตล์ตามหัวข้ออื่นๆ

การแก้ปัญหา

แผนที่ยังคงขาว

ตรวจสอบว่า apiKey ของมุมมองหรือ MapTilerAPIKey ใน Info.plist มีค่าหรือไม่
ตรวจสอบใน MapTiler Cloud ว่าคีย์ถูกต้องและไม่เกินโควต้าฟรีหรือไม่

บิลด์ล้มเหลว

ล้างโฟลเดอร์บิลด์ (Cmd+Shift+K)
ลบ ~/Library/Developer/Xcode/DerivedData และสร้างใหม่
อัปเดตการพึ่งพาของ Swift Package Manager หลีกเลี่ยงการใช้ร่วมกับ CocoaPods

เนื่องจากเวอร์ชัน iOS วาดภาพด้วย MapLibre Native จึงสามารถใช้ซ้อนทับ เช่น มาร์กเกอร์และรูปหลายเหลี่ยม ผ่าน API ร่วมได้ทันที