إضافة طبقة فقاعية من الخريطة إلى الخريطة (Android SDK)

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

إشعار

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

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

تلميح

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

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

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

إضافة طبقة فقاعة

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

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

//Create point locations.
Point[] points = new Point[] {
    Point.fromLngLat(-73.985708, 40.75773),
    Point.fromLngLat(-73.985600, 40.76542),
    Point.fromLngLat(-73.985550, 40.77900),
    Point.fromLngLat(-73.975550, 40.74859),
    Point.fromLngLat(-73.968900, 40.78859)
};

//Add multiple points to the data source.
source.add(points);

//Create a bubble layer to render the filled in area of the circle, and add it to the map.
BubbleLayer layer = new BubbleLayer(source, 
    bubbleRadius(5f),
    bubbleColor("white"),
    bubbleStrokeColor("#4288f7"),
    bubbleStrokeWidth(6f)
);

map.layers.add(layer);

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

//Create point locations.
val points: Array<Point> = arrayOf<Point>(
    Point.fromLngLat(-73.985708, 40.75773),
    Point.fromLngLat(-73.985600, 40.76542),
    Point.fromLngLat(-73.985550, 40.77900),
    Point.fromLngLat(-73.975550, 40.74859),
    Point.fromLngLat(-73.968900, 40.78859)
)

//Add multiple points to the data source.
source.add(points)

//Create a bubble layer to render the filled in area of the circle, and add it to the map.
val layer = BubbleLayer(
    source,
    bubbleRadius(5f),
    bubbleColor("white"),
    bubbleStrokeColor("#4288f7"),
    bubbleStrokeWidth(6f)
)

map.layers.add(layer)

تُظهر لقطة الشاشة التالية أن الكود أعلاه يعرض نقاطًا في طبقة فقاعية.

إظهار التسميات على طبقة فقاعية

هذه التعليمة البرمجية توضح لك كيفية استخدام طبقة فقاعية لعرض نقطة على الخريطة. وكيفية استخدام طبقة رمز لتقديم تسمية. لإخفاء أيقونة طبقة الرمز، عين الخيار iconImage إلى "none".

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

//Add a data point to the map.
source.add(Point.fromLngLat(-122.336641,47.627631));

//Add a bubble layer.
map.layers.add(new BubbleLayer(source,
    bubbleRadius(5f),
    bubbleColor("white"),
    bubbleStrokeColor("#4288f7"),
    bubbleStrokeWidth(6f)
));

//Add a symbol layer to display text, hide the icon image.
map.layers.add(new SymbolLayer(source,
    //Hide the icon image.
    iconImage("none"),
    textField("Museum of History & Industry (MOHAI)"),
    textColor("#005995"),
    textOffset(new Float[]{0f, -2.2f})
));

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

//Add a data point to the map.
source.add(Point.fromLngLat(-122.336641, 47.627631))

//Add a bubble layer.
map.layers.add(
    BubbleLayer(
        source,
        bubbleRadius(5f),
        bubbleColor("white"),
        bubbleStrokeColor("#4288f7"),
        bubbleStrokeWidth(6f)
    )
)

//Add a symbol layer to display text, hide the icon image.
map.layers.add(
    SymbolLayer(
        source,  //Hide the icon image.
        iconImage("none"),
        textField("Museum of History & Industry (MOHAI)"),
        textColor("#005995"),
        textOffset(arrayOf(0f, -2.2f))
    )
)

لقطة الشاشة التالية تُظهر التعليمة البرمجية أعلاه التي تعرض نقطة في طبقة فقاعية وتسمية نصية للنقطة بطبقة رمز.

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

راجع المقالات التالية للحصول على المزيد من نماذج التعليمات البرمجية لإضافتها إلى الخرائط الخاصة بك:

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

بيانات نقطة المجموعة

إضافة طبقة رمز

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

عرض معلومات الميزة