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

  • مقالة
  • قراءة خلال 6 دقائق

غالبا ما يتم تمثيل البيانات المكانية باستخدام النقاط والخطوط والمضلعات. غالبا ما تحتوي هذه البيانات على معلومات بيانات وصفية مرتبطة بها. على سبيل المثال، قد تمثل نقطة ما موقع مطعم وقد تكون البيانات الوصفية حول هذا المطعم هي اسمه وعنوانه ونوع الطعام الذي يقدمه. يمكن إضافة بيانات التعريف هذه كخصائص ل GeoJSON Feature. تقوم التعليمة البرمجية التالية بإنشاء ميزة نقطة بسيطة مع 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(-122.33, 47.64));

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

//Create a point feature, pass in the metadata properties, and add it to the data source.
source.add(feature);

//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(-122.33, 47.64))

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

//Create a point feature, pass in the metadata properties, and add it to the data source.
source.add(feature)

راجع وثائق إنشاء مصدر بيانات لمعرفة طرق إنشاء البيانات وإضافتها إلى الخريطة.

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

//Create a symbol and add it to the map.
SymbolLayer layer = new SymbolLayer(source);
map.layers.add(layer);

//Add a feature click event to the map.
map.events.add((OnFeatureClick) (features) -> {
    //Retrieve the title property of the feature as a string.
    String msg = features.get(0).getStringProperty("title");

    //Do something with the message.

    //Return a boolean indicating if event should be consumed or continue bubble up.
    return false;
}, layer.getId());    //Limit this event to the symbol layer.

//Create a symbol and add it to the map.
val layer = SymbolLayer(source)
map.layers.add(layer)

//Add a feature click event to the map.
map.events.add(OnFeatureClick { features: List<Feature> ->
    //Retrieve the title property of the feature as a string.
    val msg = features[0].getStringProperty("title")

    //Do something with the message.

    //Return a boolean indicating if event should be consumed or continue bubble up.
    return false
}, layer.getId()) //Limit this event to the symbol layer.

عرض رسالة منبثقة

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

//Add a feature click event to the map.
map.events.add((OnFeatureClick) (features) -> {
    //Retrieve the title property of the feature as a string.
    String msg = features.get(0).getStringProperty("title");

    //Display a toast message with the title information.
    Toast.makeText(this, msg, Toast.LENGTH_SHORT).show();

    //Return a boolean indicating if event should be consumed or continue bubble up.
    return false;
}, layer.getId());    //Limit this event to the symbol layer.

//Add a feature click event to the map.
map.events.add(OnFeatureClick { features: List<Feature> ->
    //Retrieve the title property of the feature as a string.
    val msg = features[0].getStringProperty("title")

    //Display a toast message with the title information.
    Toast.makeText(this, msg, Toast.LENGTH_SHORT).show()

    //Return a boolean indicating if event should be consumed or continue bubble up.
    return false
}, layer.getId()) //Limit this event to the symbol layer.

Animation of a feature being tapped and a toast message being displayed

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

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

عرض نافذة منبثقة

توفر Popup خرائط Azure Android SDK فئة تجعل من السهل إنشاء عناصر التعليق التوضيحي لواجهة المستخدم المرتبطة بموضع على الخريطة. بالنسبة للنوافذ المنبثقة ، يجب عليك المرور في طريقة عرض ذات تخطيط نسبي إلى content خيار النافذة المنبثقة. فيما يلي مثال تخطيط بسيط يعرض نصا داكنا أعلى خلفية لفترة من الوقت.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:orientation="vertical"
    android:background="#ffffff"
    android:layout_margin="8dp"
    android:padding="10dp"

    android:layout_height="match_parent">

    <TextView
        android:id="@+id/message"
        android:layout_width="wrap_content"
        android:text=""
        android:textSize="18dp"
        android:textColor="#222"
        android:layout_height="wrap_content"
        android:width="200dp"/>

</RelativeLayout>

بافتراض تخزين التخطيط أعلاه في ملف يتم استدعاؤه popup_text.xml في res -> layout مجلد أحد التطبيقات، تقوم التعليمة البرمجية التالية بإنشاء نافذة منبثقة، وإضافتها إلى الخريطة. عند النقر فوق معلم، يتم عرض الخاصية باستخدام التخطيط، title مع تثبيت المركز السفلي للتخطيط على الموضع popup_text.xml المحدد على الخريطة.

//Create a popup and add it to the map.
Popup popup = new Popup();
map.popups.add(popup);

map.events.add((OnFeatureClick)(feature) -> {
    //Get the first feature and it's properties.
    Feature f = feature.get(0);
    JsonObject props = f.properties();

    //Retrieve the custom layout for the popup.
    View customView = LayoutInflater.from(this).inflate(R.layout.popup_text, null);

    //Access the text view within the custom view and set the text to the title property of the feature.
    TextView tv = customView.findViewById(R.id.message);
    tv.setText(props.get("title").getAsString());

    //Get the position of the clicked feature.
    Position pos = MapMath.getPosition((Point)cluster.geometry());

    //Set the options on the popup.
    popup.setOptions(
        //Set the popups position.
        position(pos),

        //Set the anchor point of the popup content.
        anchor(AnchorType.BOTTOM),

        //Set the content of the popup.
        content(customView)

        //Optionally, hide the close button of the popup.
        //, closeButton(false)

        //Optionally offset the popup by a specified number of pixels.
        //pixelOffset(new Pixel(10, 10))
    );

    //Open the popup.
    popup.open();

    //Return a boolean indicating if event should be consumed or continue bubble up.
    return false;
});

//Create a popup and add it to the map.
val popup = Popup()
map.popups.add(popup)

map.events.add(OnFeatureClick { feature: List<Feature> ->
    //Get the first feature and it's properties.
    val f = feature[0]
    val props = f.properties()

    //Retrieve the custom layout for the popup.
    val customView: View = LayoutInflater.from(this).inflate(R.layout.popup_text, null)

    //Access the text view within the custom view and set the text to the title property of the feature.
    val tv: TextView = customView.findViewById(R.id.message)
    tv.text = props!!["title"].asString

    //Get the position of the clicked feature.
    val pos = MapMath.getPosition(f.geometry() as Point?);

    //Set the options on the popup.
    popup.setOptions( 
        //Set the popups position.
        position(pos),  

        //Set the anchor point of the popup content.
        anchor(AnchorType.BOTTOM),  

        //Set the content of the popup.
        content(customView) 

        //Optionally, hide the close button of the popup.
        //, closeButton(false)

        //Optionally offset the popup by a specified number of pixels.
        //pixelOffset(Pixel(10, 10))
    )

    //Open the popup.
    popup.open()

    //Return a boolean indicating if event should be consumed or continue bubble up.
    false
})

يعرض التقاط الشاشة التالي النوافذ المنبثقة التي تظهر عند النقر فوق المعالم وتظل ثابتة على موقعها المحدد على الخريطة أثناء تحركها.

Animation of a popup being displayed and the map moved with the popup anchored to a position on the map

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

لإضافة المزيد من البيانات إلى خريطتك:

React لتعيين الأحداث

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

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

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

إضافة طبقة خط

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