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ı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.
Sonraki adımlar
Haritalarınıza eklenecek daha fazla kod örneği için aşağıdaki makalelere bakın: