腾讯地图SDK的自定义路况和自定义地图

前言

1. 自定义路况

• 地图SDK一般的路况颜色都是相同的，如道路畅通为绿色、道路缓慢为黄色、道路拥堵为红色，但是通常都无法让用户自定义路况颜色。腾讯地图iOS SDK在4.3.9.1版本提供了自定义路况颜色功能，可以自定义路况的畅通拥堵颜色。

2. 自定义地图

• 腾讯地图SDK在提供了基础配色的情况下，还支持自定义颜色，可以将如绿地、道路、河流等元素修改为自己指定的颜色，实现了高度自定义。

使用场景：

1. 自定义道路路况颜色
2. 自定义地图元素颜色

准备：

1. 腾讯地图iOS SDK
2. 腾讯地图控制台自定义地图样式

接入流程

1. 自定义路况：

   1. 创建QMapView时添加配置：

      • 通常创建地图对象时直接使用的initWithFrame:方法，而QMapView还提供了另一个可以添加配置的方法

      // QMapConfig提供了一个初始化方法，这个方法可以用于设置一个辅助Key
      // - (instancetype)initWithSubID:(NSString *)subID subKey:(NSString *)subKey;
      QMapConfig *config = [[QMapConfig alloc] init];
      QMapView *mapView = [[QMapView alloc] initWithFrame:self.view.bounds config]:
      

   2. 创建路况样式对象，并设置路况颜色：

      QMapConfig *config = [[QMapConfig alloc] init];
      QTrafficStyle *style = [[QTrafficStyle alloc] init];
      
      // 统一描边颜色
      UIColor *whiteColor = [UIColor colorWithRed:255/255.0 green:255/255.0 blue:255/255.0 alpha:1];
      
      // 交通顺畅颜色：青绿色
      style.smoothColor = [UIColor colorWithRed:138/255.0 green:217/255.0 blue:28/255.0 alpha:1];
      // 交通顺畅描边颜色
      style.smoothBorderColor = whiteColor;
      
      // 交通缓慢颜色：黄色
      style.slowColor = [UIColor colorWithRed:244/255.0 green:247/255.0 blue:89/255.0 alpha:1];
      // 交通缓慢描边颜色
      style.slowBorderColor = whiteColor;
      
      // 交通拥堵配色：橘色
      style.congestedColor = [UIColor colorWithRed:250/255.0 green:154/255.0 blue:0 alpha:1];
      style.congestedBorderColor = whiteColor;
      
      // 交通非常拥堵颜色：红色
      style.seriouseCongestedColor = [UIColor colorWithRed:255/255.0 green:0 blue:0 alpha:1];
      // 交通非常拥堵描边颜色
      style.seriouseCongestedBorderColor = whiteColor;
      
      // 路况线宽
      style.lineWidth = 2;
      config.trafficStyle = style;
      

   3. 图片示例（西直门经典拥堵路段）：演示的颜色有一些辣眼，无奈没有美工妹子。。。

   Traffic.png

2. 自定义地图样式

   1. 首先，登录到腾讯地图管理控制台，然后进入个性化地图里面，随便找一个模板，选择编辑样式：

      image.png

   2. 左边的侧边栏显示的是地图中可以去自定义的颜色：

      1. 修改前

         
         
         image.png

      2. 修改后

         
         
         image.png

   3. 在iOS端套用自定义样式模板

      • 在控制台将保存好的模板添加到对应的Key中，这里我将其放在了第三个栏位，在初始化QMapView地图实例之后，只需要调用接口就可以切换样式了：[mapView setMapStyle:3];

        image.png

      • 图片示例：依旧那么难看。。。

        image.png

点评

1. 总体来说自由度还是很高的，但是建议腾讯地图能给一些示例的颜色搭配，不然没有美工妹子的帮忙，简直是颜色灾难。
2. 目前自定义路况只支持一次性的配置，不能动态修改，期待以后会改变。