أداة خريطة التمثيل اللوني لأجهزة Android في "خرائط Google"

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

مقدمة

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

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

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

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

إذا لم تكن قد أعددت حزمة تطوير البرامج بالاستناد إلى بيانات "خرائط Google" لمكتبة أدوات Android اتّباع دليل الإعداد قبل قراءة بقية هذه الصفحة.

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

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

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

إلقاء نظرة على الخطوات بمزيد من التفصيل:

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

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
}

      

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

      

في هذا المثال، يتم تخزين البيانات في ملف جسون، 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.
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)
)

      

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

      

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

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

      

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

      

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

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

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

      

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

      

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

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

tileOverlay?.remove()

      

tileOverlay.remove();

      

الاطّلاع على التطبيق التجريبي

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