在 iOS SDK 中將多邊形圖層新增至地圖 （預覽）

本文說明如何使用多邊形圖層，在地圖上呈現 Polygon 和 MultiPolygon 特徵幾何的區域。

注意

Azure 地圖服務 iOS SDK 淘汰

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

必要條件

請務必完成快速入門：建立 iOS 應用程式文件中的步驟。 本文中的程式碼區塊可以插入 ViewController 的 viewDidLoad 函式中。

使用多邊形圖層

當多邊形圖層連線至資料來源並載入至地圖時，將會呈現具有 Polygon 和 MultiPolygon 特徵的區域。 若要建立多邊形，請將它新增至數據源，並使用 類別以多邊形圖層 PolygonLayer 呈現。

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

// Create a rectangular polygon.
source.add(geometry: Polygon([
    CLLocationCoordinate2D(latitude: 40.76799, longitude: -73.98235),
    CLLocationCoordinate2D(latitude: 40.80044, longitude: -73.95785),
    CLLocationCoordinate2D(latitude: 40.79680, longitude: -73.94928),
    CLLocationCoordinate2D(latitude: 40.76437, longitude: -73.97317),
    CLLocationCoordinate2D(latitude: 40.76799, longitude: -73.98235)
]))

// Create and add a polygon layer to render the polygon on the map, below the label layer.
map.layers.insertLayer(
    PolygonLayer(source: source, options: [
        .fillColor(.red),
        .fillOpacity(0.7)
    ]),
    below: "labels"
)

下列螢幕快照顯示上述程序代碼，使用多邊形圖層呈現多邊形的區域。

同時使用多邊形和線條圖層

線條圖層可用來呈現多邊形的外框。 下列程式碼範例會呈現如同上述範例的多邊形，但現在會新增線條圖層。 此條線圖層是連線至資料來源的第二個圖層。

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

// Create a rectangular polygon.
source.add(geometry: Polygon([
    CLLocationCoordinate2D(latitude: 40.76799, longitude: -73.98235),
    CLLocationCoordinate2D(latitude: 40.80044, longitude: -73.95785),
    CLLocationCoordinate2D(latitude: 40.79680, longitude: -73.94928),
    CLLocationCoordinate2D(latitude: 40.76437, longitude: -73.97317),
    CLLocationCoordinate2D(latitude: 40.76799, longitude: -73.98235)
]))

// Create and add a polygon layer to render the polygon on the map, below the label layer.
map.layers.insertLayer(
    PolygonLayer(source: source, options: [
        .fillColor(UIColor(red: 0, green: 0.78, blue: 0.78, alpha: 0.5))
    ]),
    below: "labels"
)

// Create and add a line layer to render the outline of the polygon.
map.layers.addLayer(LineLayer(source: source, options: [
    .strokeColor(.red),
    .strokeWidth(2)
]))

下列螢幕快照顯示上述程序代碼，其外框使用線條圖層呈現多邊形。

提示

使用線條圖層大綱多邊形時，請務必關閉多邊形中的所有環形，讓每個點陣列具有相同的起點和終點。 如果未這麼做，線條圖層可能不會將多邊形的最後一個點連接到第一個點。

使用圖樣填滿多邊形

除了以色彩填滿多邊形以外，您還可以使用影像圖樣來填滿多邊形。 將影像模式載入地圖影像 Sprite 資源，然後使用多邊形圖層的選項來參考此影像 fillPattern 。

// Load an image pattern into the map image sprite.
map.images.add(UIImage(named: "fill-checker-red")!, withID: "fill-checker-red")

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

// Create a polygon.
source.add(geometry: Polygon([
    CLLocationCoordinate2D(latitude: -20, longitude: -50),
    CLLocationCoordinate2D(latitude: 40, longitude: 0),
    CLLocationCoordinate2D(latitude: -20, longitude: 50),
    CLLocationCoordinate2D(latitude: -20, longitude: -50)
]))

// Create and add a polygon layer to render the polygon on the map, below the label layer.
map.layers.insertLayer(
    PolygonLayer(source: source, options: [
        .fillPattern("fill-checker-red"),
        .fillOpacity(0.5)
    ]),
    below: "labels"
)

在此範例中，下列影像已載入應用程式的 assets 資料夾。

fill-checker-red.png

以下是上述程式代碼的螢幕快照，其中呈現地圖上具有填滿圖樣的多邊形。

其他資訊

請參閱下列文章，以取得更多可新增至地圖的程式碼範例：

• 建立資料來源
• 使用資料驅動樣式運算式
• 新增線條圖層
• 新增多邊形立體化圖層