將泡泡層次新增至地圖（Android SDK）

發行項
04/07/2024

本文說明如何將數據源中的點數據轉譯為地圖上的泡泡圖層。泡泡圖層會將點轉譯為具有固定圖元半徑的地圖上的圓形。

注意

Azure 地圖服務 Android SDK 淘汰

適用於 Android 的 Azure 地圖服務原生 SDK 現在已被取代，將於 3/31/25 淘汰。若要避免服務中斷，請透過 3/31/25 移轉至 Azure 地圖服務 Web SDK。如需詳細資訊，請參閱 Azure 地圖服務 Android SDK 移轉指南。

提示

泡泡圖層預設會呈現數據源中所有幾何的座標。若要限制圖層，使其只轉譯點幾何特徵，請將圖層的 filter 選項設為 eq(geometryType(), "Point")。如果還要加上 MultiPoint 特徵，請將圖層的 filter 選項設定為 any(eq(geometryType(), "Point"), eq(geometryType(), "MultiPoint"))。

必要條件

完成快速入門：建立Android應用程式文章中的步驟。本文中的程式碼區塊可以插入地圖 onReady 事件處理常式中。

新增泡泡圖層

下列程式代碼會將點數位件載入資料源。然後，它會將數據點連接到泡泡圖層。泡泡圖層會以五個像素和白色填滿色彩呈現每個泡泡的半徑。而且，藍色的筆劃色彩，以及 6 像素的筆劃寬度。

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

下列螢幕快照顯示上述程序代碼會在泡泡圖層中呈現點。

使用泡泡圖層呈現的點對應

顯示具有泡泡圖層的標籤

此程式代碼會示範如何使用泡泡圖層來呈現地圖上的點。而且，如何使用符號圖層來轉譯標籤。若要隱藏符號圖層的圖示，請將選項設定 iconImage 為 "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))
    )
)

下列螢幕快照顯示上述程式代碼呈現泡泡圖層中的點，以及具有符號圖層之點的文字標籤。

使用泡泡圖層和具有符號圖層的文字標籤來呈現點的對應