MapboxAnnotationExtension 0.0.1-beta.2

MapboxAnnotationExtension 0.0.1-beta.2

Fabian GuerraMapbox 维护。



Mapbox Annotation Extension for iOS


⚠️ 该项目目前处于试验性,不建议用于生产。 ⚠️


Mapbox Annotation Extension 是一个轻量级库,您可以使用它与 iOS 的 Mapbox Maps SDK 快速添加基本形状、图标和其他注释到地图上。

此扩展利用了运行时风格的力量,采用面向对象的方法简化注释的创建和样式。

安装

在遵循以下任何安装说明之前,您需要配置机器以下载 Mapbox Maps SDK for iOS,这是此项目的依赖项。转到您的 Mapbox 账户仪表板并创建一个具有 DOWNLOADS:READ 范围的访问令牌。

请注意:这不同于您的生产 Mapbox API 令牌。请确保将其保密,不要将其插入任何 Info.plist 文件 中。

然后,在您的家目录中创建一个名为 .netrc 的文件(如果尚未创建),然后在文件的末尾添加以下行

machine api.mapbox.com 
  login mapbox
  password PRIVATE_MAPBOX_API_TOKEN

其中 PRIVATE_MAPBOX_API_TOKEN 是具有 DOWNLOADS:READ 范围的 Mapbox API 令牌。您现在可以使用 CocoaPods 或手动继续安装过程。

使用 CocoaPods

要使用 CocoaPods 安装 Mapbox Annotation Extension

创建包含以下规范的 Podfile

pod 'MapboxAnnotationExtension', '0.0.1-beta.2'

运行 pod repo update && pod install 并打开生成的 Xcode 工作空间。

手动安装

下载并解压缩最新版本的发布

MapboxAnnotationExtension.framework拖放到项目编辑器中项目的“嵌入式二进制文件”部分。在出现的表格中,请确保选中“如有必要则复制项”,然后选择完成。

Carthage & Swift Package Manager

目前不支持Carthage和Swift Package Manager ("SPM")(请参阅#64)。

演示应用程序

您可以通过运行annotationapp目标来在这个项目中找到一个示例应用程序。

用法

Mapbox Annotation Extension支持添加圆圈、线条、多边形和符号。每种形状类型都有自己的相应控制器,用于管理同一类型的多个形状对象。

由于在添加形状到地图之前需要地图加载完成,因此应在MGLMapView:didFinishLoadingStyle:代理方法中添加所有形状。

圆形(MGLCircleStyleAnnotation)

圆形表示地图上的一个坐标点,具有关联的半径,单位为像素。

func mapView(_ mapView: MGLMapView, didFinishLoading style: MGLStyle) {
  let circleAnnotationController = MGLCircleAnnotationController(mapView: self.mapView)
  let circle = MGLCircleStyleAnnotation(center: CLLocationCoordinate2D(latitude: 59.31, longitude: 18.06), radius: 3.0, color: .blue)
  circle.opacity = 0.5
  circleAnnotationController.add(circle)
}

线条(《MGLLineStyleAnnotation》)

线条表示一系列连接的坐标。

func mapView(_ mapView: MGLMapView, didFinishLoading style: MGLStyle) {
  let lineAnnotationController = MGLLineAnnotationController(mapView: self.mapView)
  
  let lineCoordinates = [
      CLLocationCoordinate2D(latitude: 59, longitude: 18),
      CLLocationCoordinate2D(latitude: 60, longitude: 20)
  ]
  
  let line = MGLLineStyleAnnotation(coordinates: lineCoordinates, count: UInt(lineCoordinates.count))
  line.color = .purple
  lineAnnotationController.add(line)
}

多边形(《MGLPolygonStyleAnnotation》)

多边形表示一系列连接的坐标,其中第一个和最后一个坐标相等。

func mapView(_ mapView: MGLMapView, didFinishLoading style: MGLStyle) {
  let polygonAnnotationController = MGLPolygonAnnotationController(mapView: self.mapView)
  
  let polygonCoordinates = [
    CLLocationCoordinate2DMake(59, 18),
    CLLocationCoordinate2DMake(62, 19),
    CLLocationCoordinate2DMake(54, 20),
    CLLocationCoordinate2DMake(59, 18)
  ]
  
  let polygon = MGLPolygonStyleAnnotation(coordinates: polygonCoordinates, count: UInt(polygonCoordinates.count))
  polygon.fillOutlineColor = .red
  polygonAnnotationController.add(line)
}

符号(《MGLSymbolStyleAnnotation》)

符号表示地图上的一个坐标点,包括一个标签和相关可选的图标图像。在将图像分配给符号的图标图像之前,必须先将图像提供给地图样式的精灵

func mapView(_ mapView: MGLMapView, didFinishLoading style: MGLStyle) {
  let attraction = UIImage(named: "attraction")
  
  if let styleImage = attraction {
    self.mapView.style?.setImage(styleImage, forName: "attraction")
  }
  
  let symbolAnnotationController = MGLSymbolAnnotationController(mapView: self.mapView)
  
  let symbol = MGLSymbolStyleAnnotation(coordinate: CLLocationCoordinate2DMake(59, 18));
  symbol.iconImageName = "attraction"
  symbol.text = "This is a cool place!"
  symbol.textFontSize = 16
  symbolAnnotationController.add(symbol)
}

显示样式注释的呼出信息

样式注释支持在注释被选中时显示呼出信息。每个呼出信息都可以显示有关其注释的附加信息。

  1. 要启用样式注释的呼出信息,创建一个类属性并指定将要启用的交互控制器类型
class ViewController: UIViewController {
    var mapView: MGLMapView!
    var circleAnnotationController: MGLCircleAnnotationController!
}
  1. 样式注释必须包含一个标题,并且必须实现两个代理方法,使用iOS Maps SDK。第一个方法annotationCanShowCallout应返回true。第二个方法viewFor annotation:应返回一个空的MGLAnnotationView,其大小与样式注释的形状相符,如下所示。
extension ViewController : MGLMapViewDelegate {
    
    func mapView(_ mapView: MGLMapView, didFinishLoading style: MGLStyle) {
      circleAnnotationController = MGLCircleAnnotationController(mapView: self.mapView)
      let circle = MGLCircleStyleAnnotation(center: CLLocationCoordinate2D(latitude: 59.31, longitude: 18.06), radius: 3.0, color: .blue)
      circle.opacity = 0.5
      circle.title = "Title"
      circleAnnotationController.add(circle)
    }

    func mapView(_ mapView: MGLMapView, annotationCanShowCallout annotation: MGLAnnotation) -> Bool {
        return true;
    }
    
    func mapView(_ mapView: MGLMapView, viewFor annotation: MGLAnnotation) -> MGLAnnotationView? {
        return MGLAnnotationView(frame: CGRect(x: 0, y: 0, width: 10, height: 10))
    }
    
}

支持的属性

每个MGLStyleAnnotation类都可以分配一组特定的属性来配置其布局和样式。此外,MGLAnnotationController也有属性可以将特定的布局属性分配给其所有的子MGLStyleAnnotation

所有这些属性都反映了在Mapbox样式规范中指定的相同值。以下是每个类支持的属性及其在Mapbox样式规范中的对应属性列表。

MGLCircleStyleAnnotation

MGLCircleAnnotationController

MGLLineStyleAnnotation

MGLLineAnnotationController

MGLPolygonStyleAnnotation

MGLPolygonAnnotationController

MGLSymbolStyleAnnotation

图标图像

符号文本

图标图像和符号文本

MGLSymbolAnnotationController

图标图像

符号文本

图标图像和符号文本

支持

请注意,这是一个实验性项目,可能随时更改。

如果您有任何疑问或反馈,请在此存储库中创建一个新的问题

如果您想报告一个错误,请尽可能提供详细信息,以便我们可以快速重现问题。

有关使用Mapbox Maps SDK for iOS的帮助,请查看我们的文档