ยูทิลิตีแผนที่ความหนาแน่นของ Google Maps

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

แผนที่ความหนาแน่นมีประโยชน์ในการแสดงการกระจายและความหนาแน่นของจุดข้อมูลบนแผนที่

เกริ่นนำ

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

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

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

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

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

คำแนะนำ: คุณตั้งค่าสีของคุณเองสำหรับแผนที่ความหนาแน่นได้โดยใช้เมธอด setGradient() ดูวิธีปรับแต่งสีและคุณสมบัติอื่นๆ ของแผนที่ความหนาแน่น

หากคุณยังไม่ได้ตั้งค่าไลบรารี Maps SDK สำหรับ Android Utility ให้ทำตามคู่มือการตั้งค่าก่อนอ่านส่วนที่เหลือของหน้านี้

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

หากต้องการเพิ่มแผนที่ความหนาแน่นในแผนที่ คุณจะต้องมีชุดข้อมูลที่ประกอบด้วยพิกัดของสถานที่ที่สนใจแต่ละแห่ง ก่อนอื่นให้สร้าง HeatmapTileProvider เพื่อส่งต่อคอลเล็กชันของออบเจ็กต์ LatLng รายการ จากนั้นสร้าง TileOverlay ใหม่ ส่งไปยังผู้ให้บริการการ์ดแผนที่ความหนาแน่น แล้วเพิ่มการวางซ้อนของชิ้นส่วนแผนที่ลงในแผนที่

ยูทิลิตีนี้จะจัดเตรียมคลาส HeatmapTileProvider ซึ่งใช้อินเทอร์เฟซ TileProvider เพื่อมอบภาพการ์ดสำหรับแผนที่ความหนาแน่น HeatmapTileProvider ยอมรับคอลเล็กชันของออบเจ็กต์ LatLng (หรือออบเจ็กต์ WeightedLatLng รายการตามที่อธิบายไว้ด้านล่าง) ซึ่งจะสร้างภาพย่อยสำหรับระดับการซูมต่างๆ ตามตัวเลือกรัศมี การไล่ระดับสี และความทึบแสงที่ระบุ คุณเปลี่ยนค่าเริ่มต้นสำหรับตัวเลือกเหล่านี้ได้

โปรดดูขั้นตอนต่างๆ โดยละเอียด

1. ใช้ HeatmapTileProvider.Builder() ส่งผ่านคอลเล็กชันของออบเจ็กต์ LatLng รายการเพื่อเพิ่ม HeatmapTileProvider ใหม่
2. สร้างออบเจ็กต์ TileOverlayOptions ใหม่ด้วยตัวเลือกที่เกี่ยวข้อง ซึ่งรวมถึง HeatmapTileProvider
3. เรียก 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 คุณสามารถส่งคอลเล็กชันพิกัดละติจูด/ลองจิจูดแบบถ่วงน้ำหนักได้ วิธีนี้มีประโยชน์หากคุณต้องการแสดงความสำคัญของชุดสถานที่หนึ่งๆ

วิธีใช้การถ่วงน้ำหนักกับตำแหน่งที่เฉพาะเจาะจง

1. สร้าง WeightedLatLng ใหม่สำหรับแต่ละตำแหน่งที่ต้องมีการถ่วงน้ำหนัก ส่งผ่าน LatLng และ double ที่แสดงความเข้มที่จำเป็น ความเข้มบ่งบอกถึงความสำคัญหรือคุณค่าของสถานที่ตั้งนี้ซึ่งสัมพันธ์กัน ค่าที่สูงขึ้นจะส่งผลให้สีมีความเข้มสูงขึ้นในการไล่ระดับสีของแผนที่ความหนาแน่น โดยค่าเริ่มต้น สีความเข้มสูงสุดจะเป็นสีแดง

2. เรียกใช้ HeatmapTileProvider.Builder().weightedData() แทน HeatmapTileProvider.Builder().data() เพื่อสร้างแผนที่ความหนาแน่น

ปรับแต่งแผนที่ความหนาแน่น

พร็อพเพอร์ตี้หลายรายการของแผนที่ความหนาแน่นสามารถปรับแต่งได้ คุณตั้งค่าตัวเลือกในเวลาที่สร้างผ่านฟังก์ชัน Builder ได้ หรือจะเปลี่ยนตัวเลือกได้ทุกเมื่อด้วยการเรียกใช้ตัวตั้งค่าที่เกี่ยวข้องใน HeatmapTileProvider จากนั้นล้างแคชการ์ดของการวางซ้อนเพื่อให้การ์ดทั้งหมดวาดใหม่ด้วยตัวเลือกใหม่

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

1. รัศมี: ขนาดของการเบลอแบบเกาส์เชียนที่ใช้กับแผนที่ความหนาแน่น แสดงเป็นพิกเซล ค่าเริ่มต้นคือ 20 ต้องอยู่ระหว่าง 10 ถึง 50 ใช้ radius() ของเครื่องมือสร้างเพื่อกำหนดค่าเมื่อสร้างแผนที่ความหนาแน่น หรือเปลี่ยนค่าในภายหลังด้วย setRadius()
2. การไล่ระดับสี: ช่วงของสีที่แผนที่ความหนาแน่นใช้ในการสร้างแผนที่สี โดยมีตั้งแต่ความเข้มต่ำสุดไปจนถึงสูงสุด การไล่ระดับสีสร้างขึ้นโดยใช้อาร์เรย์ 2 อาร์เรย์ ได้แก่ อาร์เรย์จำนวนเต็มที่มีสี และอาร์เรย์แบบลอยที่ระบุจุดเริ่มต้นของแต่ละสี โดยกำหนดเป็นเปอร์เซ็นต์ของความเข้มสูงสุด และแสดงเป็นเศษส่วนตั้งแต่ 0 ถึง 1 คุณต้องระบุเพียงสีเดียวสำหรับการไล่ระดับสีสีเดียว หรืออย่างน้อย 2 สีสำหรับการไล่ระดับสีหลายสี ระบบจะสร้างแผนที่สีโดยใช้การประมาณค่าในช่วงระหว่างสีเหล่านั้น การไล่ระดับสีเริ่มต้นจะมี 2 สี ใช้ gradient() ของเครื่องมือสร้างเพื่อกำหนดค่าเมื่อสร้างแผนที่ความหนาแน่น หรือเปลี่ยนค่าในภายหลังด้วย setGradient()
3. ความทึบแสง: นี่คือความทึบแสงของเลเยอร์แผนที่ความหนาแน่นทั้งหมด โดยมีช่วงตั้งแต่ 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 ในแอปเดโมที่มาพร้อมกับไลบรารียูทิลิตี คู่มือการตั้งค่าจะแสดงวิธีเรียกใช้แอปเดโม