إضافة طَبقة رمز (Android SDK)

توضّح هذه المقالة كيفية عرض بيانات النقطة من مصدر بيانات كطبقة رمز على الخريطة باستخدام Azure Android Maps 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 a point and add it to the data source.
source.add(Point.fromLngLat(0, 0));

//Create a symbol layer to render icons and/or text at points on the map.
SymbolLayer layer = new SymbolLayer(source);

//Add the layer to the map.
map.layers.add(layer);

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

//Create a point and add it to the data source.
source.add(Point.fromLngLat(0, 0))

//Create a symbol layer to render icons and/or text at points on the map.
val layer = SymbolLayer(source)

//Add the layer to the map.
map.layers.add(layer)

يوجد ثلاثة أنواع مختلفة من بيانات النقاط التي يمكن إضافتها إلى الخريطة:

• هندسة نقطة GeoJSON - يحتوي هذا الكائن فقط على إحداثيات نقطة ولا يحتوي على أي شيء آخر. يمكن استخدام أسلوبPoint.fromLngLat الثابت لإنشاء هذه العناصر بسهولة.
• هندسة GeoJSON MultiPoint - يحتوي هذا العنصر على إحداثيات نقاط متعددة ولا شيء آخر. مرر صفيف من النقاط إلى الفئة MultiPoint لإنشاء هذه العناصر.
• ميزة GeoJSON - يتكون هذا الكائن من أي هندسة GeoJSON ومجموعة من الخصائص التي تحتوي على بيانات تعريف مرتبطة بالهندسة.

للمزيد من المعلومات، راجع مستند إنشاء مصدر بيانات بشأن إنشاء البيانات وإضافتها إلى الخريطة.

ينشئ نموذج التعليمات البرمجية التالي هندسة GeoJSON Point ويمررها إلى GeoJSON Feature ولها قيمة title مضافة إلى خصائصها. تُعرض الخاصية title كرسالة نصية أسفل أيقونة الرمز على الخريطة.

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

//Create a point feature.
Feature feature = Feature.fromGeometry(Point.fromLngLat(0, 0));

//Add a property to the feature.
feature.addStringProperty("title", "Hello World!");

//Add the feature to the data source.
source.add(feature);

//Create a symbol layer to render icons and/or text at points on the map.
SymbolLayer layer = new SymbolLayer(source, 
    //Get the title property of the feature and display it on the map.
    textField(get("title"))
);

//Add the layer to the map.
map.layers.add(layer);

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

//Create a point feature.
val feature = Feature.fromGeometry(Point.fromLngLat(0, 0))

//Add a property to the feature.
feature.addStringProperty("title", "Hello World!")

//Add the feature to the data source.
source.add(feature)

//Create a symbol layer to render icons and/or text at points on the map.
val layer = SymbolLayer(
    source,  //Get the title property of the feature and display it on the map.
    textField(get("title"))
)

//Add the layer to the map.
map.layers.add(layer)

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

تلميح

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

أضف رمزًا مخصصًا إلى طبقة الرموز

يتم عرض طبقات الرموز باستخدام WebGL. على هذا النحو، يتعين تحميل جميع الموارد، مثل صور الأيقونات، في سياق WebGL. يبين هذا النموذج كيفية إضافة رمز مخصص إلى موارد الخريطة. ثم يتم استخدام هذه الأيقونة لعرض بيانات النقطة مع رمز مخصص على الخريطة. تتطلب خاصية textField لطبقة الرمز تحديد تعبير. في هذه الحالة، نريد عرض خاصية درجة الحرارة. نظرًا لأن درجة الحرارة عبارة عن رقم، فإنه يجب تحويلها إلى سلسلة. بالإضافة إلى ذلك، نريد إلحاق "°F" بها. يمكن استخدام تعبير للقيام بهذا التسلسل؛ concat(Expression.toString(get("temperature")), literal("°F")).

//Load a custom icon image into the image sprite of the map.
map.images.add("my-custom-icon", R.drawable.showers);

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

//Create a point feature.
Feature feature = Feature.fromGeometry(Point.fromLngLat(-73.985708, 40.75773));

//Add a property to the feature.
feature.addNumberProperty("temperature", 64);

//Add the feature to the data source.
source.add(feature);

//Create a symbol layer to render icons and/or text at points on the map.
SymbolLayer layer = new SymbolLayer(source,
    iconImage("my-custom-icon"),
    iconSize(0.5f),

    //Get the title property of the feature and display it on the map.
    textField(concat(Expression.toString(get("temperature")), literal("°F"))),
    textOffset(new Float[]{0f, -1.5f})
);

//Load a custom icon image into the image sprite of the map.
map.images.add("my-custom-icon", R.drawable.showers)

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

//Create a point feature.
val feature = Feature.fromGeometry(Point.fromLngLat(-73.985708, 40.75773))

//Add a property to the feature.
feature.addNumberProperty("temperature", 64)

//Add the feature to the data source.
source.add(feature)

//Create a symbol layer to render icons and/or text at points on the map.
val layer = SymbolLayer(
    source,
    iconImage("my-custom-icon"),
    iconSize(0.5f),  //Get the title property of the feature and display it on the map.
    textField(concat(Expression.toString(get("temperature")), literal("°F"))),
    textOffset(arrayOf(0f, -1.5f))
)

بالنسبة لهذه العينة، تم تحميل الصورة التالية في مجلد التطبيق القابل للرسم.

showers.png

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

تلميح

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

تعديل الألوان للرموز

يأتي Azure Maps Android SDK مع مجموعة من تباينات الألوان المعرفة مسبقًا من أيقونة العلامة الافتراضية. على سبيل المثال، marker-red يمكن تمريرها إلى خيارiconImage لطبقة رمز لعرض إصدار أحمر من أيقونة العلامة في تلك الطبقة.

SymbolLayer layer = new SymbolLayer(source,
    iconImage("marker-red")
);

val layer = SymbolLayer(source,
    iconImage("marker-red")
)

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

اسم صورة الأيقونَة	اسم مورِد اللون
marker-default	azure_maps_marker_default
marker-black	azure_maps_marker_black
marker-blue	azure_maps_marker_blue
marker-darkblue	azure_maps_marker_darkblue
marker-red	azure_maps_marker_red
marker-yellow	azure_maps_marker_yellow

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

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="azure_maps_marker_default">#00FF00</color>
</resources>

التعليمات البرمجية التالية هي إصدار معدل من XML المتجه للعلامة الافتراضية التي يمكنك تعديلها لتنشئ إصدارات مخصصة من العلامة الافتراضية. يمكن إضافة الإصدار المعدل إلى مجلد drawable في تطبيقك وإضافته إلى صورة sprite للخرائط باستخدام map.images.add، ثم استخدامه مع طبقة رمز.

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="24.5dp"
    android:height="36.5dp"
    android:viewportWidth="24.5"
    android:viewportHeight="36.5">
    <path
        android:pathData="M12.25,0.25a12.2543,12.2543 0,0 0,-12 12.4937c0,6.4436 6.4879,12.1093 11.059,22.5641 0.5493,1.2563 1.3327,1.2563 1.882,0C17.7621,24.8529 24.25,19.1857 24.25,12.7437A12.2543,12.2543 0,0 0,12.25 0.25Z"
        android:strokeWidth="0.5"
        android:fillColor="@color/azure_maps_marker_default"
        android:strokeColor="@color/azure_maps_marker_border"/>
</vector>

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

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

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

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

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

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

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