本頁說明可在 utility 上使用的熱視圖公用程式 Maps SDK for iOS: 熱視圖適合用來呈現分佈情形 資料點的密度。
這部影片說明當資料需要用到地圖上的大量資料點時,如何以熱視圖替代標記叢集。
熱視圖能協助閱聽人輕鬆掌握分佈和相對地 地圖上資料點的強度。與其在每個位置都放置標記 位置,熱視圖使用顏色來表示資料的分佈情形。
在下方範例中,紅色代表警察密集的區域 的電台。
![含警察局位置熱視圖的地圖](https://developers.google.cn/static/maps/documentation/ios-sdk/images/heatmap-ios.png?authuser=6&hl=zh-tw)
如果您尚未設定程式庫,請按照設定 再繼續閱讀 這個網頁。
新增簡單的熱視圖
如要在地圖中加入熱視圖,您需要一個由
。首先,請建立
GMUHeatmapTileLayer
例項,將 map
屬性設為 GMSMapView
。
請在應用程式的 viewDidLoad()
函式中執行此操作,確保基本地圖
是在使用熱視圖之前載入。接著將一連串的
GMUWeightedLatLng
物件新增至 GMUHeatmapTileLayer
例項。
公用程式會提供可接受 GMUHeatmapTileLayer
類別
內含 GMUWeightedLatLng
個物件集合。這個程式碼會為
根據半徑、漸層和不透明度選項,設定各種縮放等級
預設服務。
詳細步驟如下:
- 建立
GMUHeatmapTileLayer
例項,將map
屬性設為GMSMapView
(在應用程式的viewDidLoad()
函式中執行此操作)。 - 將
GMUWeightedLatLng
物件集合傳遞至GMUHeatmapTileLayer
執行個體。 - 呼叫
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
在這個範例中,資料會儲存在 JSON 檔案 police_stations.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
執行個體,或隨時透過
設定新的選項值。
可用選項如下所示:
半徑:套用至熱視圖的高斯模糊效果範圍 (以 單位。預設值為 20)。此值必須介於 10 至 50 之間。使用
GMUHeatmapTileLayer.radius
可設定半徑。漸層:熱視圖用來產生顏色的範圍 地圖,範圍從最低到最高強度。
GMUGradient
是透過以下方式建立: 包含色彩的整數陣列,以及指出 每個顏色的起點,以最大強度的百分比 並以 0 到 1 之間的分數表示您只需為 單色漸層,或多色的至少兩種顏色 漸層效果彩色地圖會使用這些顏色的內插類型來產生。 預設漸層有兩種顏色。colorMapSize
參數會定義 漸層的步數數字越大代表發生問題 這個數值則能產生較清晰的轉場效果,效果接近 等距圖形使用GMUHeatmapTileLayer.gradient
設定漸層。不透明度:這是整個熱視圖圖層的不透明度,以及範圍 介於 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;
更新現有選項
如要更新已設定的選項,請按照下列步驟操作:
- 將選項更新為所需的值。
- 歡迎致電
GMUHeatmapTileLayer.clearTileCache()
。
變更資料集
要變更建立熱視圖時做為依據的資料集:
- 更新資料收集設定。使用
GMUHeatmapTileLayer.weightedData
,並傳遞GMUWeightedLatLng
的陣列。 - 歡迎致電
GMUHeatmapTileLayer.clearTileCache()
。
移除熱視圖
如要移除熱視圖,請呼叫 GMUHeatmapTileLayer.map
並傳遞 nil
。
Swift
heatmapLayer.map = nil
Objective-C
_heatmapLayer.map = nil;
查看試用版應用程式
如需其他熱視圖導入方式的範例,請參閱
HeatmapViewController
。
設定指南會說明如何
執行試用版應用程式