แผนที่ความหนาแน่นมีประโยชน์ในการแสดงการกระจายและความหนาแน่นของจุดข้อมูลบนแผนที่
เกริ่นนำ
ไลบรารี Maps SDK สำหรับ Android Utility Library มียูทิลิตีแผนที่ความหนาแน่นที่คุณสามารถใช้เพื่อเพิ่มแผนที่ความหนาแน่นอย่างน้อย 1 รายการลงใน Google Maps ในแอปพลิเคชัน
วิดีโอนี้กล่าวถึงการใช้แผนที่ความหนาแน่นเป็นทางเลือกของเครื่องหมายเมื่อข้อมูลของคุณต้องใช้จุดข้อมูลจำนวนมากบนแผนที่
แผนที่ความหนาแน่นช่วยให้ผู้ชมเข้าใจการกระจายและความเข้มของจุดข้อมูลบนแผนที่ได้โดยง่าย แผนที่ความหนาแน่นจะใช้สีเพื่อแสดงการกระจายข้อมูล แทนที่จะวางเครื่องหมายไว้ในแต่ละตำแหน่ง
ในตัวอย่างด้านล่าง สีแดงหมายถึงพื้นที่ของสถานีตำรวจในรัฐวิกตอเรีย ประเทศออสเตรเลีย

หากคุณยังไม่ได้ตั้งค่าไลบรารี Maps SDK สำหรับ Android Utility ให้ทำตามคู่มือการตั้งค่าก่อนอ่านส่วนที่เหลือของหน้านี้
เพิ่มแผนที่ความหนาแน่นอย่างง่าย
หากต้องการเพิ่มแผนที่ความหนาแน่นในแผนที่ คุณจะต้องมีชุดข้อมูลที่ประกอบด้วยพิกัดของสถานที่ที่สนใจแต่ละแห่ง ก่อนอื่นให้สร้าง HeatmapTileProvider
เพื่อส่งต่อคอลเล็กชันของออบเจ็กต์ LatLng
รายการ จากนั้นสร้าง
TileOverlay
ใหม่
ส่งไปยังผู้ให้บริการการ์ดแผนที่ความหนาแน่น แล้วเพิ่มการวางซ้อนของชิ้นส่วนแผนที่ลงในแผนที่
ยูทิลิตีนี้จะจัดเตรียมคลาส HeatmapTileProvider
ซึ่งใช้อินเทอร์เฟซ TileProvider
เพื่อมอบภาพการ์ดสำหรับแผนที่ความหนาแน่น
HeatmapTileProvider
ยอมรับคอลเล็กชันของออบเจ็กต์ LatLng
(หรือออบเจ็กต์ WeightedLatLng
รายการตามที่อธิบายไว้ด้านล่าง) ซึ่งจะสร้างภาพย่อยสำหรับระดับการซูมต่างๆ ตามตัวเลือกรัศมี การไล่ระดับสี และความทึบแสงที่ระบุ คุณเปลี่ยนค่าเริ่มต้นสำหรับตัวเลือกเหล่านี้ได้
โปรดดูขั้นตอนต่างๆ โดยละเอียด
- ใช้
HeatmapTileProvider.Builder()
ส่งผ่านคอลเล็กชันของออบเจ็กต์LatLng
รายการเพื่อเพิ่มHeatmapTileProvider
ใหม่ - สร้างออบเจ็กต์
TileOverlayOptions
ใหม่ด้วยตัวเลือกที่เกี่ยวข้อง ซึ่งรวมถึงHeatmapTileProvider
- เรียก
GoogleMap.addTileOverlay()
เพื่อเพิ่มการวางซ้อนลงในแผนที่
Kotlin
private fun addHeatMap() { var latLngs: List<LatLng?>? = null // Get the data: latitude/longitude positions of police stations. try { latLngs = readItems(R.raw.police_stations) } catch (e: JSONException) { Toast.makeText(context, "Problem reading list of locations.", Toast.LENGTH_LONG) .show() } // Create a heat map tile provider, passing it the latlngs of the police stations. val provider = HeatmapTileProvider.Builder() .data(latLngs) .build() // Add a tile overlay to the map, using the heat map tile provider. val overlay = map.addTileOverlay(TileOverlayOptions().tileProvider(provider)) } @Throws(JSONException::class) private fun readItems(@RawRes resource: Int): List<LatLng?> { val result: MutableList<LatLng?> = ArrayList() val inputStream = context.resources.openRawResource(resource) val json = Scanner(inputStream).useDelimiter("\\A").next() val array = JSONArray(json) for (i in 0 until array.length()) { val `object` = array.getJSONObject(i) val lat = `object`.getDouble("lat") val lng = `object`.getDouble("lng") result.add(LatLng(lat, lng)) } return result }
Java
private void addHeatMap() { List<LatLng> latLngs = null; // Get the data: latitude/longitude positions of police stations. try { latLngs = readItems(R.raw.police_stations); } catch (JSONException e) { Toast.makeText(context, "Problem reading list of locations.", Toast.LENGTH_LONG).show(); } // Create a heat map tile provider, passing it the latlngs of the police stations. HeatmapTileProvider provider = new HeatmapTileProvider.Builder() .data(latLngs) .build(); // Add a tile overlay to the map, using the heat map tile provider. TileOverlay overlay = map.addTileOverlay(new TileOverlayOptions().tileProvider(provider)); } private List<LatLng> readItems(@RawRes int resource) throws JSONException { List<LatLng> result = new ArrayList<>(); InputStream inputStream = context.getResources().openRawResource(resource); String json = new Scanner(inputStream).useDelimiter("\\A").next(); JSONArray array = new JSONArray(json); for (int i = 0; i < array.length(); i++) { JSONObject object = array.getJSONObject(i); double lat = object.getDouble("lat"); double lng = object.getDouble("lng"); result.add(new LatLng(lat, lng)); } return result; }
สำหรับตัวอย่างนี้ ข้อมูลจะจัดเก็บไว้ในไฟล์ 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 } ]
ใช้จุดละติจูด/ลองจิจูดแบบถ่วงน้ำหนัก
เมื่อสร้าง HeatmapTileProvider
คุณสามารถส่งคอลเล็กชันพิกัดละติจูด/ลองจิจูดแบบถ่วงน้ำหนักได้ วิธีนี้มีประโยชน์หากคุณต้องการแสดงความสำคัญของชุดสถานที่หนึ่งๆ
วิธีใช้การถ่วงน้ำหนักกับตำแหน่งที่เฉพาะเจาะจง
- สร้าง
WeightedLatLng
ใหม่สำหรับแต่ละตำแหน่งที่ต้องมีการถ่วงน้ำหนัก ส่งผ่านLatLng
และdouble
ที่แสดงความเข้มที่จำเป็น ความเข้มบ่งบอกถึงความสำคัญหรือคุณค่าของสถานที่ตั้งนี้ซึ่งสัมพันธ์กัน ค่าที่สูงขึ้นจะส่งผลให้สีมีความเข้มสูงขึ้นในการไล่ระดับสีของแผนที่ความหนาแน่น โดยค่าเริ่มต้น สีความเข้มสูงสุดจะเป็นสีแดง เรียกใช้
HeatmapTileProvider.Builder().weightedData()
แทนHeatmapTileProvider.Builder().data()
เพื่อสร้างแผนที่ความหนาแน่น
ปรับแต่งแผนที่ความหนาแน่น
พร็อพเพอร์ตี้หลายรายการของแผนที่ความหนาแน่นสามารถปรับแต่งได้ คุณตั้งค่าตัวเลือกในเวลาที่สร้างผ่านฟังก์ชัน Builder
ได้
หรือจะเปลี่ยนตัวเลือกได้ทุกเมื่อด้วยการเรียกใช้ตัวตั้งค่าที่เกี่ยวข้องใน HeatmapTileProvider
จากนั้นล้างแคชการ์ดของการวางซ้อนเพื่อให้การ์ดทั้งหมดวาดใหม่ด้วยตัวเลือกใหม่
โดยมีตัวเลือกดังต่อไปนี้
- รัศมี: ขนาดของการเบลอแบบเกาส์เชียนที่ใช้กับแผนที่ความหนาแน่น แสดงเป็นพิกเซล ค่าเริ่มต้นคือ 20 ต้องอยู่ระหว่าง 10 ถึง 50 ใช้
radius()
ของเครื่องมือสร้างเพื่อกำหนดค่าเมื่อสร้างแผนที่ความหนาแน่น หรือเปลี่ยนค่าในภายหลังด้วยsetRadius()
- การไล่ระดับสี: ช่วงของสีที่แผนที่ความหนาแน่นใช้ในการสร้างแผนที่สี โดยมีตั้งแต่ความเข้มต่ำสุดไปจนถึงสูงสุด การไล่ระดับสีสร้างขึ้นโดยใช้อาร์เรย์ 2 อาร์เรย์ ได้แก่ อาร์เรย์จำนวนเต็มที่มีสี และอาร์เรย์แบบลอยที่ระบุจุดเริ่มต้นของแต่ละสี โดยกำหนดเป็นเปอร์เซ็นต์ของความเข้มสูงสุด และแสดงเป็นเศษส่วนตั้งแต่ 0 ถึง 1 คุณต้องระบุเพียงสีเดียวสำหรับการไล่ระดับสีสีเดียว หรืออย่างน้อย 2 สีสำหรับการไล่ระดับสีหลายสี ระบบจะสร้างแผนที่สีโดยใช้การประมาณค่าในช่วงระหว่างสีเหล่านั้น การไล่ระดับสีเริ่มต้นจะมี 2 สี ใช้
gradient()
ของเครื่องมือสร้างเพื่อกำหนดค่าเมื่อสร้างแผนที่ความหนาแน่น หรือเปลี่ยนค่าในภายหลังด้วยsetGradient()
- ความทึบแสง: นี่คือความทึบแสงของเลเยอร์แผนที่ความหนาแน่นทั้งหมด โดยมีช่วงตั้งแต่ 0 ถึง 1 ค่าเริ่มต้นคือ 0.7 ใช้
opacity()
ของเครื่องมือสร้างเพื่อกำหนดค่าเมื่อสร้างแผนที่ความหนาแน่น หรือเปลี่ยนค่าในภายหลังด้วยsetOpacity()
เช่น สร้าง Gradient
เพื่อตั้งค่าการไล่ระดับสีก่อนเพิ่มแผนที่ความหนาแน่น ดังนี้
Kotlin
// Create the gradient. val colors = intArrayOf( Color.rgb(102, 225, 0), // green Color.rgb(255, 0, 0) // red ) val startPoints = floatArrayOf(0.2f, 1f) val gradient = Gradient(colors, startPoints) // Create the tile provider. val provider = HeatmapTileProvider.Builder() .data(latLngs) .gradient(gradient) .build() // Add the tile overlay to the map. val tileOverlay = map.addTileOverlay( TileOverlayOptions() .tileProvider(provider) )
Java
// Create the gradient. int[] colors = { Color.rgb(102, 225, 0), // green Color.rgb(255, 0, 0) // red }; float[] startPoints = { 0.2f, 1f }; Gradient gradient = new Gradient(colors, startPoints); // Create the tile provider. HeatmapTileProvider provider = new HeatmapTileProvider.Builder() .data(latLngs) .gradient(gradient) .build(); // Add the tile overlay to the map. TileOverlay tileOverlay = map.addTileOverlay(new TileOverlayOptions().tileProvider(provider));
วิธีเปลี่ยนความทึบแสงของแผนที่ความหนาแน่นที่มีอยู่
Kotlin
provider.setOpacity(0.7) tileOverlay?.clearTileCache()
Java
provider.setOpacity(0.7); tileOverlay.clearTileCache();
เปลี่ยนชุดข้อมูล
หากต้องการเปลี่ยนชุดข้อมูลที่ใช้สร้างแผนที่ความหนาแน่น ให้ใช้ HeatmapTileProvider.setData()
หรือ HeatmapTileProvider.setWeightedData()
สำหรับ WeightedLatLng
จุด หมายเหตุ: หากต้องการเพิ่มจุดลงในแผนที่ความหนาแน่นหรือนำจุดออกจากแผนที่ความหนาแน่น ให้อัปเดตการรวบรวมข้อมูล แล้วใช้ setData()
หรือ setWeightedData()
Kotlin
val data: List<WeightedLatLng> = ArrayList() provider.setWeightedData(data) tileOverlay?.clearTileCache()
Java
List<WeightedLatLng> data = new ArrayList<>(); provider.setWeightedData(data); tileOverlay.clearTileCache();
นําแผนที่ความหนาแน่นออก
หากต้องการนำแผนที่ความหนาแน่นออก คุณต้องนำการวางซ้อนของชิ้นส่วนออกโดยทำดังนี้
Kotlin
tileOverlay?.remove()
Java
tileOverlay.remove();
ดูแอปเดโม
อีกตัวอย่างหนึ่งของการใช้งานแผนที่ความหนาแน่น ลองดู HeatmapsDemoActivity
ในแอปเดโมที่มาพร้อมกับไลบรารียูทิลิตี คู่มือการตั้งค่าจะแสดงวิธีเรียกใช้แอปเดโม