다음을 통해 공유

래스터 지도에 사용자 지정 데이터 렌더링

  • 아티클

이 문서에서는 이미지 컴퍼지션 기능과 함께 Get Map Static Image 명령을 사용하는 방법을 설명합니다. 이미지 컴퍼지션 기능은 사용자 지정 데이터 및 다양한 스타일이 포함된 정적 래스터 타일의 검색을 지원합니다.

사용자 지정 데이터의 예는 다음과 같습니다.

  • 사용자 지정 압핀
  • 레이블
  • 기하 도형 오버레이

팁

웹 페이지에 간단한 맵을 표시하려면 정적 이미지 서비스를 사용하는 것보다 Azure Maps 웹 SDK를 사용하는 것이 더 비용 효율적인 경우가 많습니다. Web SDK는 맵 타일을 사용하고 사용자가 맵을 이동 및 확대/축소하는 경우가 아니면 브라우저 캐싱을 사용하여 맵 부하당 트랜잭션의 일부만 생성합니다. Azure Maps 웹 SDK에는 확대/축소를 사용하지 않도록 설정하는 옵션이 있습니다. 또한 Azure Maps 웹 SDK는 정적 맵 웹 서비스보다 훨씬 더 풍부한 데이터 시각화 옵션을 제공합니다.

필수 조건

Important

URL 예에서 {Your-Azure-Maps-Subscription-key}를 Azure Maps 구독 키로 바꿉니다.

이 문서에서는 Bruno 애플리케이션을 사용하지만 다른 API 개발 환경을 선택할 수도 있습니다.

참고 항목

이 문서의 예제에는 Gen2 가격 책정 계층의 Azure Maps 계정이 필요합니다.

Azure Maps Gen1 가격 책정 계층 사용 중지

Gen1 가격 책정 계층은 이제 더 이상 사용되지 않으며 26/9/15에 사용 중지됩니다. Gen2 가격 책정 계층은 Gen1(S0 및 S1 모두) 가격 책정 계층을 대체합니다. Azure Maps 계정에 Gen1 가격 책정 계층이 선택된 경우 사용 중지되기 전에 Gen2 가격 책정으로 전환할 수 있습니다. 그렇지 않으면 자동으로 업데이트됩니다. 자세한 내용은 Azure Maps 계정의 가격 책정 계층 관리를 참조하세요.

사용자 지정 핀과 레이블을 사용하여 정적 이미지 가져오기

사용자 지정 핀과 레이블을 사용하여 정적 이미지를 가져오려면 다음을 수행합니다.

  1. Bruno 앱에서 새 요청을 선택합니다.

  2. 형식을 HTTP로 설정합니다.

  3. 요청에 대한 이름(예: Get Map Static Image)을 입력합니다.

  4. GET HTTP URL 메서드를 선택합니다.

  5. 다음 URL을 입력합니다.

    https://atlas.microsoft.com/map/static?subscription-key={Your-Azure-Maps-Subscription-key}&zoom=13&tilesetId=microsoft.base.road&api-version=2024-04-01&language=en-us&center=-73.964085, 40.78477&path=lcFF0000|lw2|la0.60|ra700||-122.13230609893799 47.64599069048016&pins=custom%7Cla15+50%7Cls12%7Clc003b61%7C%7C%27Central Park%27-73.9657974+40.781971%7C%7Chttps%3A%2F%2Fsamples.azuremaps.com%2Fimages%2Ficons%2Fylw-pushpin.png

  6. 만들기를 실행합니다.

  7. 요청 URL 오른쪽에 표시되는 요청 보내기 화살표를 선택합니다.

    다음 이미지가 반환됩니다.

    레이블이 있는 사용자 지정 압핀.

색과 불투명도를 사용하여 다각형 렌더링

경로 매개 변수와 스타일 한정자를 사용하여 다각형의 모양을 수정할 수 있습니다.

색과 불투명도를 사용하여 다각형을 렌더링하려면 다음을 수행합니다.

  1. Bruno 앱에서 새 요청을 선택합니다.

  2. 형식을 HTTP로 설정합니다.

  3. 요청에 대한 이름(예: GET 다각형)을 입력합니다.

  4. GET HTTP URL 메서드를 선택합니다.

  5. Render Service에 다음 URL을 입력합니다.

    https://atlas.microsoft.com/map/static?subscription-key={Your-Azure-Maps-Subscription-key}&zoom=15&tilesetId=microsoft.base.road&api-version=2024-04-01&language=en-us&path=lc0000FF|fc0000FF|lw3|la0.80|fa0.50||-74.03995513916016 40.70090237454063|-74.04082417488098 40.70028420372218|-74.04113531112671 40.70049568385827|-74.04298067092896 40.69899904076542|-74.04271245002747 40.69879568992435|-74.04367804527283 40.6980961582905|-74.04364585876465 40.698055487620714|-74.04368877410889 40.698022951066996|-74.04168248176573 40.696444909137|-74.03901100158691 40.69837271818651|-74.03824925422668 40.69837271818651|-74.03809905052185 40.69903971085914|-74.03771281242369 40.699340668780984|-74.03940796852112 40.70058515602143|-74.03948307037354 40.70052821920425|-74.03995513916016 40.70090237454063&pins=custom%7Cla15+50%7Cls12%7Clc003b61%7C%7C%27Central Park%27-73.9657974+40.781971%7C%7Chttps%3A%2F%2Fsamples.azuremaps.com%2Fimages%2Ficons%2Fylw-pushpin.png&center=-74.040701, 40.698666&height=500&Width=500

    다음 이미지가 반환됩니다.

    불투명 다각형 렌더링.

사용자 지정 레이블을 사용하여 원 및 압정 렌더링

스타일 한정자를 추가하여 핀의 모양을 수정할 수 있습니다. 예를 들어, 압정 및 해당 레이블을 더 크거나 작게 만들려면 sc "스케일 스타일" 한정자를 사용합니다. 이 한정자는 0보다 큰 값을 사용합니다. 값 1이 표준 배율입니다. 값이 1보다 크면 핀이 확대되고, 값이 1보다 작으면 축소됩니다. 스타일 한정자에 대한 자세한 내용은 Get Map Static Image 명령의 Path 매개 변수를 참조하세요.

사용자 지정 레이블을 사용하여 원과 압핀을 렌더링하려면 다음을 수행합니다.

  1. Bruno 앱에서 새 요청을 선택합니다.

  2. 형식을 HTTP로 설정합니다.

  3. 요청에 대한 이름(예: GET 다각형)을 입력합니다.

  4. GET HTTP URL 메서드를 선택합니다.

  5. Render Service에 다음 URL을 입력합니다.

    https://atlas.microsoft.com/map/static?subscription-key={Your-Azure-Maps-Subscription-key}&zoom=14&tilesetId=microsoft.base.road&api-version=2024-04-01&language=en-us&center=-122.13230609893799,47.64599069048016&path=lcFF0000|lw2|la0.60|ra1000||-122.13230609893799 47.64599069048016&pins=default|la15+50|sc1|al0.66|lc003C62|co002D62||'Microsoft Corporate Headquarters'-122.14131832122801 47.64690503939462|'Microsoft Visitor Center'-122.136828 47.642224|'Microsoft Conference Center'-122.12552547454833 47.642940335653996|'Microsoft The Commons'-122.13687658309935 47.64452336193245&height=700&Width=700

  6. 만들기를 실행합니다.

  7. 요청 URL 오른쪽에 표시되는 요청 보내기 화살표를 선택합니다.

    다음 이미지가 반환됩니다.

    사용자 지정 압핀을 사용하여 원을 렌더링합니다.

  8. 이제 co 스타일 한정자를 수정하여 압핀의 색을 변경합니다. pins 매개 변수의 값(pins=default|la15+50|al0.66|lc003C62|co002D62|)을 확인하면 현재 색(#002D62)을 확인할 수 있습니다. 색을 #41d42a로 변경하려면 #002D62를 #41d42a로 바꿉니다. 이제 pins 매개 변수는 pins=default|la15+50|al0.66|lc003C62|co41D42A|입니다. 요청은 다음 URL과 같습니다.

    https://atlas.microsoft.com/map/static?subscription-key={Your-Azure-Maps-Subscription-key}&zoom=14&tilesetId=microsoft.base.road&api-version=2024-04-01&language=en-us&center=-122.13230609893799,47.64599069048016&path=lcFF0000|lw2|la0.60|ra1000||-122.13230609893799 47.64599069048016&pins=default|la15+50|al0.66|lc003C62|co41D42A||'Microsoft Corporate Headquarters'-122.14131832122801  47.64690503939462|'Microsoft Visitor Center'-122.136828 47.642224|'Microsoft Conference Center'-122.12552547454833 47.642940335653996|'Microsoft The Commons'-122.13687658309935  47.64452336193245&height=700&Width=700

  9. 만들기를 실행합니다.

  10. 요청 URL 오른쪽에 표시되는 요청 보내기 화살표를 선택합니다.

    다음 이미지가 반환됩니다.

    업데이트된 압핀을 사용하여 원을 렌더링합니다.

마찬가지로 다른 스타일 한정자를 변경, 추가 및 제거할 수 있습니다.

트래픽 계층 추가

도로 베이스맵에 렌더링된 트래픽 계층이 있는 정적 이미지를 얻으려면 trafficLayer 매개 변수를 사용합니다. 다음 예제에서는 트래픽 계층이 있는 지도와 레이블이 있는 핀을 보여 줍니다.

  1. Bruno 앱에서 새 요청을 선택합니다.

  2. 형식을 HTTP로 설정합니다.

  3. 요청에 대한 이름(예: 맵 정적 이미지 가져오기 - 트래픽 레이어)을 입력합니다.

  4. GET HTTP URL 메서드를 선택합니다.

  5. 다음 URL을 입력합니다.

    https://atlas.microsoft.com/map/static?subscription-key={Your-Azure-Maps-Subscription-key}&zoom=14&tilesetId=microsoft.base.road&api-version=2024-04-01&language=en-us&center= -0.122427, 51.500867&pins=custom%7Cla15+50%7Cls12%7Clc003b61%7C%7C%27Westminster Bridge%27-0.122427+51.500867%7C%7Chttps%3A%2F%2Fsamples.azuremaps.com%2Fimages%2Ficons%2Fylw-pushpin.png&height=700&Width=700&trafficLayer=microsoft.traffic.relative.main

  6. 만들기를 실행합니다.

  7. 요청 URL 오른쪽에 표시되는 요청 보내기 화살표를 선택합니다.

    다음 이미지가 반환됩니다.

    트래픽 레이어를 보여주는 지도의 스크린샷과 Westminster Bridge 레이블이 있는 사용자 지정 압정.

진한 회색 스타일을 사용하여 지도 만들기

진한 회색 스타일이 적용된 정적 이미지를 얻으려면 TilesetId 매개 변수를 microsoft.base.darkgrey(으)로 설정합니다.

  1. Bruno 앱에서 새 요청을 선택합니다.

  2. 형식을 HTTP로 설정합니다.

  3. 요청에 대한 이름(예: 맵 정적 이미지 가져오기 - 진한 회색 스타일)을 입력합니다.

  4. GET HTTP URL 메서드를 선택합니다.

  5. 다음 URL을 입력합니다.

    https://atlas.microsoft.com/map/static?subscription-key={Your-Azure-Maps-Subscription-key}&zoom=16&tilesetId=microsoft.base.darkgrey&api-version=2024-04-01&language=en-us&center=-95.360200,29.753452&pins=custom%7Cla15+50%7Cls12%7Clc003b61%7C%7C%27Westminster Bridge%27-0.122427+51.500867%7C%7Chttps%3A%2F%2Fsamples.azuremaps.com%2Fimages%2Ficons%2Fylw-pushpin.png&height=700&Width=700

  6. 만들기를 실행합니다.

  7. 요청 URL 오른쪽에 표시되는 요청 보내기 화살표를 선택합니다.

다음 이미지가 반환됩니다.

타일 세트 ID 매개 변수를 microsoft.base.darkgrey로 설정하여 만든 진한 회색 스타일을 보여 주는 맵의 스크린샷.

TilesetId 매개 변수를 사용하여 사용할 수 있는 다양한 스타일에 대한 자세한 내용은 Render - Get Map Tileset REST API 설명서에서 TilesetId를 참조하세요.

이미지 스타일을 사용하여 지도 만들기

이미지 스타일이 적용된 정적 이미지를 얻으려면 TilesetId 매개 변수를 microsoft.imagery(으)로 설정합니다.

  1. Bruno 앱에서 새 요청을 선택합니다.

  2. 형식을 HTTP로 설정합니다.

  3. 요청에 대한 이름(예: 맵 정적 이미지 가져오기 - 이미지 스타일)을 입력합니다.

  4. GET HTTP URL 메서드를 선택합니다.

  5. 다음 URL을 입력합니다.

    https://atlas.microsoft.com/map/static?subscription-key={Your-Azure-Maps-Subscription-key}&zoom=16&tilesetId=microsoft.imagery&api-version=2024-04-01&language=en-us&center=-43.176141,-22.965458&height=700&Width=700

  6. 만들기를 실행합니다.

  7. 요청 URL 오른쪽에 표시되는 요청 보내기 화살표를 선택합니다.

    다음 이미지가 반환됩니다.

    타일 세트 ID 매개 변수를 microsoft.imagery로 설정하여 만든 이미지 스타일을 보여 주는 맵의 스크린샷.

TilesetId 매개 변수를 사용하여 사용할 수 있는 다양한 스타일에 대한 자세한 내용은 Render - Get Map Tileset REST API 설명서에서 TilesetId를 참조하세요.

다음 단계

렌더링 - 지도 정적 이미지 가져오기