إضافة طبقة خريطة التمثيل اللوني (Android SDK)

إشعار

خرائط Azure إيقاف Android SDK

تم الآن إهمال خرائط Azure Native SDK لنظام التشغيل Android وسيتم إيقافه في 3/31/25. لتجنب انقطاع الخدمة، قم بالترحيل إلى خرائط Azure Web SDK بحلول 3/31/25. لمزيد من المعلومات، راجع دليل ترحيل خرائط Azure Android SDK.

خرائط التمثيل اللوني، والمعروفة أيضًا باسم خرائط كثافة النقاط، هي نوع من تصور البيانات. يتم استخدامها لتمثيل كثافة البيانات باستخدام مجموعة من الألوان وإظهار البيانات "النقاط الفعالة" على الخريطة. تعد خريطة التمثيل اللوني طريقة رائعة لعرض مجموعات البيانات بعدد كبير من النقاط.

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

يمكنك استخدام خرائط التمثيل اللوني في العديد من السيناريوهات المختلفة، بما في ذلك:

• بيانات درجة الحرارة: توفر تقريبات لما هي درجة الحرارة بين نقطتي بيانات.
• البيانات الخاصة بأجهزة استشعار الضوضاء: لا تظهر فقط شدة الضوضاء حيث يوجد المستشعر، ولكن يمكن أن توفر أيضاً نظرة ثاقبة على التبديد عبر مسافة. قد لا يكون مستوى الضوضاء في أحد المواقع مرتفعاً. إذا تداخلت منطقة تغطية الضوضاء من أجهزة استشعار متعددة، فمن المحتمل أن تواجه هذه المنطقة المتداخلة مستويات أعلى من الضوضاء. على هذا النحو، ستكون المنطقة المتداخلة مرئية في خريطة التمثيل اللوني.
• تتبع GPS: يتضمن السرعة كخريطة ارتفاع مرجحة، حيث تعتمد كثافة كل نقطة بيانات على السرعة. على سبيل المثال، توفر هذه الوظيفة طريقة لمعرفة مكان سرعة السيارة.

تلميح

تعرض طبقات خريطة التمثيل اللوني بشكلٍ افتراضي إحداثيات جميع الأشكال الهندسية في مصدر بيانات. لتقييد الطبقة بحيث تعرض فقط معالم هندسة النقاط، اضبط خيار filterللطبقة علىeq(geometryType(), "Point"). إذا كنت ترغب في تضمين ميزات MultiPoint أيضًا، عين الخيار filter للطبقة إلى any(eq(geometryType(), "Point"), eq(geometryType(), "MultiPoint")).

المتطلبات الأساسية

تأكد من إكمال الخطوات الواردة في تشغيل سريع : إنشاء مستند لتطبيق Android. يمكن إدراج كتل التعليمة البرمجية في هذه المقالة في معالج أحداث onReady الخرائط.

إضافة طبقة خريطة حرارية

لعرض مصدر بيانات للنقاط كخريطة حرارية، مرر مصدر البيانات إلى مثيل للفئة HeatMapLayer، وأضفه إلى الخريطة.

يقوم نموذج التعليمات البرمجية التالي بتحميل موجز GeoJSON للزلازل من الأسبوع الماضي وعرضها كخريطة تمثيل لوني. يتم عرض كل نقطة بيانات بنصف قطر 10 بكسل في جميع مستويات التكبير/التصغير. لضمان تجربة مستخدم أفضل، تكون خريطة التمثيل اللوني أسفل طبقة التسمية بحيث تظل التسميات مرئية بوضوح. البيانات الواردة في هذه العينة مأخوذة من برنامج USGS Earthquake Hazards. يقوم هذا النموذج بتحميل بيانات GeoJSON من الويب باستخدام كتلة التعليمات البرمجية لأداة استيراد البيانات المتوفرة في مستند إنشاء مصدر بيانات.

//Create a data source and add it to the map.
DataSource source = new DataSource();

//Import the geojson data and add it to the data source.
source.importDataFromUrl("https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/all_week.geojson");

//Add data source to the map.
map.sources.add(source);

//Create a heat map layer.
HeatMapLayer layer = new HeatMapLayer(source,
  heatmapRadius(10f),
  heatmapOpacity(0.8f)
);

//Add the layer to the map, below the labels.
map.layers.add(layer, "labels");

//Create a data source and add it to the map.
val source = DataSource()

//Import the geojson data and add it to the data source.
source.importDataFromUrl("https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/all_week.geojson")

//Add data source to the map.
map.sources.add(source)

//Create a heat map layer.
val layer = HeatMapLayer(
    source,
    heatmapRadius(10f),
    heatmapOpacity(0.8f)
)

//Add the layer to the map, below the labels.
map.layers.add(layer, "labels")

تُظهر لقطة الشاشة التالية خريطة تقوم بتحميل خريطة تمثيل لوني باستخدام التعليمة البرمجية أعلاه.

تخصيص طبقة خريطة التمثيل اللوني

قام المثال السابق بتخصيص خريطة التمثيل اللوني عن طريق تعيين خيارات نصف القطر والتعتيم. توفر طبقة خريطة التمثيل اللوني عدة خيارات للتخصيص، بما في ذلك:

• heatmapRadius: يحدد نصف قطر البكسل لعرض جميع نقاط البيانات. يمكنك تعيين نصف القطر كرقم ثابت أو كتعبير. باستخدام تعبير، يمكنك قياس نصف القطر استناداً إلى مستوى التكبير/التصغير، وتمثيل منطقة مكانية متناسقة على الخريطة (على سبيل المثال، نصف قطر 5 أميال).

• heatmapColor: يحدد كيفية تلوين خريطة التمثيل اللوني. تدرج اللون هو سمة شائعة من خرائط التمثيل اللوني. يمكنك تحقيق التأثير باستخدام تعبير interpolate. يمكنك أيضاً استخدام تعبير step لتلوين خريطة التمثيل اللوني، وتقسيم الكثافة بصرياً إلى نطاقات تشبه مخطط نمط محيط أو نسيجي. تحدد لوحات الألوان هذه الألوان من الحد الأدنى إلى قيمة الكثافة القصوى.

  يمكنك تحديد قيم الألوان لخرائط التمثيل اللوني كتعبير على القيمة heatmapDensity. يتم تعريف لون المنطقة التي لا توجد فيها بيانات في الفهرس 0 لتعبير "الاستنتاج"، أو اللون الافتراضي لتعبير "متدرج". يمكنك استخدام هذه القيمة لتعريف لون خلفية. غالباً ما يتم تعيين هذه القيمة إلى شفافة أو سوداء شبه شفافة.

  فيما يلي أمثلة لتعبيرات الألوان:

  تعبير لون الاستنتاج	تعبير اللون المتدرج
  interpolate(     خطي()،     heatmapDensity(),     stop(0, color(Color.TRANSPARENT)),     stop(0.01, color(Color.MAGENTA)),     stop(0.5, color(parseColor("#fb00fb"))),     stop(1, color(parseColor("#00c3ff"))) )`	step(     heatmapDensity(),     color(Color.TRANSPARENT),     stop(0.01, color(parseColor("#000080"))),     stop(0.25, color(parseColor("#000080"))),     stop(0.5, color(Color.GREEN)),     stop(0.5, color(Color.YELLOW)),     stop(1, color(Color.RED)) )

• heatmapOpacity: يحدد مدى تعتيم أو شفافية طبقة خريطة التمثيل اللوني.

• heatmapIntensity: يطبق مُضاعِفاً على وزن كل نقطة بيانات لزيادة الكثافة الإجمالية لخريطة التمثيل اللوني. فهو يسبب فرقاً في وزن نقاط البيانات، ما يسهل تصوره.

• heatmapWeight: بشكلٍ افتراضي، يكون وزن جميع نقاط البيانات 1، ويتم ترجيحها بالتساوي. يعمل خيار الوزن كمُضاعِف، ويمكنك تعيينه كرقم أو تعبير. إذا تم تعيين رقم على أنه الوزن، فإنه يعادل وضع كل نقطة بيانات على الخريطة مرتين. على سبيل المثال، إذا كان الوزن هو 2، فستتضاعف الكثافة. يؤدي تعيين خيار الوزن إلى رقم إلى عرض خريطة التمثيل اللوني بطريقة مماثلة لاستخدام خيار الكثافة.

  ومع ذلك، إذا كنت تستخدم تعبيراً، يمكن أن يستند وزن كل نقطة بيانات إلى خصائص جميع نقاط البيانات. على سبيل المثال، افترض أن كل نقطة بيانات تمثل زلزالاً. كانت قيمة المقدار مقياساً مهماً لكل نقطة بيانات زلزال. تحدث الزلازل طوال الوقت، ولكن معظمها تكون قوتها منخفضة ولا تتم ملاحظتها. استخدم قيمة المقدار في تعبير لتعيين الوزن لكل نقطة بيانات. باستخدام قيمة المقدار لتعيين الوزن، تحصل على تمثيل أفضل لأهمية الزلازل داخل خريطة التمثيل اللوني.

• minZoom وmaxZoom: نطاق مستوى التكبير/التصغير حيث يجب عرض الطبقة.

• filter: تعبير عامل تصفية يستخدم للحد من الذي تم استرداده من المصدر وعرضه في الطبقة.

• sourceLayer: إذا كان مصدر البيانات المتصل بالطبقة هو مصدر تجانب متجه، فيجب تحديد طبقة مصدر داخل الإطارات المتجانبة المتجهة.

• visible: إخفاء الطبقة أو إظهارها.

القصاصة البرمجية التالية هي مثال على خريطة التمثيل اللوني حيث يتم استخدام تعبير استنتاج خطي لإنشاء تدرج لون متجانس. تستخدم الخاصية mag المعرفة في البيانات مع استنتاج أسي لتعيين وزن أو صلة كل نقطة بيانات.

HeatMapLayer layer = new HeatMapLayer(source,
    heatmapRadius(10f),

    //A linear interpolation is used to create a smooth color gradient based on the heat map density.
    heatmapColor(
        interpolate(
            linear(),
            heatmapDensity(),
            stop(0, color(Color.TRANSPARENT)),
            stop(0.01, color(Color.BLACK)),
            stop(0.25, color(Color.MAGENTA)),
            stop(0.5, color(Color.RED)),
            stop(0.75, color(Color.YELLOW)),
            stop(1, color(Color.WHITE))
        )
    ),

    //Using an exponential interpolation since earthquake magnitudes are on an exponential scale.
    heatmapWeight(
       interpolate(
            exponential(2),
            get("mag"),
            stop(0,0),

            //Any earthquake above a magnitude of 6 will have a weight of 1
            stop(6, 1)
       )
    )
);

val layer = HeatMapLayer(source,
    heatmapRadius(10f),

    //A linear interpolation is used to create a smooth color gradient based on the heat map density.
    heatmapColor(
        interpolate(
            linear(),
            heatmapDensity(),
            stop(0, color(Color.TRANSPARENT)),
            stop(0.01, color(Color.BLACK)),
            stop(0.25, color(Color.MAGENTA)),
            stop(0.5, color(Color.RED)),
            stop(0.75, color(Color.YELLOW)),
            stop(1, color(Color.WHITE))
        )
    ),

    //Using an exponential interpolation since earthquake magnitudes are on an exponential scale.
    heatmapWeight(
       interpolate(
            exponential(2),
            get("mag"),
            stop(0,0),

            //Any earthquake above a magnitude of 6 will have a weight of 1
            stop(6, 1)
       )
    )
)

تُظهر لقطة الشاشة التالية طبقة خريطة التمثيل اللوني المخصصة أعلاه باستخدام نفس البيانات من مثال خريطة التمثيل اللوني السابق.

خريطة التمثيل اللوني المتسقة القابلة للتكبير

بشكل افتراضي، يحتوي radii لنقاط البيانات المعروضة في طبقة خريطة التمثيل اللوني على نصف قطر بكسل ثابت لجميع مستويات التكبير. أثناء تكبير الخريطة، تجمع البيانات معاً وتبدو طبقة خريطة التمثيل اللوني مُختلفة. يعرض الفيديو التالي السلوك الافتراضي لخريطة التمثيل اللوني حيث يحافظ على نصف قطر البكسل عند تكبير الخريطة.

استخدم تعبير zoom لتوسيع نطاق نصف القطر لكل مستوى تكبير بحيث تغطي كل نقطة بيانات نفس المنطقة المادية للخريطة. هذا التعبير يجعل طبقة خريطة التمثيل اللوني تبدو أكثر ثباتاً واتساقاً. يحتوي كل مستوى تكبير في الخريطة على ضعف عدد وحدات البكسل عمودياً وأفقياً مثل مستوى التكبير السابق.

يؤدي تحجيم نصف القطر، بحيث يتضاعف مع كل مستوى تكبير، إلى إنشاء خريطة حرارية تبدو متسقة على جميع مستويات التكبير. لتطبيق هذا القياس، استخدم zoom مع تعبير أساسي 2 exponential interpolation، مع تعيين نصف قطر البكسل لأدنى مستوى تكبير ونصف قطر محسوب لأقصى مستوى تكبير محسوب كـ 2 * Math.pow(2, minZoom - maxZoom) كما هو موضح في النموذج التالي. قم بتكبير الخريطة لمعرفة كيفية تحجيم خريطة التمثيل اللوني مع مستوى التكبير/التصغير.

HeatMapLayer layer = new HeatMapLayer(source,
  heatmapRadius(
    interpolate(
      exponential(2),
      zoom(),

      //For zoom level 1 set the radius to 2 pixels.
      stop(1, 2f),

      //Between zoom level 1 and 19, exponentially scale the radius from 2 pixels to 2 * (maxZoom - minZoom)^2 pixels.
      stop(19, Math.pow(2, 19 - 1) * 2f)
    )
  ),
  heatmapOpacity(0.75f)
);

val layer = HeatMapLayer(source,
  heatmapRadius(
    interpolate(
      exponential(2),
      zoom(),

      //For zoom level 1 set the radius to 2 pixels.
      stop(1, 2f),

      //Between zoom level 1 and 19, exponentially scale the radius from 2 pixels to 2 * (maxZoom - minZoom)^2 pixels.
      stop(19, Math.pow(2.0, 19 - 1.0) * 2f)
    )
  ),
  heatmapOpacity(0.75f)
)

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

لا يمكن استخدام التعبير zoom إلا في التعبيرات step وinterpolate. يمكن استخدام التعبير التالي لتقريب نصف قطر بالأمتار. يستخدم هذا التعبير عنصر نائب radiusMeters، والذي يجب استبداله نصف القطر المطلوب. يحسب هذا التعبير نصف قطر البكسل التقريبي لمستوى التكبير/التصغير في خط الاستواء لمستويات التكبير/التصغير 0 و24، ويستخدم تعبيراً exponential interpolation للتحجيم بين هذه القيم بنفس الطريقة التي يعمل بها نظام التجانب في الخريطة.

interpolate(
    exponential(2),
    zoom(),
    stop(1, product(radiusMeters, 0.000012776039596366526)),
    stop(24, product(radiusMeters, 214.34637593279402))
)

تلميح

عند تمكين التجميع على مصدر البيانات، يتم تجميع النقاط القريبة من بعضها معاً كنقطة مجمعة. يمكنك استخدام عدد النقاط لكل مجموعة كتعبير الوزن لخريطة التمثيل اللوني. يمكن أن يقلل هذا بشكلٍ كبير من عدد النقاط التي سيتم تقديمها. يتم تخزين عدد النقاط لنظام المجموعة في خاصية point_count لميزة النقطة:

HeatMapLayer layer = new HeatMapLayer(dataSource,
   heatmapWeight(get("point_count"))
);

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

interpolate(
    exponential(2),
    zoom(),
    stop(1, product(radiusMeters, 0.000012776039596366526)),
    stop(24, product(radiusMeters, 214.34637593279402))
)

تلميح

عند تمكين التجميع على مصدر البيانات، يتم تجميع النقاط القريبة من بعضها معاً كنقطة مجمعة. يمكنك استخدام عدد النقاط لكل مجموعة كتعبير الوزن لخريطة التمثيل اللوني. يمكن أن يقلل هذا بشكلٍ كبير من عدد النقاط التي سيتم تقديمها. يتم تخزين عدد النقاط لنظام المجموعة في خاصية point_count لميزة النقطة:

var layer = new HeatMapLayer(dataSource,
   heatmapWeight(get("point_count"))
)

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

الخطوات التالية

لمزيدٍ من أمثلة التعليمات البرمجية لإضافتها إلى الخرائط، راجع المقالات التالية:

إنشاء مصدر بيانات

استخدام تعبيرات النمط المبنية على البيانات