Een bellenlaag toevoegen aan een kaart (Android SDK)

  • Artikel
  • 2 minuten om te lezen

In dit artikel wordt beschreven hoe u puntgegevens uit een gegevensbron kunt weergeven als een bellenlaag op een kaart. Bellenlagen geven punten weer als cirkels op de kaart met een vaste pixel radius.

Tip

Bellenlagen geven standaard de coördinaten van alle geometrieën in een gegevensbron weer. Als u de laag wilt beperken zodat alleen puntgeometriefuncties worden weergegeven, stelt u de filter optie van de laag in op eq(geometryType(), "Point") . Als u ook MultiPoint-functies wilt opnemen, stelt u de filter optie van de laag in op any(eq(geometryType(), "Point"), eq(geometryType(), "MultiPoint")) .

Vereisten

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

Een bubbellaag toevoegen

Met de volgende code wordt een matrix met punten in een gegevensbron geladen. Vervolgens worden de gegevenspunten verbonden met een bellenlaag. De bellenlaag geeft de straal van elke bel weer met vijf pixels en een opvulkleur van wit. En een lijnkleur van blauw en een lijndikte van zes pixels.

//Create a data source and add it to the map.
DataSource source = new DataSource();
map.sources.add(source);

//Create point locations.
Point[] points = new Point[] {
    Point.fromLngLat(-73.985708, 40.75773),
    Point.fromLngLat(-73.985600, 40.76542),
    Point.fromLngLat(-73.985550, 40.77900),
    Point.fromLngLat(-73.975550, 40.74859),
    Point.fromLngLat(-73.968900, 40.78859)
};

//Add multiple points to the data source.
source.add(points);

//Create a bubble layer to render the filled in area of the circle, and add it to the map.
BubbleLayer layer = new BubbleLayer(source, 
    bubbleRadius(5f),
    bubbleColor("white"),
    bubbleStrokeColor("#4288f7"),
    bubbleStrokeWidth(6f)
);

map.layers.add(layer);

//Create a data source and add it to the map.
val source = DataSource()
map.sources.add(source)

//Create point locations.
val points: Array<Point> = arrayOf<Point>(
    Point.fromLngLat(-73.985708, 40.75773),
    Point.fromLngLat(-73.985600, 40.76542),
    Point.fromLngLat(-73.985550, 40.77900),
    Point.fromLngLat(-73.975550, 40.74859),
    Point.fromLngLat(-73.968900, 40.78859)
)

//Add multiple points to the data source.
source.add(points)

//Create a bubble layer to render the filled in area of the circle, and add it to the map.
val layer = BubbleLayer(
    source,
    bubbleRadius(5f),
    bubbleColor("white"),
    bubbleStrokeColor("#4288f7"),
    bubbleStrokeWidth(6f)
)

map.layers.add(layer)

In de volgende schermopname ziet u dat de bovenstaande code punten wekt in een bellenlaag.

Kaart met punten die worden weergegeven met behulp van bellenlaag

Labels met een bellenlaag tonen

Deze code laat zien hoe u een bellenlaag gebruikt om een punt op de kaart weer te geven. En hoe u een symboollaag gebruikt om een label weer te geven. Als u het pictogram van de symboollaag wilt verbergen, stelt u de iconImage optie in op "none" .

//Create a data source and add it to the map.
DataSource source = new DataSource();
map.sources.add(source);

//Add a data point to the map.
source.add(Point.fromLngLat(-122.336641,47.627631));

//Add a bubble layer.
map.layers.add(new BubbleLayer(source,
    bubbleRadius(5f),
    bubbleColor("white"),
    bubbleStrokeColor("#4288f7"),
    bubbleStrokeWidth(6f)
));

//Add a symbol layer to display text, hide the icon image.
map.layers.add(new SymbolLayer(source,
    //Hide the icon image.
    iconImage("none"),
    textField("Museum of History & Industry (MOHAI)"),
    textColor("#005995"),
    textOffset(new Float[]{0f, -2.2f})
));

//Create a data source and add it to the map.
val source = DataSource()
map.sources.add(source)

//Add a data point to the map.
source.add(Point.fromLngLat(-122.336641, 47.627631))

//Add a bubble layer.
map.layers.add(
    BubbleLayer(
        source,
        bubbleRadius(5f),
        bubbleColor("white"),
        bubbleStrokeColor("#4288f7"),
        bubbleStrokeWidth(6f)
    )
)

//Add a symbol layer to display text, hide the icon image.
map.layers.add(
    SymbolLayer(
        source,  //Hide the icon image.
        iconImage("none"),
        textField("Museum of History & Industry (MOHAI)"),
        textColor("#005995"),
        textOffset(arrayOf(0f, -2.2f))
    )
)

In de volgende schermafbeelding ziet u de bovenstaande code die een punt we weergeven in een bellenlaag en een tekstlabel voor het punt met een symboollaag.

Kaart met punt dat wordt weergegeven met behulp van een bellenlaag en een tekstlabel met symboollaag

Volgende stappen

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

Een gegevensbron maken

Puntgegevens clusteren

Een symboollaag toevoegen

Gegevensgestuurde stijlexpressies gebruiken

Functie-informatie weergeven