Wyświetlanie informacji o funkcjachDisplay feature information

Dane przestrzenne są często reprezentowane przy użyciu punktów, linii i wielokątów.Spatial data is often represented using points, lines, and polygons. Z tymi danymi często są skojarzone informacje o metadanych.This data often has metadata information associated with it. Na przykład punkt może przedstawiać lokalizację restauracji i metadane dotyczące tej restauracji może być nazwą, adresem i typem żywności, którą obsługuje.For example, a point may represent the location of a restaurant and metadata about that restaurant may be its name, address, and type of food it serves. Te metadane można dodać jako właściwości GEOJSON Feature .This metadata can be added as properties of a GeoJSON Feature. Poniższy kod tworzy prostą funkcję punktu z title właściwością o wartości "Hello World!"The following code creates a simple point feature with a title property that has a value of "Hello World!"

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

Zapoznaj się z dokumentacją Tworzenie źródła danych , aby poznać sposoby tworzenia i dodawania danych do mapy.See the Create a data source documentation for ways to create and add data to the map.

Gdy użytkownik współdziała z funkcją na mapie, zdarzenia mogą być używane do reagowania na te akcje.When a user interacts with a feature on the map, events can be used to react to those actions. Typowym scenariuszem jest wyświetlenie komunikatu o właściwościach metadanych funkcji, z którą korzysta użytkownik.A common scenario is to display a message made of the metadata properties of a feature the user interacted with. OnFeatureClickZdarzenie jest głównym zdarzeniem używanym do wykrywania, kiedy użytkownik wykorzystał funkcję na mapie.The OnFeatureClick event is the main event used to detect when the user tapped a feature on the map. Istnieje również OnLongFeatureClick zdarzenie.There's also an OnLongFeatureClick event. Podczas dodawania OnFeatureClick zdarzenia do mapy może być ograniczone do pojedynczej warstwy przez przekazanie identyfikatora warstwy w celu ograniczenia.When adding the OnFeatureClick event to the map, it can be limited to a single layer by passing in the ID of a layer to limit it to. Jeśli żaden identyfikator warstwy nie zostanie przekazana, naciśnięcie dowolnej funkcji na mapie, niezależnie od używanej warstwy, spowoduje uruchomienie tego zdarzenia.If no layer ID is passed in, tapping any feature on the map, regardless of which layer it is in, would fire this event. Poniższy kod tworzy warstwę symboli w celu renderowania danych punktu na mapie, a następnie dodaje OnFeatureClick zdarzenie i ogranicza go do tej warstwy symboli.The following code creates a symbol layer to render point data on the map, then adds an OnFeatureClick event and limits it to this symbol layer.

//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.

Wyświetl wyskakujący komunikatDisplay a toast message

Komunikat wyskakujący to jeden z najprostszych sposobów wyświetlania informacji dla użytkownika i jest dostępny we wszystkich wersjach systemu Android.A toast message is one of the easiest ways to display information to the user and is available in all versions of Android. Nie obsługuje żadnego typu danych wejściowych użytkownika i jest wyświetlana tylko przez krótki czas.It doesn't support any type of user input and is only displayed for a short period of time. Jeśli chcesz szybko poinformować użytkownika o tym, co Ci się podoba, komunikat wyskakujący może być dobrą opcją.If you want to quickly let the user know something about what they tapped on, a toast message might be a good option. Poniższy kod pokazuje, jak można użyć wyskakującego komunikatu ze OnFeatureClick zdarzeniem.The following code shows how a toast message can be used with the OnFeatureClick event.

//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.

Animacja wybieranej funkcji i wyświetlany wyskakujący komunikat

Oprócz wyskakujących komunikatów istnieje wiele innych sposobów prezentowania właściwości metadanych funkcji, takich jak:In addition to toast messages, There are many other ways to present the metadata properties of a feature, such as:

  • Element widget Snackbar - Snackbars Podaj uproszczoną opinię na temat operacji.Snackbar widget - Snackbars provide lightweight feedback about an operation. Pokazują one krótki komunikat w dolnej części ekranu na urządzeniu przenośnym i niższy na większych urządzeniach.They show a brief message at the bottom of the screen on mobile and lower left on larger devices. Snackbars występuje nad wszystkimi innymi elementami na ekranie i tylko jeden może być wyświetlany w danym momencie.Snackbars appear above all other elements on screen and only one can be displayed at a time.
  • Okna dialogowe — okno dialogowe to małe okno, które wyświetli komunikat z prośbą o podjęcie decyzji lub wprowadzeniem dodatkowych informacji.Dialogs - A dialog is a small window that prompts the user to make a decision or enter additional information. Okno dialogowe nie wypełnia ekranu i jest zwykle używane dla zdarzeń modalnych, które wymagają, aby użytkownicy musieli wykonać akcję, zanim będzie można kontynuować.A dialog doesn't fill the screen and is normally used for modal events that require users to take an action before they can continue.
  • Dodaj fragment do bieżącego działania.Add a Fragment to the current activity.
  • Przejdź do innego działania lub widoku.Navigate to another activity or view.

Wyświetlanie okna podręcznegoDisplay a popup

Android SDK Azure Maps zawiera Popup klasę, która ułatwia tworzenie elementów adnotacji interfejsu użytkownika, które są zakotwiczone do położenia na mapie.The Azure Maps Android SDK provides a Popup class that makes it easy to create UI annotation elements that are anchored to a position on the map. W przypadku okien podręcznych należy przekazać widok z układem względnym do content opcji okna podręcznego.For popups, you have to pass in a view with a relative layout into the content option of the popup. Oto prosty przykład układu, który wyświetla ciemny tekst na wierzchu while w tle.Here is a simple layout example that displays dark text on top of a while background.

<?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>

Przy założeniu, że powyższy układ jest przechowywany w pliku o nazwie popup_text.xml w res -> layout folderze aplikacji, poniższy kod tworzy okno podręczne, dodaje go do mapy.Assuming the above layout is stored in a file called popup_text.xml in the res -> layout folder of an app, the following code creates a popup, adds it to the map. Po kliknięciu funkcji title Właściwość jest wyświetlana przy użyciu popup_text.xml układu, w dolnej części układu zakotwiczonego do określonego położenia na mapie.When a feature is clicked, the title property is displayed using the popup_text.xml layout, with the bottom center of the layout anchored to the specified position on the map.

//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 coordinates from the clicked feature and create a position object.
    List<Double> c = ((Point)(f.geometry())).coordinates();
    Position pos = new Position(c.get(0), c.get(1));

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

    //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 coordinates from the clicked feature and create a position object.
    val c: List<Double> = (f.geometry() as Point?).coordinates()
    val pos = Position(c[0], c[1])

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

    //Open the popup.
    popup.open()

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

Na poniższym zrzucie ekranu są wyświetlane wyskakujące okienka, które są wyświetlane, gdy funkcje są klikane i zakotwiczone w określonej lokalizacji na mapie podczas jej przenoszenia.The following screen capture shows popups appearing when features are clicked and staying anchored to their specified location on the map as it moves.

Animacja wyświetlanego okna podręcznego i mapa przeniesiona z menu podręcznego zakotwiczonego do położenia na mapie

Następne krokiNext steps

Aby dodać więcej danych do mapy:To add more data to your map: