أداة خريطة خريطة Android لـ Android

تكون خرائط التمثيل اللوني مفيدة لتمثيل توزيع نقاط البيانات وكثافةها على الخريطة.

مقدمة

تتضمّن حزمة تطوير البرامج (SDK) لخدمة "خرائط Google" لنظام التشغيل Android أداة خريطة التمثيل اللوني، والتي يمكنك استخدامها لإضافة خريطة التمثيل اللوني واحدة أو أكثر إلى خريطة Google في تطبيقك.

يناقش هذا الفيديو استخدام خرائط التمثيل اللوني كبديل للعلامات عندما تكون بياناتك تتطلّب عددًا كبيرًا من نقاط البيانات على الخريطة.

تسهّل خرائط التمثيل اللوني على المشاهدين فهم توزيع نقاط البيانات وكثافتها النسبية على الخريطة. بدلاً من وضع محدّد موقع في كل موقع جغرافي، تستخدم خرائط التمثيل اللوني لونًا لتمثيل توزيع البيانات.

في المثال أدناه، يشير اللون الأحمر إلى المناطق التي تسجّل مراكز شرطة كبيرة في مدينة فيكتوريا بأستراليا.

إذا لم تُعِدّ بعد حزمة تطوير البرامج (SDK) لتطبيق "خرائط Google" لمكتبة Android Utility، اتّبِع دليل الإعداد قبل قراءة بقية هذه الصفحة.

إضافة خريطة التمثيل اللوني البسيطة

لإضافة خريطة التمثيل اللوني إلى خريطتك، ستحتاج إلى مجموعة بيانات تتألف من الإحداثيات لكل موقع جغرافي مهم. أولاً، عليك إنشاء HeatmapTileProvider، مع تمرير مجموعة العناصر LatLng. بعد ذلك، يمكنك إنشاء TileOverlay جديدة، وتمريرها إلى مزوّد مربّع خريطة التمثيل اللوني، وإضافة تراكب الشاشة إلى الخريطة.

وتوفّر الأداة المساعدة الفئة HeatmapTileProvider التي تنفّذ واجهة TileProvider لتوفير صور المربّعات للخريطة الحرارية. يقبل HeatmapTileProvider مجموعة من عناصر LatLng (أو عناصر WeightedLatLng، كما هو موضّح أدناه). ويتم إنشاء صور المربّعات لمستويات تكبير/تصغير مختلفة، استنادًا إلى خيارات النطاق الجغرافي والتدرج والتعتيم المتوفّرة. ويمكنك تغيير القيم التلقائية لهذه الخيارات.

يمكنك الاطّلاع على الخطوات بمزيد من التفصيل:

1. استخدِم HeatmapTileProvider.Builder()، مع تمريرها إلى مجموعة من العناصر LatLng، لإضافة HeatmapTileProvider جديدة.
2. ويمكنك إنشاء كائن جديد على TileOverlayOptions بالخيارات ذات الصلة، بما في ذلك HeatmapTileProvider.
3. انقر على رمز GoogleMap.addTileOverlay() لإضافة التراكب إلى الخريطة.

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

      

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. النطاق الجغرافي: حجم تمويه غاوس الذي تم تطبيقه على خريطة التمثيل اللوني، ويتم التعبير عنه بالبكسل. القيمة التلقائية هي 20. يجب أن تتراوح القيمة بين 10 و50. استخدِم radius() في "أداة الإنشاء" لتحديد القيمة عند إنشاء خريطة التمثيل اللوني، أو غيِّر القيمة لاحقًا باستخدام setRadius().
2. مدرج: مجموعة من الألوان تستخدمها خريطة التمثيل اللوني لإنشاء خريطة الألوان، بدءًا من أقل كثافة إلى أعلى كثافة. يتم إنشاء تدرج باستخدام مصفوفتين: مصفوفة عدد صحيح تحتوي على الألوان ومصفوفة عائمة تشير إلى نقطة البداية لكل لون، ويتم تقديمها كنسبة مئوية من أقصى كثافة، ويتم التعبير عنها ككسر من 0 إلى 1. يجب تحديد لون واحد فقط للتدرّج الأحادي اللون، أو تحديد لونَين على الأقل للتدرّج المتعدد الألوان. يتم إنشاء خريطة الألوان باستخدام البينات بين هذه الألوان. يحتوي التدرج التلقائي على لونين. استخدِم أداة الإنشاء في gradient() لتحديد القيمة عند إنشاء خريطة التمثيل اللوني، أو غيِّر القيمة في وقت لاحق باستخدام setGradient().
3. التعتيم: هذا هو تعتيم طبقة خريطة التمثيل اللوني بالكامل، وتتراوح من 0 إلى 1. والقيمة التلقائية هي 0.7. استخدِم opacity() في أداة الإنشاء لتحديد القيمة عند إنشاء خريطة التمثيل اللوني، أو غيِّر القيمة لاحقًا باستخدام setOpacity().

على سبيل المثال، يمكنك إنشاء Gradient لضبط التدرج قبل إضافة خريطة التمثيل اللوني:

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

      

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

      

لتغيير تعتيم خريطة التمثيل اللوني الحالية:

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

      

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

      

تغيير مجموعة البيانات

لتغيير مجموعة البيانات التي تم إنشاء خريطة التمثيل اللوني عليها، يمكنك استخدام HeatmapTileProvider.setData() أو HeatmapTileProvider.setWeightedData() لنقطة WeightedLatLng. ملاحظة: إذا كنت تريد إضافة نقاط إلى خريطة التمثيل اللوني، أو إزالة نقاط من خريطة التمثيل اللوني، عليك تعديل جمع بياناتك ثم استخدام setData() أو setWeightedData().

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

      

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

      

إزالة خريطة التمثيل اللوني

لإزالة خريطة التمثيل اللوني، عليك إزالة تراكب الأجزاء:

tileOverlay.remove();

      

tileOverlay?.remove()

      

عرض التطبيق التجريبي

في ما يلي مثال آخر على تنفيذ خريطة التمثيل اللوني، يمكنك الاطّلاع على HeatmapsDemoActivity في التطبيق التجريبي الذي يتم شحنه إلى مكتبة الأدوات المساعدة. يوضّح لك دليل الإعداد كيفية تشغيل التطبيق التجريبي.