# Mapbox iOS 集成模式将 iOS 上的 Mapbox Maps SDK v11 与 Swift、SwiftUI 和 UIKit 集成的官方模式。 **在以下情况下使用此技能：** * 安装和配置适用于 iOS 的 Mapbox 地图 SDK * 在地图上添加标记和注释 * 通过摄像头显示用户位置和跟踪 * 将自定义数据（GeoJSON）添加到地图中 * 使用地图样式、相机或用户交互 * 处理功能交互和点击 **官方资源：** * [iOS 地图指南]() * [API 参考]() * [示例应用程序]() ** ** ## 安装和设置 ### 要求 * iOS 12+ * Xcode 15+ * 斯威夫特 5.9+ * 免费 Mapbox 帐户 ### 第 1 步：配置访问令牌将您的公共令牌添加到“Info.plist”： MBXAccessToken pk.your_mapbox_token_here **获取您的令牌：** 登录 [mapbox.com]() ### 步骤 2：添加 Swift 包依赖项 1. **文件→添加包依赖** 2. **输入网址：** `https://github.com/mapbox/mapbox-maps-ios.git` 3. **版本：** 从`11.0.0`开始“直到下一个专业” 4. **验证**出现四个依赖项：MapboxCommon、MapboxCoreMaps、MapboxMaps、Turf **替代方案：** CocoaPods 或直接下载（[安装指南]()） ** ** ## 地图初始化 ### SwiftUI 模式（iOS 13+） **基本地图：** 导入 SwiftUI 导入 Mapbox 地图结构ContentView：视图{ @State private var viewport: Viewport = .camera( 中心：CLLocationCooperative2D（纬度：37.7749，经度：-122.4194），变焦：12 ） var body: 一些视图 { 地图（视口：$视口） .mapStyle(.standard) } } **带饰品：** 地图（视口：$视口） .mapStyle(.standard) .ornamentOptions(装饰品选项( 比例栏：.init（可见性：.visible），指南针：.init（可见性：.adaptive），徽标：.init（位置：.bottomLeading））） ### UIKit 模式导入 UIKit 导入 Mapbox 地图类 MapViewController: UIViewController { 私有变量mapView：MapView！覆盖 func viewDidLoad() { super.viewDidLoad() 让选项 = MapInitOptions( 相机选项：相机选项（中心：CLLocationCooperative2D（纬度：37.7749，经度：-122.4194），变焦：12 ）） mapView = MapView(frame: view.bounds, mapInitOptions: 选项) mapView.autoresizingMask = [.flexibleWidth, .flexibleHeight] view.addSubview(mapView) mapView.mapboxMap.loadStyle(.standard) } } ** ** ## 添加标记（注释） ### 点注释（标记）点注释是在地图上标记位置的最常见方法。 **斯威夫特用户界面：** 地图（视口：$视口）{ PointAnnotation（坐标：CLLocationCooperative2D（纬度：37.7749，经度：-122.4194）） .iconImage("自定义标记") } **用户界面工具包：** // 创建注释管理器（一次，重用更新） var pointAnnotationManager = mapView.annotations.makePointAnnotationManager() // 创建标记 var注释= PointAnnotation（坐标：CLLocationCooperative2D（纬度：37.7749，经度：-122.4194）） Comments.image = .init(image: UIImage(named: "marker")!, name: "marker") 注释.iconAnchor = .bottom // 添加到地图 pointAnnotationManager.annotations = [注释] **多个标记：** 让位置= [ CLLocationCooperative2D(纬度: 37.7749, 经度: -122.4194), CLLocationCooperative2D(纬度: 37.7849, 经度: -122.4094), CLLocationCooperative2D（纬度：37.7649，经度：-122.4294） ] 让注释=locations.map{坐标 var 注释 = PointAnnotation(坐标: 坐标) Comments.image = .init(image: UIImage(named: "marker")!, name: "marker") 返回注释 } pointAnnotationManager.annotations = 注释 ### 圆圈注释 var CircleAnnotationManager = mapView.annotations.makeCircleAnnotationManager() var 圆 = CircleAnnotation(坐标: 坐标) 圆.圆半径 = 10 圆.circleColor = StyleColor(.red) CircleAnnotationManager.annotations = [圆] ### 折线注释 var polylineAnnotationManager = mapView.annotations.makePolylineAnnotationManager() 让坐标= [坐标1，坐标2，坐标3] var polyline = PolylineAnnotation(lineCoords: 坐标) 折线.lineColor = StyleColor(.blue) 折线.lineWidth = 4 polylineAnnotationManager.annotations = [折线] ### 多边形注释 var PolygonAnnotationManager = mapView.annotations.makePolygonAnnotationManager() let Coords = [coord1, coord2, coord3, coord1] // 闭合多边形 var Polygon = PolygonAnnotation(多边形: .init(outerRing: .init(坐标))) 多边形.fillColor = StyleColor(.blue.withAlphaComponent(0.5)) 多边形.fillOutlineColor = StyleColor(.blue) PolygonAnnotationManager.annotations = [多边形] ** ** ## 显示用户位置 ### 显示用户位置 **第1步：在Info.plist中添加位置权限：** NSLocationWhenInUseUsageDescription 在地图上显示您的位置 **第 2 步：请求权限并显示位置：** 导入核心位置 // 请求权限让位置管理器 = CLLocationManager() locationManager.requestWhenInUseAuthorization() // 显示用户位置圆盘 mapView.location.options.puckType = .puck2D() mapView.location.options.puckBearingEnabled = true ### 相机跟随用户位置要使相机在用户移动时跟随用户的位置：进口联合收割机类 MapViewController: UIViewController { 私有变量mapView：MapView！ private var cancelables = Set() 覆盖 func viewDidLoad() { super.viewDidLoad() 设置映射() 设置位置跟踪() } func setupLocationTracking() { // 请求权限让位置管理器 = CLLocationManager() locationManager.requestWhenInUseAuthorization() // 显示用户位置 mapView.location.options.puckType = .puck2D() mapView.location.options.puckBearingEnabled = true // 使用摄像头跟踪用户位置 mapView.location.onLocationChange.observe { [弱自身] 位置守卫让 self = self, 让 location =locations.last else { return } self.mapView.camera.ease（至：CameraOptions（中心：位置.坐标，变焦：15，方位：位置.航向 >= 0 ？位置.课程：无，节距：45 )，持续时间：1.0) }.store(in: &cancelables) } } ### 获取当前位置一次如果让 location = mapView.location.latestLocation { 让坐标=位置.坐标 print("用户位于：\(坐标.纬度), \(坐标.经度)") // 将相机移动到用户位置 mapView.camera.ease（至：CameraOptions（中心：坐标，变焦：14 )，持续时间：1.0) } ** ** ## 添加自定义数据 (GeoJSON) 使用 GeoJSON 源和图层将您自己的数据添加到地图中。 ### 添加线路（路线、路径） // 创建线的坐标让路线坐标 = [ CLLocationCooperative2D(纬度: 37.7749, 经度: -122.4194), CLLocationCooperative2D(纬度: 37.7849, 经度: -122.4094), CLLocationCooperative2D（纬度：37.7949，经度：-122.3994） ] // 创建 GeoJSON 源 var source = GeoJSONSource(id: "路由源") source.data = .geometry(.lineString(LineString(routeCoordinates))) 试试？ mapView.mapboxMap.addSource(源) // 创建线层 var layer = LineLayer(id: "路由层", source: "路由源") 图层.lineColor = .constant(StyleColor(.blue)) 层.lineWidth = .constant(4) 层.lineCap = .constant(.round) 层.lineJoin = .constant(.round) 试试？ mapView.mapboxMap.addLayer(图层) ### 添加多边形（区域） let PolygonCoordinates = [coord1, coord2, coord3, coord1] // 闭合多边形 var source = GeoJSONSource(id: "区域源") source.data = .geometry(.polygon(Polygon([多边形坐标]))) 试试？ mapView.mapboxMap.addSource(源) var fillLayer = FillLayer(id: "区域填充", source: "区域源") fillLayer.fillColor = .constant(StyleColor(.blue.withAlphaComponent(0.3))) fillLayer.fillOutlineColor = .constant(StyleColor(.blue)) 试试？ mapView.mapboxMap.addLayer(fillLayer) ### 从 GeoJSON 添加点让 geojsonString = """ { "type": "特征集合", “特点”：[ { “类型”：“特征”， "几何": {"类型": "点", "坐标": [-122.4194, 37.7749]}, "属性": {"名称": "位置 1"} }, { “类型”：“特征”， "几何": {"类型": "点", "坐标": [-122.4094, 37.7849]}, "属性": {"名称": "位置 2"} } ] } ”“” var source = GeoJSONSource(id: "点源") 源.data = .string(geojsonString) 试试？ mapView.mapboxMap.addSource(源) var symbolLayer = SymbolLayer(id: "点层", source: "点源") symbolLayer.iconImage = .constant(.name("标记")) symbolLayer.textField = .constant(.expression(Exp(.get) { "name" })) symbolLayer.textOffset = .constant([0, 1.5]) 试试？ mapView.mapboxMap.addLayer(symbolLayer) ### 更新图层属性试试？ mapView.mapboxMap.updateLayer( withId: "路由层", 类型：LineLayer.self ) { 层图层.lineColor = .constant(StyleColor(.red)) 层.lineWidth = .constant(6) } ### 删除图层和源试试？ mapView.mapboxMap.removeLayer(withId: "路线层") 试试？ mapView.mapboxMap.removeSource(withId: "路线源") ** ** ## 相机控制 ### 设置相机位置 // SwiftUI - 更新视口状态视口 = .camera( 中心：CLLocationCooperative2D（纬度：40.7128，经度：-74.0060），变焦：14，轴承：90，节距：60 ） // UIKit - 立即 mapView.mapboxMap.setCamera（到：CameraOptions（中心：CLLocationCooperative2D（纬度：40.7128，经度：-74.0060），变焦：14，轴承：90，节距：60 ）） ### 动画相机转换 // 飞行动画（戏剧性的弧线） mapView.camera.fly（到：CameraOptions（中心：目的地，变焦：15 )，持续时间：2.0) // 缓动动画（平滑） mapView.camera.ease（至：CameraOptions（中心：目的地，变焦：15 )，持续时间：1.0) ### 使相机适合坐标让坐标= [坐标1，坐标2，坐标3] 让camera = mapView.mapboxMap.camera（用于：坐标，填充：UIEdgeInsets（顶部：50，左侧：50，底部：50，右侧：50），轴承：0，间距：0) mapView.camera.ease（到：相机，持续时间：1.0） ** ** ## 地图样式 ### 内置样式 // 斯威夫特用户界面地图（视口：$视口） .mapStyle(.standard) // Mapbox 标准（推荐） .mapStyle(.streets) // Mapbox 街道 .mapStyle(.outdoors) // Mapbox 户外 .mapStyle(.light) // Mapbox 灯光 .mapStyle(.dark) // Mapbox 深色 .mapStyle(.standardSatellite) // 卫星图像 // UIKit mapView.mapboxMap.loadStyle(.standard) mapView.mapboxMap.loadStyle(.streets) mapView.mapboxMap.loadStyle(.dark) ### 自定义样式 URL // 斯威夫特用户界面地图（视口：$视口） .mapStyle(MapStyle(uri: StyleURI(url: customStyleURL)!)) // UIKit mapView.mapboxMap.loadStyle(StyleURI(url: customStyleURL)!) **来自 Mapbox Studio 的风格：** 让 styleURL = URL(字符串: "mapbox://styles/用户名/style-id")! ** ** ## 用户交互和功能点击 ### 功能集交互（推荐）现代交互 API 允许通过类型化功能访问来处理地图功能上的点击。适用于标准样式预定义要素集，例如 POI、建筑物和地点标签。 **SwiftUI 模式：** 导入 SwiftUI 导入 Mapbox 地图结构MapView：视图{ @State private var viewport: Viewport = .camera( 中心：CLLocationCooperative2D（纬度：37.7749，经度：-122.4194），变焦：12 ） @State private var selectedBuildings = [StandardBuildingsFeature]() var body: 一些视图 { 地图（视口：$视口）{ // 点击 POI 功能 TapInteraction(.standardPoi) { poi, 上下文 print("已点击的 POI: \(poi.name ?? "未知")") return true // 停止传播 } // 点击建筑物并收集选定的建筑物 TapInteraction(.standardBuildings) { 建筑，上下文 print("被攻破的建筑物") selectedBuildings.append(建筑物) 返回真 } // 将特征状态应用于选定的建筑物（突出显示） ForEvery(selectedBuildings, id: \.id) { 建筑中 FeatureState(建筑, .init(选择: true)) } } .mapStyle(.standard) } } **UIKit 模式：** 导入 Mapbox 地图进口联合收割机类 MapViewController: UIViewController { 私有变量mapView：MapView！ private var cancelables = Set() 覆盖 func viewDidLoad() { super.viewDidLoad() 设置映射() 设置交互() } func setupInteractions() { // 点击 POI 功能让 poiToken = mapView.mapboxMap.addInteraction( TapInteraction(.standardPoi) { [弱自身] poi，上下文在 print("已点击的 POI: \(poi.name ?? "未知")") 返回真 } ） // 点击建筑物让buildingToken = mapView.mapboxMap.addInteraction( TapInteraction(.standardBuildings) { [弱自我] 建筑，上下文在 print("被攻破的建筑物") // 使用要素状态突出显示建筑物 self?.mapView.mapboxMap.setFeatureState( 建筑物, 状态：[“选择”：true] ）返回真 } ） // 存储令牌以保持交互活跃 // 完成后取消令牌：poiToken.cancel() } } ### 点击自定义图层让 token = mapView.mapboxMap.addInteraction( TapInteraction(.layer("custom-layer-id")) { 特征，上下文如果让属性 = feature.properties { print("特征属性：\(属性)") } 返回真 } ） ### 长按互动让 token = mapView.mapboxMap.addInteraction( LongPressInteraction(.standardPoi) { poi, 上下文 print("长按 POI: \(poi.name ?? "未知")") 返回真 } ） ### 处理地图点击（空白区域） // UIKit mapView.gestures.onMapTap.observe { [弱自我] 上下文让坐标=上下文.坐标 print("点击的地图位于：\(坐标.纬度), \(坐标.经度)") }.store(in: &cancelables) ### 手势配置 // 禁用特定手势 mapView.gestures.options.pitchEnabled = false mapView.gestures.options.rotateEnabled = false // 配置缩放限制 mapView.mapboxMap.setCamera（到：CameraOptions（变焦：12，最小缩放：10，最大缩放：16 ）） ** ** ## 性能最佳实践 ### 重用注释管理器 // ❌不要重复创建新的管理者函数更新标记（）{ 让管理器=mapView.annotations.makePointAnnotationManager() manager.annotations = 标记 } // ✅ 创建一次，重复使用让 pointAnnotationManager: PointAnnotationManager 初始化（）{ pointAnnotationManager = mapView.annotations.makePointAnnotationManager() } 函数更新标记（）{ pointAnnotationManager.annotations = 标记 } ### 批量注释更新 // ✅ 一次性全部更新 pointAnnotationManager.annotations = newAnnotations // ❌ 不要一一更新用于 newAnnotations { 中的注释 pointAnnotationManager.annotations.append(注释) } ### 内存管理 // 在闭包中使用弱 self mapView.gestures.onMapTap.observe { [弱自我] 上下文 self?.handleTap(上下文.坐标) }.store(in: &cancelables) // 在 deinit 上进行清理去初始化{ cancelables.forEach { $0.cancel() } } ### 使用标准样式 // ✅ 标准样式优化推荐 .mapStyle(.standard) // 仅在特定用例需要时才使用其他样式 .mapStyle(.standardSatellite) // 卫星图像 ** ** ## 故障排除 ### 地图未显示 **检查：** 1. ✅ Info.plist 中的 `MBXAccessToken` 2. ✅ Token有效（在mapbox.com测试） 3. 导入MapboxMaps框架 4. ✅ MapView 添加到视图层次结构 5. ✅ 正确的框架/约束设置 ### 样式未加载 mapView.mapboxMap.onStyleLoaded.observe { [弱自我] _ in print("样式加载成功") // 在这里添加层和源 }.store(in: &cancelables) ### 性能问题 * 使用 `.standard` 样式（推荐和优化） * 将可见注释限制在视口中 * 重用注释管理器 * 避免频繁的样式重新加载 * 批量注释更新 ** ** ## 其他资源 * [iOS 地图指南]() * [API参考]() * [交互指南]() * [SwiftUI 用户指南]() * [示例应用程序]() * [迁移指南 (v10 → v11)]()

Mapbox Ios 模式

包含技能