Lägga till ett symbollager (Android SDK)

Den här artikeln visar hur du återger punktdata från en datakälla som ett symbolskikt på en karta med hjälp av Azure Kartor Android SDK. Symbolskikt renderar punkter som en bild och text på kartan.

Förutsättningar

Se till att slutföra stegen i dokumentet Snabbstart: Skapa en Android-app. Kodblock i den här artikeln kan infogas i onReady händelsehanteraren maps.

Lägga till ett symbolskikt

Innan du kan lägga till ett symbolskikt på kartan måste du vidta några steg. Skapa först en datakälla och lägg till den på kartan. Skapa ett symbolskikt. Skicka sedan in datakällan till symbollagret för att hämta data från datakällan. Slutligen lägger du till data i datakällan så att det finns något som ska återges.

Koden nedan visar vad som ska läggas till på kartan när den har lästs in. Det här exemplet renderar en enda punkt på kartan med hjälp av ett symbolskikt.

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

Det finns tre olika typer av punktdata som kan läggas till på kartan:

• GeoJSON-punktgeometri – Det här objektet innehåller bara en koordinat för en punkt och inget annat. Den Point.fromLngLat statiska metoden kan användas för att enkelt skapa dessa objekt.
• GeoJSON MultiPoint-geometri – Det här objektet innehåller koordinaterna för flera punkter och inget annat. Skicka en matris med punkter till klassen MultiPoint för att skapa dessa objekt.
• GeoJSON-funktion – Det här objektet består av en GeoJSON-geometri och en uppsättning egenskaper som innehåller metadata som är associerade med geometrin.

Mer information finns i dokumentet Skapa en datakälla om hur du skapar och lägger till data på kartan.

Följande kodexempel skapar en GeoJSON-punktgeometri och skickar den till GeoJSON-funktionen och har ett title värde tillagt i dess egenskaper. Egenskapen title visas som text ovanför symbolikonen på kartan.

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

Följande skärmbild visar koden ovan som återger en punktfunktion med hjälp av en ikon och textetikett med ett symbolskikt.

<a name="add-a-custom-icon-to-a-symbol-layer">Lägga till en anpassad ikon i ett symbolskikt

Symbolskikt renderas med WebGL. Därför måste alla resurser, till exempel ikonbilder, läsas in i WebGL-kontexten. Det här exemplet visar hur du lägger till en anpassad ikon till kartresurserna. Den här ikonen används sedan för att återge punktdata med en anpassad symbol på kartan. Egenskapen textField för symbollagret kräver att ett uttryck anges. I det här fallet vill vi återge temperaturegenskapen. Eftersom temperatur är ett tal måste det konverteras till en sträng. Dessutom vill vi lägga till "°F" i den. Ett uttryck kan användas för att göra den här sammanfogningen. 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))
)

I det här exemplet läses följande bild in i appens drawable-mapp.

showers.png

Följande skärmbild visar koden ovan som återger en punktfunktion med hjälp av en anpassad ikon och formaterad textetikett med ett symbolskikt.

Ändra symbolfärger

Azure Kartor Android SDK levereras med en uppsättning fördefinierade färgvariationer av standardmarkörikonen. Kan till marker-red exempel skickas till alternativet för ett iconImage symbolskikt för att rendera en röd version av markörikonen i det lagret.

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

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

I tabellen nedan visas alla inbyggda ikonavbildningsnamn som är tillgängliga. Alla dessa markörer hämtar sina färger från färgresurser som du kan åsidosätta. Förutom att åsidosätta den huvudsakliga fyllningsfärgen för den här markören. Men om du åsidosätter färgen på en av dessa markörer gäller det för alla lager som använder den ikonbilden.

Du kan också åsidosätta kantlinjefärgen för alla markörer med hjälp av azure_maps_marker_border färgresursnamnet. Färgerna på dessa markörer kan åsidosättas genom att lägga till en färg med samma namn colors.xml i filen för din app. Följande fil skulle till colors.xml exempel göra standardmarkörsfärgen klargrön.

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

Följande kod är en modifierad version av standardmarkörvektor-XML som du kan ändra för att skapa anpassade versioner av standardmarkören. Den ändrade versionen kan läggas till i mappen i appen och läggas till i kartbilden med , och drawable sedan användas med ett map.images.add symbolskikt.

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

Nästa steg

I följande artiklar finns fler kodexempel att lägga till i dina kartor: