Haritaya kabarcık katmanı ekleme (Android SDK)

Bu makalede, bir veri kaynağındaki nokta verilerini harita üzerinde kabarcık katmanı olarak işleme gösterilmektedir. Kabarcık katmanları, noktaları sabit bir piksel yarıçapı ile harita üzerinde daire olarak işler.

Not

Android SDK'sı kullanımdan kaldırılmasını Azure Haritalar

Android için Azure Haritalar Yerel SDK artık kullanım dışıdır ve 31/3/25 tarihinde kullanımdan kaldırılacaktır. Hizmet kesintilerini önlemek için 31.03.25'e kadar Azure Haritalar Web SDK'sına geçin. Daha fazla bilgi için bkz. Android SDK geçiş kılavuzu Azure Haritalar.

İpucu

Kabarcık katmanları varsayılan olarak veri kaynağındaki tüm geometrilerin koordinatlarını işler. Katmanı yalnızca nokta geometrisi özelliklerini işleyebilecek şekilde sınırlandırmak için katmanın filter seçeneğini olarak eq(geometryType(), "Point")ayarlayın. MultiPoint özelliklerini de eklemek istiyorsanız, katmanın filter seçeneğini olarak any(eq(geometryType(), "Point"), eq(geometryType(), "MultiPoint"))ayarlayın.

Önkoşullar

Hızlı Başlangıç: Android uygulaması oluşturma makalesindeki adımları tamamlayın. Bu makaledeki kod blokları haritalar onReady olay işleyicisine eklenebilir.

Baloncuk katmanı ekleme

Aşağıdaki kod bir veri kaynağına bir nokta dizisi yükler. Ardından veri noktalarını bir kabarcık katmanına bağlar. Kabarcık katmanı, her kabarcığın yarıçapını beş piksel ve beyaz dolgu rengiyle işler. Ayrıca, mavi bir vuruş rengi ve altı piksellik bir vuruş genişliği.

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

Aşağıdaki ekran görüntüsünde yukarıdaki kod noktaları bir kabarcık katmanında işler.

Kabarcık katmanı kullanılarak işlenen noktalarla eşleme

Kabarcık katmanıyla etiketleri gösterme

Bu kod, haritada bir noktayı işlemek için kabarcık katmanının nasıl kullanılacağını gösterir. Ayrıca, bir etiketi işlemek için sembol katmanını kullanma. Simge katmanının simgesini gizlemek için seçeneğini olarak "none"ayarlayıniconImage.

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

Aşağıdaki ekran görüntüsünde yukarıdaki kodun kabarcık katmanındaki bir noktayı işlemesi ve nokta için sembol katmanı içeren bir metin etiketi gösterilmektedir.

Kabarcık katmanı ve sembol katmanı içeren bir metin etiketi kullanılarak işlenen nokta ile eşleme

Sonraki adımlar

Haritalarınıza eklenecek daha fazla kod örneği için aşağıdaki makalelere bakın: