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

การตั้งค่า MapLibre

ขั้นตอนการใช้ MapLibre Native ผ่าน MapConductor เริ่มต้นได้สั้นที่สุดโดยไม่ต้องใช้ API Key รูปลักษณ์ของแผนที่ขึ้นอยู่กับแหล่งจัดจำหน่าย Style JSON

PACKAGE

ios-for-maplibre

API KEY

ไม่จำเป็น

MIN iOS

15.1

VIEW

MapLibreMapView

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

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

ก่อนเริ่ม

Xcode 15 ขึ้นไป

Deployment Target iOS 15.1 ขึ้นไป

STEP 01

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

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

Package URLSwift Package Manager

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

Package.swiftSwift

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

STEP 02

กำหนดสไตล์

MapLibre เองไม่มีบัญชีหรือคีย์ อย่างไรก็ตาม คุณต้องระบุแหล่งจัดหาไทล์เอง หากคุณใช้บริการเชิงพาณิชย์เช่น MapTiler คีย์จะถูกฝังอยู่ใน URL ของ Style JSON MapConductor ไม่เกี่ยวข้องกับการรับรองความถูกต้องของผู้ให้บริการไทล์

ContentView.swiftSwift

// Built-in presets
mapState.mapDesignType = MapLibreDesign.OsmBright
mapState.mapDesignType = MapLibreDesign.OsmBrightJa
mapState.mapDesignType = MapLibreDesign.MapTilerTonerEn
mapState.mapDesignType = MapLibreDesign.DemoTiles

ข้อควรระวัง

สไตล์สาธิตมีไว้เพื่อการตรวจสอบการทำงานเท่านั้น ในเชิงพาณิชย์ คุณควรใช้ไทล์ของตัวเองหรือบริการเชิงพาณิชย์ และแสดงการระบุที่มาที่ผู้ให้บริการต้องการใน UI

STEP 03

เพิ่มสิทธิ์ตำแหน่ง (หากจำเป็น)

หากใช้ตำแหน่ง ให้ระบุวัตถุประสงค์ใน Info.plist และขออนุญาตจากแอปพลิเคชัน

Info.plistXML

<key>NSLocationWhenInUseUsageDescription</key>
<string>We need your location to display on the map</string>

LocationManager.swiftSwift

import CoreLocation

final class LocationManager: NSObject, ObservableObject, CLLocationManagerDelegate {
    private let manager = CLLocationManager()

    override init() {
        super.init()
        manager.delegate = self
    }

    func requestPermission() {
        manager.requestWhenInUseAuthorization()
    }
}

ตรวจสอบ

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

แสดงแผนที่ด้วยสไตล์ที่ระบุ หากไทล์โหลดและซูมและเลื่อนได้ ถือว่าเสร็จสิ้น

ContentView.swiftSwiftUI

import SwiftUI
import MapConductorCore
import MapConductorForMapLibre

struct ContentView: View {
    @StateObject var mapState = MapLibreViewState(
        mapDesignType: MapLibreDesign.OsmBright,
        cameraPosition: MapCameraPosition(
            position: GeoPoint(latitude: 35.6812, longitude: 139.7671),
            zoom: 12.0
        )
    )

    var body: some View {
        MapLibreMapView(state: mapState)
            .ignoresSafeArea()
    }
}

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

MapLibreDesign เป็นประเภทที่ห่อหุ้ม URL ของ Style JSON เมื่อใช้สไตล์ของคุณเอง ให้สร้างประเภทเดียวกันโดยตรง

MapLibreDesign

Notes

DemoTiles

ไทล์สาธิตที่เบา

OsmBright / OsmBrightEn / OsmBrightJa

OSM Bright ภาษาของป้ายกำกับต่างกัน

MapTilerTonerEn / MapTilerTonerJa

สไตล์ Toner คอนทราสต์สูง

MapTilerBasicEn / MapTilerBasicJa

สไตล์พื้นฐานที่ลดข้อมูลลง

การแก้ปัญหา

แผนที่ยังคงขาวทั้งหมด

ตรวจสอบว่าสามารถเข้าถึง URL ของ Style JSON ของ MapLibreDesign ที่เลือกได้หรือไม่
หากคุณใช้ผู้ให้บริการไทล์ ให้ตรวจสอบว่าคีย์ที่ฝังอยู่ใน URL ถูกต้องหรือไม่
ตรวจสอบว่า Deployment Target เป็น iOS 15.1 ขึ้นไปหรือไม่

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

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

เมื่อ MapLibreMapView ปรากฏขึ้น คุณสามารถซ้อนทับโอเวอร์เลย์ด้วย API สาธารณะเดียวกับผู้ให้บริการรายอื่นได้