Aggiungere un livello simbolo a una mappa (Android SDK)

Questo articolo descrive come eseguire il rendering di un punto dati da un'origine dati come livello simbolo in una mappa tramite Android SKD di Mappe di Azure. I livelli simbolo eseguono il rendering dei punti come immagine e testo sulla mappa.

Prerequisiti

Assicurarsi di completare la procedura descritta nel documento Guida introduttiva: creare un’app Android. È possibile inserire i blocchi di codice indicati in questo articolo nel gestore eventi onReady delle mappe.

Aggiungere un livello per i simboli

Prima di aggiungere un livello simbolo alla mappa, è necessario eseguire un paio di passaggi. Creare prima di tutto un'origine dati e aggiungerla alla mappa. Creare un livello simbolo. Passare quindi l'origine dati al livello simbolo per recuperare i dati dall'origine dati. Aggiungere infine i dati all'origine dati, in modo che sia disponibile un elemento su cui eseguire il rendering.

Il codice seguente mostra cosa aggiungere alla mappa dopo il caricamento. Questo esempio esegue il rendering di un singolo punto sulla mappa usando un livello simbolo.

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

È possibile aggiungere tre tipi diversi di dati dei punti alla mappa:

• Geometria Point GeoJSON: questo oggetto contiene solo una coordinata di un punto e nient'altro. È possibile usare il metodo statico Point.fromLngLat per creare facilmente questi oggetti.
• Geometria MultiPoint GeoJSON: questo oggetto contiene le coordinate di più punti e nient'altro. Per creare questi oggetti, è sufficiente passare una matrice di punti nella classe MultiPoint.
• Funzionalità GeoJSON: questo oggetto è costituito da qualsiasi geometria GeoJSON e da un set di proprietà che contengono metadati associati alla geometria.

Per altre informazioni, vedere il documento Creare un'origine dati relativo alla creazione e all'aggiunta di dati alla mappa.

L'esempio di codice seguente crea una geometria Point GeoJSON, la passa alla funzionalità GeoJSON e ha un valore title aggiunto alle relative proprietà. La proprietà title viene visualizzata come testo sopra l'icona del simbolo sulla mappa.

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

Lo screenshot seguente mostra come il codice precedente consenta di eseguire il rendering di una funzionalità punto a livello bolla e di un’etichetta di testo per il punto con un livello simbolo.

Aggiungere un'icona personalizzata a un livello simbolo

Il rendering dei livelli simbolo viene eseguito tramite WebGL. Di conseguenza tutte le risorse, ad esempio le immagini icona, devono essere caricate nel contesto di WebGL. Questo esempio mostra come aggiungere un'icona personalizzata alle risorse della mappa. Questa icona viene quindi usata per eseguire il rendering dei dati dei punti con un simbolo personalizzato sulla mappa. La proprietà textField del livello simbolo richiede che venga specificata un'espressione. In questo caso, si vuole eseguire il rendering della proprietà ‘temperature’. Poiché la temperatura è un numero, è necessario convertirla in una stringa. Inoltre, si vuole aggiungere "°F" a tale stringa. È possibile usare un'espressione per eseguire questa concatenazione; 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))
)

In questo esempio, l’immagine seguente è stata caricata nella cartella drawable dell’app.

showers.png

Lo screenshot seguente mostra come il codice precedente consenta di eseguire il rendering di una funzionalità punto a livello bolla e di un’etichetta di testo per il punto a un livello simbolo.

Modificare i colori dei simboli

Android SDK di Mappe di Azure include un set di varianti di colore predefinite per l’icona dell’indicatore predefinito. Ad esempio, è possibile passare marker-red all'opzione iconImage di un livello simbolo per eseguire il rendering di una versione rossa dell'icona dell’indicatore in tale livello.

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

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

La tabella seguente elenca tutti i nomi predefiniti delle immagini delle icone disponibili. Questi indicatori estraggono i colori dalle risorse colore che possono essere sostituite. Tuttavia, la sostituzione del colore di uno di questi indicatori si applica a tutti i livelli che usano l'immagine dell'icona.

È anche possibile sostituire il colore del bordo di tutti gli indicatori usando il nome della risorsa colore azure_maps_marker_border. I colori di questi indicatori possono essere sostituiti aggiungendo un colore con lo stesso nome nel file colors.xml dell'app. Ad esempio, il file colors.xml seguente imposta il verde brillante come colore dell’indicatore predefinito.

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

Il codice seguente è una versione modificata del codice XML del vettore dell’indicatore predefinito che è possibile modificare per creare versioni personalizzate dell’indicatore predefinito. È possibile aggiungere la versione modificata alla cartella drawable dell'app, aggiungerla allo sprite dell'immagine delle mappe usando map.images.add e quindi usarla con un livello simbolo.

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

Passaggi successivi

Per altri esempi di codice da aggiungere alle mappe, vedere gli articoli seguenti: