1. IT分享知识网首页

Mapbox使用详解

老牧童 • • 未分类 • 阅读 115

Mapbox使用详解一、简介：Mapbox致力于打造全球最漂亮的个性化地图。在一次偶然的地图相关资料搜索过程中发现了一个很神奇又很漂亮的地图，这个地图支持高度自定义各种地图元素，比如，道路，水系，绿地，建筑物，背景色，等等。Mapbox打造的Mapboxstudio地图制作虚拟工作室，就是一个很完美的地图元素个性

大家好，欢迎来到IT知识分享网。

一、简介：

Mapbox使用详解
Mapbox致力于打造全球最漂亮的个性化地图。
 
在一次偶然的地图相关资料搜索过程中发现了一个很神奇又很漂亮的地图，这个地图支持高度自定义各种地图元素，比如，道路，水系，绿地，建筑物，背景色，等等。Mapbox打造的Mapbox studio地图制作虚拟工作室，就是一个很完美的地图元素个性化编辑器。另外，我们也可以把自己项目的地理信息数据上传到Mapbox云端，然后在自己项目的客户端展现出来。
 
Mapbox地图数据来源于Open Street Map（OSM）等其他地图数据供应商，和Google Map、Apple Map等地图厂商的地图数据来源差不多。
 
 

二、使用：

1、注册账号：

在  https://www.mapbox.com 网址找到 sign up 注册一个开发者账号。
Mapbox使用详解
进入个人中心后，我们能看到 Integrate Mapbox 字样，我们点进去，然后根据网页的引导，我们最终会得到一个
和我们的项目相关的 Access tokens ，这个 tokens 就是我们访问SDK的唯一key，
 
Mapbox使用详解
Mapbox使用详解
选择SDK平台，这里我们选择iOS
Mapbox使用详解
然后选择 Cocoapod 安装方式：
Mapbox使用详解
再接下来我们就能看到 Access tokens 了：
Mapbox使用详解

2、引入工程：

这里我们使用下载好的 Mapbox.framework 做示例，当然使用 cocoa pod 也行。
  • 把Mapbox.frameworks 文件拖拽到 “ 项目 -> TARGETS -> Build Phases -> Embed Frameworks ” 这个路径下；
  • 在路径 “项目 -> TARGETS -> Build Phases ->  +  -> New Run Script phase” 粘贴一串 shel l脚本代码 ：  
    bash "${BUILT_PRODUCTS_DIR}/${FRAMEWORKS_FOLDER_PATH}/Mapbox.framework/strip-frameworks.sh"
 
Mapbox使用详解
 
接下来把我们的 Access tokens 填写到项目工程的 Info.plist 文件中：
  •  在Info.plist 文件中添加 key 为 MGLMapboxAccessToken 其值为【Access tokens】 字符串；
  •  在Info.plist 文件中添加 key 为 NSLocationWhenInUseUsageDescription 其值为 bool 类型的 YES;

   
Mapbox使用详解

 

3、Mapbox.framework类的使用：

【1】加载地图：

  1.  
    #import “LoadMapboxViewController.h”

  2.  
    #import <Mapbox/Mapbox.h>

  3.  
     
  4.  
    @interface LoadMapboxViewController ()<MGLMapViewDelegate>

  5.  
     
  6.  
    @property (nonatomic, strong) MGLMapView *mapView;

  7.  
     
  8.  
    @end

  9.  
     
  10.  
    @implementation LoadMapboxViewController

  11.  
     
  12.  
    – (
    void)viewDidLoad {

  13.  
    [
    super viewDidLoad];

  14.  
    // Do any additional setup after loading the view.

  15.  
     
  16.  
    self.title = @”加载地图”;

  17.  
     
  18.  
    [
    self.view addSubview:self.mapView];

  19.  
    }

  20.  
     
  21.  
    – (MGLMapView *)mapView {

  22.  
    if (_mapView == nil) {

  23.  
    //设置地图的 frame 和 地图个性化样式

  24.  
    _mapView = [[MGLMapView alloc] initWithFrame:
    self.view.bounds styleURL:[NSURL URLWithString:@”mapbox://styles/mapbox/streets-v10″]];

  25.  
    _mapView.autoresizingMask =
    UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleHeight;

  26.  
    //设置地图默认显示的地点和缩放等级

  27.  
    [_mapView setCenterCoordinate:
    CLLocationCoordinate2DMake(39.980528, 116.306745) zoomLevel:15 animated:YES];

  28.  
    //显示用户位置

  29.  
    _mapView.showsUserLocation =
    YES;

  30.  
    //定位模式

  31.  
    _mapView.userTrackingMode = MGLUserTrackingModeFollow;

  32.  
    //是否倾斜地图

  33.  
    _mapView.pitchEnabled =
    YES;

  34.  
    //是否旋转地图

  35.  
    _mapView.rotateEnabled =
    NO;

  36.  
    //代理

  37.  
    _mapView.delegate =
    self;

  38.  
    }

  39.  
    return _mapView;

  40.  
    }

  41.  
     
  42.  
    @end


Mapbox使用详解

【2】加载各种样式的地图：

我们可以通过如下代码修改地图样式：
[self.mapView setStyleURL:[NSURL URLWithString:@"mapbox://styles/mapbox/streets-v10"]];

这是所有地图已经做好的模板样式参数：

 

  • mapbox://styles/mapbox/streets-v10
  • mapbox://styles/mapbox/outdoors-v10
  • mapbox://styles/mapbox/light-v9
  • mapbox://styles/mapbox/dark-v9
  • mapbox://styles/mapbox/satellite-v9
  • mapbox://styles/mapbox/satellite-streets-v10
  • mapbox://styles/mapbox/navigation-preview-day-v2
  • mapbox://styles/mapbox/navigation-preview-night-v2
  • mapbox://styles/mapbox/navigation-guidance-day-v2
  • mapbox://styles/mapbox/navigation-guidance-night-v2

 

 

使用不同的参数呈现出来的地图风格变不一样。

Mapbox使用详解

【3】加载大头针和默认气泡：

  1.  
    //

  2.  
    // DefaultAnnotationCalloutViewController.m

  3.  
    // MapboxExample

  4.  
    //

  5.  
    // Created by iron on 2018/1/30.

  6.  
    // Copyright © 2018年 wangzhengang. All rights reserved.

  7.  
    //

  8.  
     
  9.  
    #import “DefaultAnnotationCalloutViewController.h”

  10.  
    #import <Mapbox/Mapbox.h>

  11.  
     
  12.  
    @interface DefaultAnnotationCalloutViewController ()<MGLMapViewDelegate>

  13.  
    @property (nonatomic, strong) MGLMapView *mapView;

  14.  
    @property (nonatomic, copy) NSArray *annotationsArray;

  15.  
    @end

  16.  
     
  17.  
    @implementation DefaultAnnotationCalloutViewController

  18.  
     
  19.  
    – (
    void)dealloc {

  20.  
    [_mapView removeFromSuperview];

  21.  
    _mapView.delegate =
    nil;

  22.  
    _mapView =
    nil;

  23.  
    }

  24.  
     
  25.  
    – (
    void)viewDidLoad {

  26.  
    [
    super viewDidLoad];

  27.  
     
  28.  
    [
    self.view addSubview:self.mapView];

  29.  
    }

  30.  
     
  31.  
    – (
    void)didReceiveMemoryWarning {

  32.  
    [
    super didReceiveMemoryWarning];

  33.  
    // Dispose of any resources that can be recreated.

  34.  
    }

  35.  
     
  36.  
     
  37.  
    – (MGLMapView *)mapView {

  38.  
    if (_mapView == nil) {

  39.  
    //设置地图的 frame 和 地图个性化样式

  40.  
    _mapView = [[MGLMapView alloc] initWithFrame:
    self.view.bounds styleURL:[NSURL URLWithString:@”mapbox://styles/mapbox/streets-v10″]];

  41.  
    _mapView.autoresizingMask =
    UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleHeight;

  42.  
    //设置地图默认显示的地点和缩放等级

  43.  
    [_mapView setCenterCoordinate:
    CLLocationCoordinate2DMake(39.980528, 116.306745) zoomLevel:15 animated:NO];

  44.  
    //显示用户位置

  45.  
    _mapView.showsUserLocation =
    YES;

  46.  
    //定位模式

  47.  
    _mapView.userTrackingMode = MGLUserTrackingModeNone;

  48.  
    //是否倾斜地图

  49.  
    _mapView.pitchEnabled =
    YES;

  50.  
    //是否旋转地图

  51.  
    _mapView.rotateEnabled =
    NO;

  52.  
    //代理

  53.  
    _mapView.delegate =
    self;

  54.  
    }

  55.  
    return _mapView;

  56.  
    }

  57.  
     
  58.  
    – (
    NSArray *)annotationsArray {

  59.  
    if (_annotationsArray == nil) {

  60.  
    CLLocationCoordinate2D coords[2];

  61.  
    coords[
    0] = CLLocationCoordinate2DMake(39.980528, 116.306745);

  62.  
    coords[
    1] = CLLocationCoordinate2DMake(40.000, 116.306745);

  63.  
    NSMutableArray *pointsArray = [NSMutableArray array];

  64.  
    for (NSInteger i = 0; i < 2; ++i) {

  65.  
    MGLPointAnnotation *pointAnnotation = [[MGLPointAnnotation alloc] init];

  66.  
    pointAnnotation.coordinate = coords[i];

  67.  
    pointAnnotation.title = [
    NSString stringWithFormat:@”title：%ld”, (long)i];

  68.  
    pointAnnotation.subtitle = [
    NSString stringWithFormat:@”subtitle: %ld%ld%ld”, (long)i,(long)i,(long)i];

  69.  
    [pointsArray addObject:pointAnnotation];

  70.  
    }

  71.  
    _annotationsArray = [pointsArray
    copy];

  72.  
    }

  73.  
    return _annotationsArray;

  74.  
    }

  75.  
     
  76.  
    #pragma mark MGLMapViewDelegate

  77.  
     
  78.  
    – (
    void)mapViewDidFinishLoadingMap:(MGLMapView *)mapView {

  79.  
    ///地图加载完成时加载大头针

  80.  
    [mapView addAnnotations:
    self.annotationsArray];

  81.  
    }

  82.  
     
  83.  
    – (MGLAnnotationView *)mapView:(MGLMapView *)mapView viewForAnnotation:(
    id<MGLAnnotation>)annotation {

  84.  
    if (![annotation isKindOfClass:[MGLPointAnnotation class]]) {

  85.  
    return nil;

  86.  
    }

  87.  
    MGLAnnotationView *annotationView = [mapView dequeueReusableAnnotationViewWithIdentifier:
    @”MGLAnnotationView”];

  88.  
    if (annotationView == nil) {

  89.  
    annotationView = [[MGLAnnotationView alloc] initWithAnnotation:annotation reuseIdentifier:
    @”MGLAnnotationView”];

  90.  
    [annotationView setFrame:
    CGRectMake(0, 0, 40, 40)];

  91.  
    [annotationView setBackgroundColor:[
    UIColor redColor]];

  92.  
    annotationView.layer.cornerRadius =
    20.f;

  93.  
    annotationView.layer.masksToBounds=
    YES;

  94.  
    annotationView.layer.borderColor = [
    UIColor whiteColor].CGColor;

  95.  
    annotationView.layer.borderWidth =
    5.f;

  96.  
    }

  97.  
    return annotationView;

  98.  
    }

  99.  
     
  100.  
    ///是否显示气泡

  101.  
    -(
    BOOL)mapView:(MGLMapView *)mapView annotationCanShowCallout:(id<MGLAnnotation>)annotation {

  102.  
    return YES;

  103.  
    }

  104.  
    ///完成加载大头针

  105.  
    – (
    void)mapView:(MGLMapView *)mapView didAddAnnotationViews:(NSArray<MGLAnnotationView *> *)annotationViews {

  106.  
    [mapView showAnnotations:
    self.annotationsArray edgePadding:UIEdgeInsetsMake(100, 50, 100, 50) animated:YES];

  107.  
    }

  108.  
     
  109.  
    ///气泡左侧视图

  110.  
    – (
    UIView *)mapView:(MGLMapView *)mapView leftCalloutAccessoryViewForAnnotation:(id<MGLAnnotation>)annotation {

  111.  
    UIView *view = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 50, 50)];

  112.  
    view.backgroundColor= [
    UIColor blueColor];

  113.  
    UILabel *lab = [[UILabel alloc] initWithFrame:view.bounds];

  114.  
    lab.text =
    @”左侧视图”;

  115.  
    lab.textColor = [
    UIColor whiteColor];

  116.  
    lab.font = [
    UIFont systemFontOfSize:10];

  117.  
    lab.textAlignment =
    NSTextAlignmentCenter;

  118.  
    [view addSubview:lab];

  119.  
    return view;

  120.  
    }

  121.  
    ///气泡右侧视图，

  122.  
    – (
    UIView *)mapView:(MGLMapView *)mapView rightCalloutAccessoryViewForAnnotation:(id<MGLAnnotation>)annotation {

  123.  
    UIView *view = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 50, 50)];

  124.  
    view.backgroundColor= [
    UIColor greenColor];

  125.  
    UILabel *lab = [[UILabel alloc] initWithFrame:view.bounds];

  126.  
    lab.text =
    @”右侧视图”;

  127.  
    lab.textColor = [
    UIColor blackColor];

  128.  
    lab.font = [
    UIFont systemFontOfSize:10];

  129.  
    [view addSubview:lab];

  130.  
    return view;

  131.  
    }

  132.  
     
  133.  
     
  134.  
     
  135.  
     
  136.  
    @end

Mapbox使用详解

【4】加载图片大头针和自定义气泡：

  • 创建一个继承 UIview 的类 CustomeMapViewCalloutView  并遵守 < MGLCalloutView > 这个协议；      
  • 在 CustomeMapViewCalloutView 中实现各种需求；
  • ；

          
实现自定义callout view：

  1.  
    //

  2.  
    // CustomeMapViewCalloutView.h

  3.  
    // Etoury

  4.  
    //

  5.  
    // Created by iron on 2017/5/21.

  6.  
    // Copyright © 2017年 iron. All rights reserved.

  7.  
    //

  8.  
     
  9.  
    #import <UIKit/UIKit.h>

  10.  
    #import <Mapbox/Mapbox.h>

  11.  
     
  12.  
    @interface CustomeMapViewCalloutView : UIView<MGLCalloutView>

  13.  
     
  14.  
     
  15.  
     
  16.  
    @end

  1.  
    //

  2.  
    // CustomeMapViewCalloutView.m

  3.  
    // Etoury

  4.  
    //

  5.  
    // Created by iron on 2017/5/21.

  6.  
    // Copyright © 2017年 iron. All rights reserved.

  7.  
    //

  8.  
     
  9.  
    #import “CustomeMapViewCalloutView.h”

  10.  
     
  11.  
    // Set defaults for custom tip drawing

  12.  
    static CGFloat const tipHeight = 10.0;

  13.  
    static CGFloat const tipWidth = 20.0;

  14.  
     
  15.  
    @interface CustomeMapViewCalloutView ()

  16.  
    @property (strong, nonatomic) UIButton *mainBody;

  17.  
    @end

  18.  
     
  19.  
    @implementation CustomeMapViewCalloutView {

  20.  
    id <MGLAnnotation> _representedObject;

  21.  
    __unused
    UIView *_leftAccessoryView;/* unused */

  22.  
    __unused
    UIView *_rightAccessoryView;/* unused */

  23.  
    __
    weak id <MGLCalloutViewDelegate> _delegate;

  24.  
    BOOL _dismissesAutomatically;

  25.  
    BOOL _anchoredToAnnotation;

  26.  
    }

  27.  
     
  28.  
    @synthesize representedObject = _representedObject;

  29.  
    @synthesize leftAccessoryView = _leftAccessoryView;/* unused */

  30.  
    @synthesize rightAccessoryView = _rightAccessoryView;/* unused */

  31.  
    @synthesize delegate = _delegate;

  32.  
    @synthesize anchoredToAnnotation = _anchoredToAnnotation;

  33.  
    @synthesize dismissesAutomatically = _dismissesAutomatically;

  34.  
     
  35.  
    – (
    instancetype)initWithFrame:(CGRect)frame

  36.  
    {

  37.  
    self = [super initWithFrame:frame];

  38.  
    if (self)

  39.  
    {

  40.  
    self.backgroundColor = [UIColor clearColor];

  41.  
     
  42.  
    // Create and add a subview to hold the callout’s text

  43.  
    UIButton *mainBody = [UIButton buttonWithType:UIButtonTypeSystem];

  44.  
    mainBody.backgroundColor = [
    self backgroundColorForCallout];

  45.  
    mainBody.tintColor = [
    UIColor whiteColor];

  46.  
    mainBody.contentEdgeInsets =
    UIEdgeInsetsMake(10.0, 10.0, 10.0, 10.0);

  47.  
    mainBody.layer.cornerRadius =
    4.0;

  48.  
    self.mainBody = mainBody;

  49.  
     
  50.  
    [
    self addSubview:self.mainBody];

  51.  
    }

  52.  
     
  53.  
    return self;

  54.  
    }

  55.  
     
  56.  
     
  57.  
    #pragma mark – MGLCalloutView API

  58.  
     
  59.  
    – (
    void)presentCalloutFromRect:(CGRect)rect inView:(UIView *)view constrainedToView:(UIView *)constrainedView animated:(BOOL)animated

  60.  
    {

  61.  
    // Do not show a callout if there is no title set for the annotation

  62.  
    if (![self.representedObject respondsToSelector:@selector(title)])

  63.  
    {

  64.  
    return;

  65.  
    }

  66.  
     
  67.  
    [view addSubview:
    self];

  68.  
     
  69.  
    // Prepare title label

  70.  
    [
    self.mainBody setTitle:self.representedObject.title forState:UIControlStateNormal];

  71.  
    [
    self.mainBody sizeToFit];

  72.  
     
  73.  
    if ([self isCalloutTappable])

  74.  
    {

  75.  
    // Handle taps and eventually try to send them to the delegate (usually the map view)

  76.  
    [
    self.mainBody addTarget:self action:@selector(calloutTapped) forControlEvents:UIControlEventTouchUpInside];

  77.  
    }

  78.  
    else

  79.  
    {

  80.  
    // Disable tapping and highlighting

  81.  
    self.mainBody.userInteractionEnabled = NO;

  82.  
    }

  83.  
     
  84.  
    // Prepare our frame, adding extra space at the bottom for the tip

  85.  
    CGFloat frameWidth = self.mainBody.bounds.size.width;

  86.  
    CGFloat frameHeight = self.mainBody.bounds.size.height + tipHeight;

  87.  
    CGFloat frameOriginX = rect.origin.x + (rect.size.width/2.0) – (frameWidth/2.0);

  88.  
    CGFloat frameOriginY = rect.origin.y – frameHeight;

  89.  
    self.frame = CGRectMake(frameOriginX, frameOriginY,

  90.  
    frameWidth, frameHeight);

  91.  
     
  92.  
    if (animated)

  93.  
    {

  94.  
    self.alpha = 0.0;

  95.  
     
  96.  
    [
    UIView animateWithDuration:0.2 animations:^{

  97.  
    self.alpha = 1.0;

  98.  
    }];

  99.  
    }

  100.  
    }

  101.  
     
  102.  
    – (
    void)dismissCalloutAnimated:(BOOL)animated

  103.  
    {

  104.  
    if (self.superview)

  105.  
    {

  106.  
    if (animated)

  107.  
    {

  108.  
    [
    UIView animateWithDuration:0.2 animations:^{

  109.  
    self.alpha = 0.0;

  110.  
    } completion:^(
    BOOL finished) {

  111.  
    [
    self removeFromSuperview];

  112.  
    }];

  113.  
    }

  114.  
    else

  115.  
    {

  116.  
    [
    self removeFromSuperview];

  117.  
    }

  118.  
    }

  119.  
    }

  120.  
     
  121.  
    // Allow the callout to remain open during panning.

  122.  
    – (
    BOOL)dismissesAutomatically {

  123.  
    return NO;

  124.  
    }

  125.  
     
  126.  
    – (
    BOOL)isAnchoredToAnnotation {

  127.  
    return YES;

  128.  
    }

  129.  
     
  130.  
    // https://github.com/mapbox/mapbox-gl-native/issues/9228

  131.  
    – (
    void)setCenter:(CGPoint)center {

  132.  
    center.y = center.y –
    CGRectGetMidY(self.bounds);

  133.  
    [
    super setCenter:center];

  134.  
    }

  135.  
     
  136.  
    #pragma mark – Callout interaction handlers

  137.  
     
  138.  
    – (
    BOOL)isCalloutTappable

  139.  
    {

  140.  
    if ([self.delegate respondsToSelector:@selector(calloutViewShouldHighlight:)]) {

  141.  
    return [self.delegate performSelector:@selector(calloutViewShouldHighlight:) withObject:self];

  142.  
    }

  143.  
     
  144.  
    return NO;

  145.  
    }

  146.  
     
  147.  
    – (
    void)calloutTapped

  148.  
    {

  149.  
    if ([self isCalloutTappable] && [self.delegate respondsToSelector:@selector(calloutViewTapped:)])

  150.  
    {

  151.  
    [
    self.delegate performSelector:@selector(calloutViewTapped:) withObject:self];

  152.  
    }

  153.  
    }

  154.  
     
  155.  
    #pragma mark – Custom view styling

  156.  
     
  157.  
    – (
    UIColor *)backgroundColorForCallout

  158.  
    {

  159.  
    return [UIColor darkGrayColor];

  160.  
    }

  161.  
     
  162.  
    – (
    void)drawRect:(CGRect)rect

  163.  
    {

  164.  
    // Draw the pointed tip at the bottom

  165.  
    UIColor *fillColor = [self backgroundColorForCallout];

  166.  
     
  167.  
    CGFloat tipLeft = rect.origin.x + (rect.size.width / 2.0) – (tipWidth / 2.0);

  168.  
    CGPoint tipBottom = CGPointMake(rect.origin.x + (rect.size.width / 2.0), rect.origin.y + rect.size.height);

  169.  
    CGFloat heightWithoutTip = rect.size.height – tipHeight – 1;

  170.  
     
  171.  
    CGContextRef currentContext = UIGraphicsGetCurrentContext();

  172.  
     
  173.  
    CGMutablePathRef tipPath = CGPathCreateMutable();

  174.  
    CGPathMoveToPoint(tipPath, NULL, tipLeft, heightWithoutTip);

  175.  
    CGPathAddLineToPoint(tipPath, NULL, tipBottom.x, tipBottom.y);

  176.  
    CGPathAddLineToPoint(tipPath, NULL, tipLeft + tipWidth, heightWithoutTip);

  177.  
    CGPathCloseSubpath(tipPath);

  178.  
     
  179.  
    [fillColor setFill];

  180.  
    CGContextAddPath(currentContext, tipPath);

  181.  
    CGContextFillPath(currentContext);

  182.  
    CGPathRelease(tipPath);

  183.  
    }

  184.  
     
  185.  
     
  186.  
     
  187.  
     
  188.  
     
  189.  
    @end

在view controller中使用自定义的callout view：

  1.  
    //

  2.  
    // CustomeAnnotationCalloutViewController.m

  3.  
    // MapboxExample

  4.  
    //

  5.  
    // Created by iron on 2018/1/30.

  6.  
    // Copyright © 2018年 wangzhengang. All rights reserved.

  7.  
    //

  8.  
     
  9.  
    #import “CustomeAnnotationCalloutViewController.h”

  10.  
    #import <Mapbox/Mapbox.h>

  11.  
    #import “CustomeMapViewCalloutView.h”

  12.  
     
  13.  
    @interface CustomeAnnotationCalloutViewController ()<MGLMapViewDelegate>

  14.  
    @property (nonatomic, strong) MGLMapView *mapView;

  15.  
    @property (nonatomic, copy) NSArray *annotationsArray;

  16.  
     
  17.  
    @end

  18.  
     
  19.  
    @implementation CustomeAnnotationCalloutViewController

  20.  
     
  21.  
     
  22.  
    – (
    void)dealloc {

  23.  
    [_mapView removeFromSuperview];

  24.  
    _mapView.delegate =
    nil;

  25.  
    _mapView =
    nil;

  26.  
    }

  27.  
     
  28.  
     
  29.  
    – (
    void)viewDidLoad {

  30.  
    [
    super viewDidLoad];

  31.  
     
  32.  
    [
    self.view addSubview:self.mapView];

  33.  
    }

  34.  
     
  35.  
     
  36.  
    – (MGLMapView *)mapView {

  37.  
    if (_mapView == nil) {

  38.  
    //设置地图的 frame 和 地图个性化样式

  39.  
    _mapView = [[MGLMapView alloc] initWithFrame:
    self.view.bounds styleURL:[NSURL URLWithString:@”mapbox://styles/mapbox/streets-v10″]];

  40.  
    _mapView.autoresizingMask =
    UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleHeight;

  41.  
    //设置地图默认显示的地点和缩放等级

  42.  
    [_mapView setCenterCoordinate:
    CLLocationCoordinate2DMake(39.980528, 116.306745) zoomLevel:15 animated:NO];

  43.  
    //显示用户位置

  44.  
    _mapView.showsUserLocation =
    YES;

  45.  
    //定位模式

  46.  
    _mapView.userTrackingMode = MGLUserTrackingModeNone;

  47.  
    //是否倾斜地图

  48.  
    _mapView.pitchEnabled =
    YES;

  49.  
    //是否旋转地图

  50.  
    _mapView.rotateEnabled =
    NO;

  51.  
    //代理

  52.  
    _mapView.delegate =
    self;

  53.  
    }

  54.  
    return _mapView;

  55.  
    }

  56.  
     
  57.  
    – (
    NSArray *)annotationsArray {

  58.  
    if (_annotationsArray == nil) {

  59.  
    CLLocationCoordinate2D coords[2];

  60.  
    coords[
    0] = CLLocationCoordinate2DMake(39.980528, 116.306745);

  61.  
    coords[
    1] = CLLocationCoordinate2DMake(40.000, 116.306745);

  62.  
    NSMutableArray *pointsArray = [NSMutableArray array];

  63.  
    for (NSInteger i = 0; i < 2; ++i) {

  64.  
    MGLPointAnnotation *pointAnnotation = [[MGLPointAnnotation alloc] init];

  65.  
    pointAnnotation.coordinate = coords[i];

  66.  
    pointAnnotation.title = [
    NSString stringWithFormat:@”title：%ld”, (long)i];

  67.  
    pointAnnotation.subtitle = [
    NSString stringWithFormat:@”subtitle: %ld%ld%ld”, (long)i,(long)i,(long)i];

  68.  
    [pointsArray addObject:pointAnnotation];

  69.  
    }

  70.  
    _annotationsArray = [pointsArray
    copy];

  71.  
    }

  72.  
    return _annotationsArray;

  73.  
    }

  74.  
     
  75.  
     
  76.  
    #pragma mark MGLMapViewDelegate

  77.  
    – (
    void)mapViewDidFinishLoadingMap:(MGLMapView *)mapView {

  78.  
    ///地图加载完成时加载大头针

  79.  
    [mapView addAnnotations:
    self.annotationsArray];

  80.  
    }

  81.  
     
  82.  
    – (MGLAnnotationView *)mapView:(MGLMapView *)mapView viewForAnnotation:(
    id<MGLAnnotation>)annotation {

  83.  
    if (![annotation isKindOfClass:[MGLPointAnnotation class]]) {

  84.  
    return nil;

  85.  
    }

  86.  
    MGLAnnotationView *annotationView = [mapView dequeueReusableAnnotationViewWithIdentifier:
    @”MGLAnnotationView”];

  87.  
    if (annotationView == nil) {

  88.  
    annotationView = [[MGLAnnotationView alloc] initWithAnnotation:annotation reuseIdentifier:
    @”MGLAnnotationView”];

  89.  
    [annotationView setFrame:
    CGRectMake(0, 0, 40, 40)];

  90.  
    [annotationView setBackgroundColor:[
    UIColor redColor]];

  91.  
    annotationView.layer.cornerRadius =
    20.f;

  92.  
    annotationView.layer.masksToBounds=
    YES;

  93.  
    annotationView.layer.borderColor = [
    UIColor whiteColor].CGColor;

  94.  
    annotationView.layer.borderWidth =
    5.f;

  95.  
    }

  96.  
    return annotationView;

  97.  
    }

  98.  
     
  99.  
    ///是否显示气泡

  100.  
    -(
    BOOL)mapView:(MGLMapView *)mapView annotationCanShowCallout:(id<MGLAnnotation>)annotation {

  101.  
    return YES;

  102.  
    }

  103.  
    ///完成加载大头针

  104.  
    – (
    void)mapView:(MGLMapView *)mapView didAddAnnotationViews:(NSArray<MGLAnnotationView *> *)annotationViews {

  105.  
    [mapView showAnnotations:
    self.annotationsArray edgePadding:UIEdgeInsetsMake(100, 50, 100, 50) animated:YES];

  106.  
    }

  107.  
     
  108.  
    ///加载定义callout view

  109.  
    – (
    id<MGLCalloutView>)mapView:(MGLMapView *)mapView calloutViewForAnnotation:(id<MGLAnnotation>)annotation {

  110.  
    CustomeMapViewCalloutView *calloutView = [[CustomeMapViewCalloutView alloc] init];

  111.  
    calloutView.representedObject = annotation;

  112.  
    return calloutView;

  113.  
    }

  114.  
     
  115.  
    ///气泡点击事件

  116.  
    – (
    void)mapView:(MGLMapView *)mapView tapOnCalloutForAnnotation:(id<MGLAnnotation>)annotation {

  117.  
    NSLog(@”点击了气泡: %@”, annotation);

  118.  
    [mapView deselectAnnotation:annotation animated:
    YES];

  119.  
     
  120.  
    [
    self showAlertControllerWithViewContorller:self title:@”点击了气泡” message:nil leftButtonTitle:nil rightButtonTitle:@”确定”];

  121.  
    }

  122.  
     
  123.  
     
  124.  
    #pragma mark – 警告框

  125.  
    – (
    void)showAlertControllerWithViewContorller:(UIViewController *)viewController title:(NSString *)title message:(NSString *)message leftButtonTitle:(NSString *)leftBtnTitle rightButtonTitle:(NSString *)rightBtnTitle {

  126.  
    UIAlertController *alert = [UIAlertController alertControllerWithTitle:title message:message preferredStyle:UIAlertControllerStyleAlert];

  127.  
    if (leftBtnTitle) {

  128.  
    ];

  129.  
    }

  130.  
    if (rightBtnTitle) {

  131.  
    ];

  132.  
    }

  133.  
    [viewController presentViewController:alert animated:
    YES completion:nil];

  134.  
    }

  135.  
     
  136.  
     
  137.  
    @end

效果如下：

Mapbox使用详解
Mapbox使用详解

【5】绘制线段和多边形：

老实说 Mapbox 的 绘制线段和多边形的相关类，相比高德地图和百度地图写的并不好，用起来很不方便，比如：

 

  •  MGLPolygon 有 strokeColor 这个参数，却没有设置 描边线宽度和样式的参数；
  •  MGLPolyline 没有 strokeColor 和 fillColor 之分，而且画虚线的代码写起来很麻烦；

总体来讲，MGLPolygon 和 MGLPolyline 这两个类没有高德地图和百度地图那样使用起来方便，另外，MGLPolyline 这个类中的 MGLShapeSource 、MGLStyleLayer 虽然使用起来很麻烦，但是相对来说倒是保持了灵活性。

 

 

为了提高 MGLPolygon 和 MGLPolyline 的使用便利性，我对 MGLPolygon 、MGLPolyline 的基类 MGLShape 扩展了几个属性：

 

  • @property (nonatomic, strong) UIColor *fillColor;//填充颜色
  • @property (nonatomic, assign) CGFloat fillOpacity;//填充透明度
  • @property (nonatomic, strong) UIColor *strokeColor;//描边颜色
  • @property (nonatomic, assign) BOOL isDash;//YES = 虚线／NO = 实线
  • @property (nonatomic, assign) NSInteger strokeWeight;//描边宽度

 

 
接下来让我们看看整体代码是如何实现的，以及最后的效果是怎样的：

MGLShape+PolygonParamer.h

  1.  
    //

  2.  
    // MGLShape+PolygonParamer.h

  3.  
    // Etoury

  4.  
    //

  5.  
    // Created by dev on 2018/1/3.

  6.  
    // Copyright © 2018年 iron. All rights reserved.

  7.  
    //

  8.  
     
  9.  
    #import <Mapbox/Mapbox.h>

  10.  
     
  11.  
    @interface MGLShape (PolygonParamer)

  12.  
     
  13.  
     
  14.  
     
  15.  
    @property (nonatomic, strong) UIColor *fillColor;//填充颜色

  16.  
    @property (nonatomic, assign) CGFloat fillOpacity;//填充透明度

  17.  
    @property (nonatomic, strong) UIColor *strokeColor;//描边颜色

  18.  
    @property (nonatomic, assign) BOOL isDash;//YES = 虚线／NO = 实线

  19.  
    @property (nonatomic, assign) NSInteger strokeWeight;//描边宽度

  20.  
     
  21.  
     
  22.  
     
  23.  
     
  24.  
    @end

MGLShape+PolygonParamer.h

  1.  
    //

  2.  
    // MGLShape+PolygonParamer.m

  3.  
    // Etoury

  4.  
    //

  5.  
    // Created by dev on 2018/1/3.

  6.  
    // Copyright © 2018年 iron. All rights reserved.

  7.  
    //

  8.  
     
  9.  
    #import “MGLShape+PolygonParamer.h”

  10.  
    #import <objc/runtime.h>

  11.  
     
  12.  
     
  13.  
    static UIColor *_fillColor;//填充颜色

  14.  
    static NSInteger _fillOpacity;//填充透明度

  15.  
    static UIColor *_strokeColor;//描边颜色

  16.  
    static BOOL _isDash;//YES = 虚线／NO = 实线

  17.  
    static NSInteger _strokeWeight;//描边宽度

  18.  
     
  19.  
     
  20.  
     
  21.  
    @implementation MGLShape (PolygonParamer)

  22.  
     
  23.  
     
  24.  
    – (
    void)setFillColor:(UIColor *)fillColor {

  25.  
    objc_setAssociatedObject(
    self, &_fillColor, fillColor, OBJC_ASSOCIATION_COPY);

  26.  
    }

  27.  
    – (
    UIColor *)fillColor {

  28.  
    return objc_getAssociatedObject(self, &_fillColor);

  29.  
    }

  30.  
     
  31.  
     
  32.  
    – (
    void)setFillOpacity:(CGFloat)fillOpacity {

  33.  
    NSNumber *fillOpacityNumber = @(fillOpacity);

  34.  
    objc_setAssociatedObject(
    self, &_fillOpacity, fillOpacityNumber, OBJC_ASSOCIATION_COPY);

  35.  
    }

  36.  
    – (
    CGFloat)fillOpacity {

  37.  
    NSNumber *fillOpacityNumber = objc_getAssociatedObject(self, &_fillOpacity);

  38.  
    return [fillOpacityNumber floatValue];

  39.  
    }

  40.  
     
  41.  
     
  42.  
    – (
    void)setStrokeColor:(UIColor *)strokeColor {

  43.  
    objc_setAssociatedObject(
    self, &_strokeColor, strokeColor, OBJC_ASSOCIATION_COPY);

  44.  
    }

  45.  
    – (
    UIColor *)strokeColor {

  46.  
    return objc_getAssociatedObject(self, &_strokeColor);

  47.  
    }

  48.  
     
  49.  
     
  50.  
    – (
    void)setIsDash:(BOOL)isDash {

  51.  
    NSNumber *isDashNumber = [NSNumber numberWithBool:isDash];

  52.  
    objc_setAssociatedObject(
    self, &_isDash, isDashNumber, OBJC_ASSOCIATION_COPY);

  53.  
    }

  54.  
    – (
    BOOL)isDash {

  55.  
    NSNumber *isDashNumber = objc_getAssociatedObject(self, &_isDash);

  56.  
    return [isDashNumber boolValue];

  57.  
    }

  58.  
     
  59.  
     
  60.  
    – (
    void)setStrokeWeight:(NSInteger)strokeWeight {

  61.  
    NSNumber *strokeWeightNumber = @(strokeWeight);

  62.  
    objc_setAssociatedObject(
    self, &_strokeWeight, strokeWeightNumber, OBJC_ASSOCIATION_COPY);

  63.  
    }

  64.  
    – (
    NSInteger)strokeWeight {

  65.  
    NSNumber *strokeWeightNumber = objc_getAssociatedObject(self, &_strokeWeight);

  66.  
    return [strokeWeightNumber integerValue];

  67.  
    }

  68.  
     
  69.  
     
  70.  
     
  71.  
     
  72.  
    @end

