热图

请选择平台： Android iOS JavaScript

此页面介绍了实用程序中提供的热图实用程序 适用于 Maps SDK for iOS。 热图非常适合用来表示 地图上数据点的密度。

这段视频介绍了当数据较多，需要在地图上显示大量数据点时，如何将热图用作标记的替代方案。

热图便于查看者了解分布情况和 地图上数据点的强度。你无需在每个网页上放置标记 位置，热图会使用颜色来表示数据的分布情况。

在下例中，红色代表警察高度集中的区域 的电台。

地图上的热图

注意： 您可以使用 gradient 自行设置热图的颜色 属性。了解如何自定义 您的热图。

如果您尚未安装该库，请按照 指南，然后再阅读 此页面。

添加简单的热图

要向您的地图添加热图，您需要一个数据集，其中包含 每个关注地点的坐标。首先，创建一个 GMUHeatmapTileLayer 实例，将 map 属性设置为 GMSMapView。 请在应用的 viewDidLoad() 函数中执行此操作，以确保基本地图 。然后传递一组 将 GMUWeightedLatLng 对象分配给 GMUHeatmapTileLayer 实例。

该实用程序提供 GMUHeatmapTileLayer 类，该类接受 GMUWeightedLatLng 对象的集合。该函数会为 根据半径、渐变和不透明度选项设置各种缩放级别 。

以下列出了更详细的步骤：

1. 创建一个 GMUHeatmapTileLayer 实例，将 map 属性设置为 GMSMapView（在应用的 viewDidLoad() 函数中执行此操作）。
2. 将 GMUWeightedLatLng 对象集合传递给 GMUHeatmapTileLayer 实例。
3. 调用 GMUHeatmapTileLayer.map，传递地图视图。

   Swift

   class Heatmap: UIViewController {
   
     private var mapView: GMSMapView!
     private var heatmapLayer: GMUHeatmapTileLayer!
   
     override func viewDidLoad() {
       super.viewDidLoad()
       heatmapLayer = GMUHeatmapTileLayer()
       heatmapLayer.map = mapView
     }
   
     // ...
   
     func addHeatmap() {
   
       // Get the data: latitude/longitude positions of police stations.
       guard let path = Bundle.main.url(forResource: "police_stations", withExtension: "json") else {
         return
       }
       guard let data = try? Data(contentsOf: path) else {
         return
       }
       guard let json = try? JSONSerialization.jsonObject(with: data, options: []) else {
         return
       }
       guard let object = json as? [[String: Any]] else {
         print("Could not read the JSON.")
         return
       }
   
       var list = [GMUWeightedLatLng]()
       for item in object {
         let lat = item["lat"] as! CLLocationDegrees
         let lng = item["lng"] as! CLLocationDegrees
         let coords = GMUWeightedLatLng(
           coordinate: CLLocationCoordinate2DMake(lat, lng),
           intensity: 1.0
         )
         list.append(coords)
       }
   
       // Add the latlngs to the heatmap layer.
       heatmapLayer.weightedData = list
     }
   }
         

   Objective-C

   @implementation Heatmap {
     GMSMapView *_mapView;
     GMUHeatmapTileLayer *_heatmapLayer;
   }
   
   - (void)viewDidLoad {
     [super viewDidLoad];
     _heatmapLayer = [[GMUHeatmapTileLayer alloc] init];
     _heatmapLayer.map = _mapView;
   }
   
   // ...
   
   - (void) addHeatmap {
   
     // Get the data: latitude/longitude positions of police stations.
     NSURL *path = [NSBundle.mainBundle URLForResource:@"police_stations" withExtension:@"json"];
     NSData *data = [NSData dataWithContentsOfURL:path];
     NSArray *json = [NSJSONSerialization JSONObjectWithData:data options:0 error:nil];
   
     NSMutableArray<GMUWeightedLatLng *> *list = [[NSMutableArray alloc] init];
     [json enumerateObjectsUsingBlock:^(id  _Nonnull obj, NSUInteger idx, BOOL * _Nonnull stop) {
       NSDictionary *item = (NSDictionary *)obj;
       CLLocationDegrees lat = [(NSNumber *) [item valueForKey:@"lat"] doubleValue];
       CLLocationDegrees lng = [(NSNumber *) [item valueForKey:@"lng"] doubleValue];
       GMUWeightedLatLng *coords = [[GMUWeightedLatLng alloc] initWithCoordinate:CLLocationCoordinate2DMake(lat, lng)
                                                                       intensity:1.0];
       [list addObject:coords];
     }];
   
   
     // Add the latlngs to the heatmap layer.
     _heatmapLayer.weightedData = list;
   }
   @end
         

在此示例中，数据存储在 police_stations.json 这个 JSON 文件内。 以下是从该文件提取的内容：

[
{"lat" : -37.1886, "lng" : 145.708 } ,
{"lat" : -37.8361, "lng" : 144.845 } ,
{"lat" : -38.4034, "lng" : 144.192 } ,
{"lat" : -38.7597, "lng" : 143.67 } ,
{"lat" : -36.9672, "lng" : 141.083 }
]

自定义热图

热图有多个可自定义的属性。您可以在设置选项时 最初创建 GMUHeatmapTileLayer 实例时创建，也可以随时通过 为选项设置新值

提供的选项如下：

1. 半径：应用于热图的高斯模糊的大小，以表示 （以像素为单位）。默认值为 20。必须介于 10 至 50 之间。使用 GMUHeatmapTileLayer.radius，用于设置半径。

2. 渐变：热图生成其颜色时所用的一系列颜色 地图。GMUGradient是使用 一个包含颜色的整数数组，以及一个表示 每种颜色的起点，以占最大颜色强度的百分比表示， 并表示为 0 到 1 之间的分数。您只需为 单色渐变，或至少使用两种颜色的多色渐变 渐变。色表是利用这些颜色之间的插值生成的。 默认渐变有两种颜色。colorMapSize 参数定义了 梯度的步数。数值越大，数据越平滑 而数值越小，转换效果越清晰，这类似于 轮廓图。使用 GMUHeatmapTileLayer.gradient 设置渐变。

3. 不透明度：这是指整个热图图层以及范围的不透明度 从 0 到 1。默认值为 0.7。使用 GMUHeatmapTileLayer.opacity 设置 不透明度值。

例如，创建一个 Gradient：

Swift

let gradientColors: [UIColor] = [.green, .red]
let gradientStartPoints: [NSNumber] = [0.2, 1.0]
heatmapLayer.gradient = GMUGradient(
  colors: gradientColors,
  startPoints: gradientStartPoints,
  colorMapSize: 256
)
      

Objective-C

NSArray<UIColor *> *gradientColors = @[UIColor.greenColor, UIColor.redColor];
NSArray<NSNumber *> *gradientStartPoints = @[@0.2, @1.0];
_heatmapLayer.gradient = [[GMUGradient alloc] initWithColors:gradientColors
                                                 startPoints:gradientStartPoints
                                                colorMapSize:256];
      

如需更改现有热图的不透明度，请执行以下操作：

Swift

heatmapLayer.opacity = 0.7
      

Objective-C

_heatmapLayer.opacity = 0.7;
      

更新现有选项

如需更新已设置的选项，请按以下步骤操作：

1. 将选项更新为所需的值。
2. 欢迎致电GMUHeatmapTileLayer.clearTileCache()。

更改数据集

如需更改用于构建热图的数据集，请执行以下操作：

1. 更新您的数据收集。使用 GMUHeatmapTileLayer.weightedData，传递 GMUWeightedLatLng 的数组。
2. 欢迎致电GMUHeatmapTileLayer.clearTileCache()。

。

注意： 如果您想给热图添加点，或者从 请先更新数据收集，然后使用 GMUHeatmapTileLayer.weightedData.

移除热图

如需移除热图，请调用 GMUHeatmapTileLayer.map 并传递 nil。

Swift

heatmapLayer.map = nil
      

Objective-C

_heatmapLayer.map = nil;
      

观摩演示版应用

有关热图实现的另一个示例，请查看 HeatmapViewController。 设置指南介绍了如何 运行演示版应用