Een symboollaag toevoegen (Android SDK)

In dit artikel wordt beschreven hoe u puntgegevens uit een gegevensbron kunt weergeven als een symboollaag op een kaart met behulp van de Azure Kaarten Android SDK. Symboollagen geven punten weer als een afbeelding en tekst op de kaart.

Vereisten

Zorg ervoor dat u de stappen in het document Quickstart: Een Android-app maken voltooit. Codeblokken in dit artikel kunnen worden ingevoegd in de onReady gebeurtenis-handler voor kaarten.

Een symboollaag toevoegen

Voordat u een symboollaag aan de kaart kunt toevoegen, moet u een aantal stappen ondernemen. Maak eerst een gegevensbron en voeg deze toe aan de kaart. Maak een symboollaag. Geef vervolgens de gegevensbron door aan de symboollaag om de gegevens op te halen uit de gegevensbron. Voeg ten slotte gegevens toe aan de gegevensbron, zodat er iets moet worden weergegeven.

De onderstaande code laat zien wat er aan de kaart moet worden toegevoegd nadat deze is geladen. In dit voorbeeld wordt één punt op de kaart weergegeven met behulp van een symboollaag.

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

Er zijn drie verschillende soorten puntgegevens die aan de kaart kunnen worden toegevoegd:

• GeoJSON-puntgeometrie: dit object bevat alleen een coördinaat van een punt en niets anders. De Point.fromLngLat statische methode kan worden gebruikt om deze objecten eenvoudig te maken.
• GeoJSON MultiPoint-geometrie: dit object bevat de coördinaten van meerdere punten en niets anders. Geef een matrix van punten door aan de MultiPoint klasse om deze objecten te maken.
• GeoJSON-functie: dit object bestaat uit een GeoJSON-geometrie en een set eigenschappen die metagegevens bevatten die zijn gekoppeld aan de geometrie.

Zie het document Een gegevensbron maken over het maken en toevoegen van gegevens aan de kaart voor meer informatie.

In het volgende codevoorbeeld wordt een geoJSON-puntgeometrie gemaakt en aan de GeoJSON-functie gegeven. Er wordt een waarde toegevoegd title aan de eigenschappen ervan. De title eigenschap wordt weergegeven als tekst boven het symboolpictogram op de kaart.

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

In de volgende schermopname ziet u de bovenstaande code die een puntfunctie we weergeven met behulp van een pictogram en tekstlabel met een symboollaag.

<a name="add-a-custom-icon-to-a-symbol-layer">Een aangepast pictogram toevoegen aan een symboollaag

Symboollagen worden weergegeven met WebGL. Alle resources, zoals pictogramafbeeldingen, moeten dus worden geladen in de WebGL-context. In dit voorbeeld ziet u hoe u een aangepast pictogram toevoegt aan de kaartresources. Dit pictogram wordt vervolgens gebruikt om puntgegevens weer te geven met een aangepast symbool op de kaart. Voor textField de eigenschap van de symboollaag moet een expressie worden opgegeven. In dit geval willen we de eigenschap temperatuur renderen. Omdat temperatuur een getal is, moet deze worden geconverteerd naar een tekenreeks. Daarnaast willen we er '°F' aan appen. Een expressie kan worden gebruikt voor deze samenvoeging; 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))
)

Voor dit voorbeeld wordt de volgende afbeelding geladen in de drawable-map van de app.

showers.png

In de volgende schermopname ziet u de bovenstaande code die een puntfunctie we weergeven met behulp van een aangepast pictogram en een opgemaakt tekstlabel met een symboollaag.

Symboolkleuren wijzigen

De Azure Kaarten Android SDK wordt geleverd met een set vooraf gedefinieerde kleurvariaties van het standaardmarkeringspictogram. Kan bijvoorbeeld worden doorgegeven aan de optie van een symboollaag om een rode versie van het markeringspictogram in die marker-red iconImage laag weer te geven.

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

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

In de onderstaande tabel staan alle ingebouwde pictogramafbeeldingsnamen die beschikbaar zijn. Al deze markeringen halen de kleuren op uit kleurresources die u kunt overschrijven. Naast het overschrijven van de hoofdkleur van deze markering. Het overschrijven van de kleur van een van deze markeringen is echter van toepassing op alle lagen die gebruikmaken van die pictogramafbeelding.

U kunt ook de randkleur van alle markeringen overschrijven met behulp van de azure_maps_marker_border resourcenaam van de kleur. De kleuren van deze markeringen kunnen worden overschrijven door een kleur met dezelfde naam toe te voegen in het colors.xml bestand van uw app. Met het volgende bestand wordt colors.xml de standaardmarkeringskleur bijvoorbeeld heldergroen.

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

De volgende code is een gewijzigde versie van de standaardmarkeringsvector-XML die u kunt wijzigen om aangepaste versies van de standaardmarkering te maken. De gewijzigde versie kan worden toegevoegd aan de map van uw app en worden toegevoegd aan de sprite van de kaartafbeelding met behulp van en vervolgens worden gebruikt drawable map.images.add met een symboollaag.

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

Volgende stappen

Zie de volgende artikelen voor meer codevoorbeelden die u aan uw kaarten kunt toevoegen: