แผนที่ความหนาแน่น

เลือกแพลตฟอร์ม: Android iOS

หน้านี้อธิบายยูทิลิตีแผนที่ความหนาแน่นที่พร้อมใช้งานในไลบรารียูทิลิตี สำหรับ Maps SDK สำหรับ iOS แผนที่ความหนาแน่นมีประโยชน์ในการแสดงการกระจายและความหนาแน่นของจุดข้อมูลบนแผนที่

วิดีโอนี้จะพูดถึงการใช้แผนที่ความหนาแน่นแทนเครื่องหมาย เมื่อ ข้อมูลของคุณต้องใช้จุดข้อมูลจำนวนมากบนแผนที่

แผนที่ความหนาแน่นช่วยให้ผู้ชมเข้าใจการกระจายและความเข้มข้นสัมพัทธ์ของจุดข้อมูลบนแผนที่ได้ง่าย แผนที่ความหนาแน่นใช้สีเพื่อแสดงการกระจายของข้อมูลแทนการวางเครื่องหมายในแต่ละตำแหน่ง

ในตัวอย่างด้านล่าง สีแดงแสดงถึงพื้นที่ที่มีสถานีตำรวจจำนวนมากในรัฐวิกตอเรีย ประเทศออสเตรเลีย

แผนที่ที่มีแผนที่ความหนาแน่นแสดงตำแหน่งของสถานีตำรวจ
แผนที่ความหนาแน่นบนแผนที่

หากยังไม่ได้ตั้งค่าไลบรารี โปรดทำตามคู่มือ การตั้งค่าก่อนอ่านส่วนที่เหลือของ หน้านี้

การเพิ่มแผนที่ความหนาแน่นแบบง่าย

หากต้องการเพิ่มแผนที่ความหนาแน่นลงในแผนที่ คุณจะต้องมีชุดข้อมูลที่ประกอบด้วยพิกัดของแต่ละสถานที่ที่สนใจ ขั้นแรก ให้สร้างอินสแตนซ์ 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

สำหรับตัวอย่างนี้ ระบบจะเก็บข้อมูลไว้ในไฟล์ 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 ในครั้งแรก หรือตั้งค่าตัวเลือกใหม่ได้ทุกเมื่อ

โดยมีตัวเลือกดังต่อไปนี้

  1. ความรัศมี: ขนาดของ Gaussian Blur ที่ใช้กับแผนที่ความหนาแน่น ซึ่งแสดงเป็นพิกเซล ค่าเริ่มต้นคือ 20 โดยต้องมีค่าระหว่าง 10 ถึง 50 ใช้ GMUHeatmapTileLayer.radius เพื่อตั้งค่าความรัศมี

  2. การไล่ระดับสี: ช่วงสีที่แผนที่ความหนาแน่นใช้เพื่อสร้างแผนที่สี ซึ่งมีตั้งแต่ความเข้มข้นต่ำสุดไปจนถึงสูงสุด ระบบจะสร้าง GMUGradient โดยใช้อาร์เรย์จำนวนเต็มที่มีสี และอาร์เรย์ทศนิยมที่ระบุจุดเริ่มต้นของแต่ละสี ซึ่งแสดงเป็นเปอร์เซ็นต์ของความเข้มข้นสูงสุด และแสดงเป็นเศษส่วนตั้งแต่ 0 ถึง 1 คุณต้องระบุสีเพียงสีเดียวสำหรับการไล่ระดับสีเดียว หรืออย่างน้อย 2 สีสำหรับการไล่ระดับสีหลายสี ระบบจะสร้างแผนที่สีโดยใช้การประมาณค่าระหว่างสีเหล่านั้น การไล่ระดับสีเริ่มต้นมี 2 สี พารามิเตอร์ 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.map โดยส่ง nil

Swift

heatmapLayer.map = nil

Objective-C

_heatmapLayer.map = nil;

ดูแอปเดโม

หากต้องการดูตัวอย่างการใช้งานแผนที่ความหนาแน่นอีกตัวอย่าง ให้ดู HeatmapViewController ในแอปเดโมที่มาพร้อมกับไลบรารียูทิลิตี คู่มือการตั้งค่าจะแสดงวิธี เรียกใช้แอปเดโม