kurz: načtení dat typu injson do Azure Maps Android SDK

  • Článek
  • 5 min ke čtení

tento kurz vás provede procesem importu dat umístění geografického souboru json do Azure Maps Android SDK. V tomto kurzu se naučíte:

  • přidejte Azure Maps do aplikace pro Android.
  • Vytvořte zdroj dat a načtěte ho v souboru. JSON z místního souboru nebo webu.
  • Zobrazte data na mapě.
  • Pokud chcete zobrazit jeho podrobnosti, můžete pracovat s daty na mapách.

Požadavky

  1. Dokončete rychlý Start: Vytvoření aplikace pro Android. V tomto kurzu se rozšiřuje kód používaný v tomto rychlém startu.
  2. Stáhněte si ukázkové body důležitého souboru JSON.

Importovat data o nedůležitém formátu JSON ze složky web nebo Assets

Většina souborů. JSON zabalí všechna data v rámci FeatureCollection . V tomto scénáři platí, že pokud jsou soubory injson načteny do aplikace jako řetězec, mohou být předány do statické metody kolekce funkcí fromJson , která způsobí deserializaci řetězce do objektu typu INjson, FeatureCollection který lze přidat do mapy.

Následující kroky ukazují, jak naimportovat soubor. JSON do aplikace a deserializovat ho jako objekt pro použití jako soubor FeatureCollection . JSON.

  1. Dokončete rychlé zprovoznění: Vytvoření aplikace pro Android jako následujících kroků sestavích nad touto aplikací.
  2. Na panelu projekt v Android studiu klikněte pravým tlačítkem na složku aplikace a přejděte na New > Folder > Assets Folder .
  3. Přetáhněte ukázkové body důležitého souboru. JSON do složky assety.
  1. Do souboru MainActivity. Java vložte následující kód do zpětného volání pro mapControl.onReady událost uvnitř onCreate metody. Tento kód načte SamplePoiDataSet.js do souboru ze složky assets do zdroje dat pomocí importDataFromUrl metody a poté jej přidá do mapy.
//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("asset://SamplePoiDataSet.json");

//Add data source to the map.
map.sources.add(source);
  1. Do souboru MainActivity. kt vložte a přidejte následující kód do zpětného volání pro mapControl.onReady událost uvnitř onCreate metody. Tento kód načte SamplePoiDataSet.js do souboru ze složky assets do zdroje dat pomocí importDataFromUrl metody a poté jej přidá do mapy.
//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("asset://SamplePoiDataSet.json");

//Add data source to the map.
map.sources.add(source);
  1. Pomocí kódu načtete zdroj dat pro data o injson. teď je potřeba určit, jak se mají tato data na mapě zobrazovat. K dispozici je několik různých vrstev vykreslování pro data bodů; Nejčastěji používané vrstvy jsou bublinová vrstva, vrstva symbolůa vrstva Heat mapy . Přidejte následující kód, který vykreslí data v bublinové vrstvě ve zpětném volání pro mapControl.onReady událost po kódu pro import dat.
//Create a layer and add it to the map.
BubbleLayer layer = new BubbleLayer(source);
map.layers.add(layer);

//Create a layer and add it to the map.
val layer = new BubbleLayer(source)
map.layers.add(layer)
  1. Na panelu projekt v Android studiu klikněte pravým tlačítkem myši na složku rozložení pod cestou app > res > layout a přejděte na New > File . Vytvořte nový soubor s názvem popup_text.xml.
  2. Otevřete soubor popup_text.xml . Pokud se soubor otevře v zobrazení návrháře, klikněte pravým tlačítkem na obrazovku a vyberte Přejít do XML. Zkopírujte a vložte následující kód XML do tohoto souboru. Tento kód XML vytvoří jednoduché rozložení, které lze použít s automaticky otevírané okno a obsahuje textové zobrazení.
<?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>
  1. Vraťte se zpět do souboru MainActivity. Java a za kód pro bublinovou vrstvu, přidejte následující kód k vytvoření opakovaně použitelného překryvného okna.
//Create a popup and add it to the map.
Popup popup = new Popup();
map.popups.add(popup);

//Close it initially.
popup.close();
  1. Vraťte se zpět do souboru MainActivity. kt a za kód pro bublinovou vrstvu přidejte následující kód pro vytvoření opakovaně použitelného překryvného okna.
//Create a popup and add it to the map.
val popup = Popup()
map.popups.add(popup)

//Close it initially.
popup.close()
  1. Přidejte následující kód pro připojení události Click k bublinové vrstvě. Když se na bublině v bublinové vrstvě klepne, událost se aktivuje a načte některé podrobnosti z vlastností vybrané funkce, vytvoří zobrazení pomocí popup_text.xml souboru rozložení, předáte ho jako obsah do automaticky otevíraného okna a pak se zobrazí automaticky otevírané okno na pozici funkce.
//Add a click event to the layer.
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);

    //Display the name and entity type information of the feature into the text view of the popup layout.
    TextView tv = customView.findViewById(R.id.message);
    tv.setText("%s\n%s",
        f.getStringProperty("Name"),
        f.getStringProperty("EntityType")
    );

    //Get the position of the clicked feature.
    Position pos = MapMath.getPosition((Point)f.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)
    );

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

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

//Add a click event to the layer.
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)

    //Display the name and entity type information of the feature into the text view of the popup layout.
    val tv = customView.findViewById<TextView>(R.id.message)
    tv.text = String.format(
        "%s\n%s",
        f.getStringProperty("Name"),
        f.getStringProperty("EntityType")
    )

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

    //Open the popup.
    popup.open()

    //Return a boolean indicating if event should be consumed or continue to bubble up.
    false
} as OnFeatureClick, layer)

  1. Spusťte aplikaci. Pro každé umístění v souboru geografických JSON se zobrazí mapa s překrytými bublinami. Klepnutím na libovolný bublinu se zobrazí automaticky otevírané okno s názvem a typem entity, které je u této funkce dotyková.

    Mapování dat ze souboru geografického formátu JSON zobrazeného automaticky otevírané okno při klepnutí na místo

Vyčištění prostředků

K vyčištění prostředků z tohoto kurzu proveďte následující kroky:

  1. Zavřete Android Studio a odstraňte aplikaci, kterou jste vytvořili.
  2. Pokud jste aplikaci otestovali na externím zařízení, odinstalujte ji z tohoto zařízení.

Další kroky

Další příklady kódu a prostředí pro interaktivní psaní kódu:

Použití výrazů pro styly založené na datech

Zobrazení informací o funkci

Přidání vrstvy symbolů

Přidání řádkové vrstvy

Přidání mnohoúhelníkové vrstvy