iOS SDK의 지도에 다각형 계층 추가(미리 보기)

아티클
04/13/2024

이 문서에서는 다각형 계층을 사용하여 맵에 Polygon 및 MultiPolygon 기능 기하 도형의 영역을 렌더링하는 방법을 보여 줍니다.

참고 항목

Azure Maps iOS SDK 사용 중지

이제 iOS용 Azure Maps 네이티브 SDK는 더 이상 사용되지 않으며 2025년 3월 31일에 사용 중지됩니다. 서비스 중단을 방지하려면 2025년 3월 31일까지 Azure Maps 웹 SDK로 마이그레이션하세요. 자세한 내용은 Azure Maps 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)
]))

다음 스크린샷은 선 계층을 사용하여 렌더링된 윤곽선으로 다각형을 렌더링하는 위의 코드를 보여줍니다.

팁

선 계층을 사용하여 다각형의 윤곽선을 만들 때 각 지점 배열의 시작점과 끝점이 같도록 다각형의 모든 링을 닫아야 합니다. 이렇게 하지 않으면 선 계층이 다각형의 마지막 지점을 첫 번째 지점에 연결하지 못할 수 있습니다.

패턴을 사용하여 다각형 채우기

색을 사용한 다각형 채우기 외에도 이미지 패턴을 사용하여 다각형을 채울 수 있습니다. 이미지 패턴을 맵 이미지 스프라이트 리소스에 로드한 다음 다각형 계층의 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"
)

이 샘플의 경우 다음 이미지가 앱의 자산 폴더에 로드됩니다.


`fill-checker-red.png`

다음은 맵에 채우기 패턴이 있는 다각형을 렌더링하는 위 코드의 스크린샷입니다.

추가 정보

맵에 추가할 더 많은 코드 예제를 보려면 다음 문서를 참조하세요.

다음을 통해 공유