把 MGLShape+PolygonParamer引入到 view controller 中：

  1.  
    //

  2.  
    // LinePolygonMapboxViewController.m

  3.  
    // MapboxExample

  4.  
    //

  5.  
    // Created by iron on 2018/1/30.

  6.  
    // Copyright © 2018年 wangzhengang. All rights reserved.

  7.  
    //

  8.  
     
  9.  
    #import “LinePolygonMapboxViewController.h”

  10.  
    #import <Mapbox/Mapbox.h>

  11.  
    #import “MGLShape+PolygonParamer.h”

  12.  
     
  13.  
     
  14.  
    @interface LinePolygonMapboxViewController ()<MGLMapViewDelegate>

  15.  
    @property (nonatomic, strong) MGLMapView *mapView;

  16.  
     
  17.  
    @property (nonatomic, strong) MGLPolyline *blueLine;//蓝色线段

  18.  
     
  19.  
    @property (nonatomic, strong) MGLPolyline *strokeLine;//多边形边线

  20.  
    @property (nonatomic, strong) MGLPolygon *polygon;//多边形

  21.  
     
  22.  
    @end

  23.  
     
  24.  
    @implementation LinePolygonMapboxViewController

  25.  
     
  26.  
    – (
    void)dealloc {

  27.  
    [_mapView removeFromSuperview];

  28.  
    _mapView.delegate =
    nil;

  29.  
    _mapView =
    nil;

  30.  
    }

  31.  
     
  32.  
    – (
    void)viewDidLoad {

  33.  
    [
    super viewDidLoad];

  34.  
     
  35.  
    self.title = @”线段和多边形”;

  36.  
     
  37.  
    [
    self.view addSubview:self.mapView];

  38.  
    }

  39.  
     
  40.  
    – (
    void)didReceiveMemoryWarning {

  41.  
    [
    super didReceiveMemoryWarning];

  42.  
    // Dispose of any resources that can be recreated.

  43.  
    }

  44.  
     
  45.  
    – (MGLMapView *)mapView {

  46.  
    if (_mapView == nil) {

  47.  
    //设置地图的 frame 和 地图个性化样式

  48.  
    _mapView = [[MGLMapView alloc] initWithFrame:
    self.view.bounds styleURL:[NSURL URLWithString:@”mapbox://styles/mapbox/streets-v10″]];

  49.  
    _mapView.autoresizingMask =
    UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleHeight;

  50.  
    //设置地图默认显示的地点和缩放等级

  51.  
    [_mapView setCenterCoordinate:
    CLLocationCoordinate2DMake(39.980528, 116.306745) zoomLevel:8 animated:YES];

  52.  
    //显示用户位置

  53.  
    _mapView.showsUserLocation =
    YES;

  54.  
    //定位模式

  55.  
    _mapView.userTrackingMode = MGLUserTrackingModeNone;

  56.  
    //是否倾斜地图

  57.  
    _mapView.pitchEnabled =
    YES;

  58.  
    //是否旋转地图

  59.  
    _mapView.rotateEnabled =
    NO;

  60.  
    //代理

  61.  
    _mapView.delegate =
    self;

  62.  
    }

  63.  
    return _mapView;

  64.  
    }

  65.  
     
  66.  
     
  67.  
    – (MGLPolyline *)blueLine {

  68.  
    if (_blueLine == nil) {

  69.  
    CLLocationCoordinate2D coords[3];

  70.  
    coords[
    0] = CLLocationCoordinate2DMake(27.000, 95.356745);

  71.  
    coords[
    1] = CLLocationCoordinate2DMake(20.000, 105.356745);

  72.  
    coords[
    2] = CLLocationCoordinate2DMake(27.000, 115.356745);

  73.  
     
  74.  
    _blueLine = [MGLPolyline polylineWithCoordinates:coords count:
    3];

  75.  
    _blueLine.strokeColor = [
    UIColor blueColor];

  76.  
    _blueLine.strokeWeight =
    3.f;

  77.  
    _blueLine.fillOpacity =
    0.75f;

  78.  
    _blueLine.isDash =
    NO;

  79.  
    }

  80.  
    return _blueLine;

  81.  
    }

  82.  
     
  83.  
    – (MGLPolyline *)strokeLine {

  84.  
    if (_strokeLine == nil) {

  85.  
    CLLocationCoordinate2D coords[6];

  86.  
    coords[
    0] = CLLocationCoordinate2DMake(30.980528, 110.306745);

  87.  
    coords[
    2] = CLLocationCoordinate2DMake(30.000, 120.306745);

  88.  
    coords[
    1] = CLLocationCoordinate2DMake(40.000, 120.306745);

  89.  
    coords[
    3] = CLLocationCoordinate2DMake(40.000, 110.306745);

  90.  
    coords[
    4] = CLLocationCoordinate2DMake(35.000, 95.356745);

  91.  
    coords[
    5] = CLLocationCoordinate2DMake(30.980528, 110.306745);;

  92.  
    _strokeLine = [MGLPolyline polylineWithCoordinates:coords count:
    6];

  93.  
    _strokeLine.strokeColor = [
    UIColor blackColor];

  94.  
    _strokeLine.strokeWeight =
    2.f;

  95.  
    _strokeLine.fillOpacity =
    0.75f;

  96.  
    _strokeLine.isDash =
    YES;

  97.  
    }

  98.  
    return _strokeLine;

  99.  
    }

  100.  
     
  101.  
    – (MGLPolygon *)polygon {

  102.  
    if (_polygon == nil) {

  103.  
    CLLocationCoordinate2D coords[6];

  104.  
    coords[
    0] = CLLocationCoordinate2DMake(30.980528, 110.306745);

  105.  
    coords[
    2] = CLLocationCoordinate2DMake(30.000, 120.306745);

  106.  
    coords[
    1] = CLLocationCoordinate2DMake(40.000, 120.306745);

  107.  
    coords[
    3] = CLLocationCoordinate2DMake(40.000, 110.306745);

  108.  
    coords[
    4] = CLLocationCoordinate2DMake(35.000, 95.356745);

  109.  
    _polygon = [MGLPolygon polygonWithCoordinates:coords count:
    5];

  110.  
    _polygon.fillColor = [
    UIColor redColor];

  111.  
    _polygon.strokeColor = [
    UIColor blueColor];

  112.  
    _polygon.strokeWeight=
    2.f;

  113.  
    _polygon.fillOpacity =
    0.5f;

  114.  
    }

  115.  
    return _polygon;

  116.  
    }

  117.  
     
  118.  
    #pragma mark MGLMapViewDelegate

  119.  
    – (
    void)mapViewDidFinishLoadingMap:(MGLMapView *)mapView {

  120.  
    ///地图加载完成后绘制 线段 和 多边形

  121.  
    [mapView addOverlays:@[
    self.blueLine, self.strokeLine, self.polygon]];

  122.  
    ///把窗口显示到合适的范围

  123.  
    [mapView setVisibleCoordinateBounds:
    self.polygon.overlayBounds edgePadding:UIEdgeInsetsMake(0, 10, 200, 10) animated:YES];

  124.  
     
  125.  
    // [mapView setVisibleCoordinateBounds:self.line.overlayBounds edgePadding:UIEdgeInsetsMake(300, 10, 0, 10) animated:YES];

  126.  
    }

  127.  
     
  128.  
    – (
    CGFloat)mapView:(MGLMapView *)mapView alphaForShapeAnnotation:(MGLShape *)annotation {

  129.  
    ///MGLPolyline 和 MGLPolygon 都执行这个方法

  130.  
    return annotation.fillOpacity;

  131.  
    }

  132.  
     
  133.  
    – (
    UIColor *)mapView:(MGLMapView *)mapView strokeColorForShapeAnnotation:(MGLShape *)annotation {

  134.  
    ///MGLPolyline 和 MGLPolygon 都执行这个方法

  135.  
    if ([@”MGLPolyline” isEqualToString:NSStringFromClass([annotation class])]) {

  136.  
     
  137.  
    if (annotation.isDash) {

  138.  
    MGLShapeSource *shapeSource = [
    self addSourceWithShape:annotation];

  139.  
    [
    self.mapView.style addSource:shapeSource];

  140.  
    MGLStyleLayer *styleLayer = [
    self dashedLineWithStyle:shapeSource shape:annotation lineDashPattern:@[@2.f, @1.f] lineCap:MGLLineCapButt lineColor:[UIColor blackColor] lineWidth:@2];

  141.  
    [
    self.mapView.style addLayer:styleLayer];

  142.  
    return [UIColor clearColor];

  143.  
    }
    else {

  144.  
    return annotation.strokeColor;

  145.  
    }

  146.  
    }
    else if ([@”MGLPolygon” isEqualToString:NSStringFromClass([annotation class])]) {

  147.  
     
  148.  
    return annotation.strokeColor;

  149.  
    }

  150.  
    return annotation.strokeColor;

  151.  
    }

  152.  
     
  153.  
    – (
    UIColor *)mapView:(MGLMapView *)mapView fillColorForPolygonAnnotation:(MGLPolygon *)annotation {

  154.  
    /// MGLPolygon 执行这个方法， MGLPolyline 不执行这个方法

  155.  
    return annotation.fillColor;

  156.  
    }

  157.  
     
  158.  
    – (
    CGFloat)mapView:(MGLMapView *)mapView lineWidthForPolylineAnnotation:(MGLPolyline *)annotation {

  159.  
    ///MGLPolyline 执行这个方法, MGLPolygon 不执行

  160.  
    return annotation.strokeWeight;

  161.  
    }

  162.  
     
  163.  
    #pragma mark 画虚线

  164.  
    – (MGLShapeSource *)addSourceWithShape:(MGLShape *)shape {

  165.  
    return [[MGLShapeSource alloc] initWithIdentifier:@”DashLines” shape:shape options:nil];

  166.  
    }

  167.  
     
  168.  
    – (MGLStyleLayer *)dashedLineWithStyle:(MGLShapeSource *)shapeSource shape:(MGLShape *)shape lineDashPattern:(
    NSArray<NSNumber *> *)lineDashPattern lineCap:(MGLLineCap)cap lineColor:(UIColor *)lineColor lineWidth:(NSNumber *)lineWidth {

  169.  
    MGLLineStyleLayer *lineStyleLayer = [[MGLLineStyleLayer alloc] initWithIdentifier:
    @”DashLines” source:shapeSource];

  170.  
    //线段模型

  171.  
    lineStyleLayer.lineDashPattern = [MGLStyleValue valueWithRawValue:lineDashPattern];

  172.  
    //线段头部

  173.  
    lineStyleLayer.lineCap = [MGLStyleValue valueWithRawValue:[
    NSNumber numberWithInteger:cap]];

  174.  
    //线段颜色

  175.  
    lineStyleLayer.lineColor = [MGLStyleValue valueWithRawValue:lineColor];

  176.  
    //线段宽度

  177.  
    lineStyleLayer.lineWidth = [MGLStyleValue valueWithRawValue:lineWidth];

  178.  
    return lineStyleLayer;

  179.  
    }

  180.  
     
  181.  
     
  182.  
     
  183.  
     
  184.  
     
  185.  
    @end

整个代码的是用步骤是这样的：

  • 实现 MGLShape (PolygonParamer) 扩展类 MGLShape+PolygonParamer ；
  • 把 MGLShape+PolygonParamer.h 引入到  LinePolygonMapboxViewController.h 这个 view controller 中；
  • 运行看效果；
Mapbox使用详解

三、后续更新：

现在文章到这里只是讲述了 Mapbox 的常规使用，后续我会更新关于 多点聚合、位置方向等的使用。。。
 

四、和其他地图的对比：

Mapbox使用详解

 

 

五、项目代码地址：

 

项目示例代码在GitHub上的地址： https://github.com/wangzhengang/MapboxExample/  
如果您觉得对您有用，请在GitHub上给个星星。

 

免责声明：本站所有文章内容,图片，视频等均是来源于用户投稿和互联网及文摘转载整编而成，不代表本站观点，不承担相关法律责任。其著作权各归其原作者或其出版社所有。如发现本站有涉嫌抄袭侵权/违法违规的内容,侵犯到您的权益，请在线联系站长,一经查实,本站将立刻删除。 本文来自网络,若有侵权，请联系删除，如若转载，请注明出处：https://yundeesoft.com/33814.html

赞 (0)
老牧童老牧童
0

相关推荐

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注

关注微信