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

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

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

บทนำ

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

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

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

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

แผนที่พร้อมแผนที่ความหนาแน่นซึ่งแสดงตําแหน่งของสถานีตํารวจ
แผนที่ความหนาแน่นบนแผนที่

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

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

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

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

มีการดูขั้นตอนอย่างละเอียด:

  1. ใช้ HeatmapTileProvider.Builder() ผ่านการเก็บรวบรวมออบเจ็กต์ LatLng เพื่อเพิ่ม HeatmapTileProvider ใหม่
  2. สร้างออบเจ็กต์ TileOverlayOptions ใหม่ที่มีตัวเลือกที่เกี่ยวข้อง ซึ่งรวมถึง HeatmapTileProvider
  3. เรียกใช้ GoogleMap.addTileOverlay() เพื่อเพิ่มการวางซ้อนลงในแผนที่

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;
}

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
}

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

ตัวอย่างเช่น สร้าง Gradient เพื่อตั้งค่าการไล่ระดับสีก่อนเพิ่มแผนที่ความหนาแน่น

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


// 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


provider.setOpacity(0.7);
tileOverlay.clearTileCache();

Kotlin


provider.setOpacity(0.7)
tileOverlay?.clearTileCache()

เปลี่ยนชุดข้อมูล

หากต้องการเปลี่ยนชุดข้อมูลเมื่อสร้างแผนที่ความหนาแน่น ให้ใช้ HeatmapTileProvider.setData() หรือ HeatmapTileProvider.setWeightedData() สําหรับ WeightedLatLng คะแนน หมายเหตุ: หากต้องการเพิ่มจุดลงในแผนที่ความหนาแน่นหรือนําจุดออกจากแผนที่ความหนาแน่น ให้อัปเดตการรวบรวมข้อมูล จากนั้นใช้ setData() หรือ setWeightedData()

Java


List<WeightedLatLng> data = new ArrayList<>();
provider.setWeightedData(data);
tileOverlay.clearTileCache();

Kotlin


val data: List<WeightedLatLng> = ArrayList()
provider.setWeightedData(data)
tileOverlay?.clearTileCache()

นําแผนที่ความหนาแน่นออก

หากต้องการนําแผนที่ความหนาแน่นออก คุณต้องนําการวางซ้อนชิ้นส่วนแผนที่ออก

Java


tileOverlay.remove();

Kotlin


tileOverlay?.remove()

ดูแอปเดโม

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