맵 만들기
이 문서에서는 맵을 만들고 맵을 애니메이션하는 방법을 보여줍니다.
맵 로드
맵을 로드하려면 맵 클래스의 새 인스턴스를 만듭니다. 맵을 시작할 때 DIV 요소 ID를 전달하여 맵을 렌더링하고 맵을 로드할 때 사용할 옵션 집합을 전달합니다. atlas 네임스페이스에 기본 인증 정보가 지정되지 않은 경우 맵을 로드할 때 맵 옵션에서 이 정보를 지정해야 합니다. 맵은 성능을 위해 여러 리소스를 비동기적으로 로드합니다. 따라서 맵 인스턴스를 만든 후에 ready 또는 load 이벤트를 맵에 연결한 다음, 맵과 상호 작용하는 추가 코드를 이벤트 처리기에 추가합니다. ready 이벤트는 맵에서 프로그래밍 방식으로 상호 작용할 수 있는 충분한 리소스를 로드하는 즉시 발생합니다. load 이벤트는 초기 맵 뷰의 로드가 완전히 완료된 후에 발생합니다.
동일한 페이지에 여러 맵을 로드할 수도 있습니다. 동일한 페이지에 여러 맵을 로드하는 방법을 보여 주는 샘플 코드는 Azure Maps 샘플의 다중 맵을 참조하세요. 이 샘플의 소스 코드는 다중 맵 소스 코드를 참조하세요.
팁
동일한 페이지에서 여러 맵을 사용할 때 동일하거나 다른 인증 및 언어 설정을 사용할 수 있습니다.
전 세계의 단일 복사본 표시
넓은 화면에서 맵을 축소하면 여러 사본으로 구성된 전 세계가 가로로 나타납니다. 이 옵션은 일부 시나리오에는 유용하지만 다른 애플리케이션의 경우에는 전 세계의 단일 복사본을 확인하는 것이 좋습니다. 이 동작은 맵 renderWorldCopies 옵션을 false로 설정하여 구현 합니다.
//Only allow one copy of the world be rendered when zoomed out.
renderWorldCopies: false
맵 옵션
맵을 만들 때 맵이 작동하는 방식을 사용자 지정하기 위해 전달할 수 있는 몇 가지 옵션이 있습니다.
- CameraOptions 및 CameraBoundOptions를 사용하여 맵에서 표시해야 하는 영역을 지정합니다.
- Serviceoptions는 맵이 맵을 구동하는 서비스와 상호 작용하는 방법을 지정하는 데 사용됩니다.
- StyleOptions는 맵의 스타일과 렌더링을 지정하는 데 사용됩니다.
- UserInteractionOptions는 사용자가 맵과 상호 작용할 때 맵에 도달하는 방법을 지정하는 데 사용됩니다.
이러한 옵션은 setCamera, setServiceOptions, setStyle 및 setUserInteraction 함수를 사용하여 맵을 로드한 후에도 업데이트할 수 있습니다.
맵 카메라 제어
맵의 카메라를 사용하여 맵의 표시된 영역을 설정하는 방법에는 두 가지가 있습니다. 맵을 로드할 때 카메라 옵션을 설정할 수 있습니다. 또는 맵이 로드된 후 언제든지 setCamera 옵션을 호출하여 맵 뷰를 프로그래밍 방식으로 업데이트할 수 있습니다.
카메라 설정
맵 카메라는 맵 캔버스의 뷰포트에 표시되는 항목을 제어합니다. 카메라 옵션은 초기화되거나 맵 setCamera 함수에 전달될 때 맵 옵션으로 전달될 수 있습니다.
// Set the camera options when creating the map.
// Map properties, such as center and zoom level, are part of the CameraOptions
var map = new atlas.Map('map', {
center: [-122.33, 47.6],
zoom: 12
//Additional map options.
};
//Update the map camera at anytime using setCamera function.
map.setCamera({
center: [-110, 45],
zoom: 5
});
중심 및 확대/축소 수준과 같은 맵 속성은 CameraOptions 속성의 일부입니다.
카메라 경계 설정
경계 상자는 맵 카메라를 업데이트하는 데 사용할 수 있습니다. 경계 상자가 포인트 데이터에서 계산된 경우 아이콘 크기를 고려하기 위해 카메라 옵션에서 픽셀 패딩 값을 지정하는 것이 유용한 경우가 많습니다. 이러한 픽셀 패딩은 요소가 맵 뷰포트의 가장자리를 벗어나지 않도록 합니다.
map.setCamera({
bounds: [-122.4, 47.6, -122.3, 47.7],
padding: 10
});
다음 코드에서 맵 개체는 new atlas.Map()을(를) 통해 생성됩니다. CameraBoundsOptions와 같은 맵 속성은 맵 클래스의 setCamera 함수를 통해 정의될 수 있습니다. 경계 및 안쪽 여백 속성은 setCamera를 사용하여 설정됩니다.
맵 보기 애니메이션
맵의 카메라 옵션을 설정할 때 애니메이션 옵션도 설정할 수 있습니다. 이 옵션은 애니메이션 유형과 카메라를 이동하는 데 걸리는 시간을 지정합니다.
map.setCamera({
center: [-122.33, 47.6],
zoom: 12,
duration: 1000,
type: 'fly'
});
다음 코드에서 첫 번째 코드 블록은 맵을 만들고 입력 및 확대/축소 맵 스타일을 설정합니다. 두 번째 코드 블록에서는 애니메이션 단추에 대한 클릭 이벤트 처리기가 생성됩니다. 이 단추를 선택하면 CameraOptions 및 AnimationOptions에 대한 일부 임의 값과 함께 setCamera 함수가 호출됩니다.
<!DOCTYPE html>
<html>
<head>
<!-- Add references to the Azure Maps Map control JavaScript and CSS files. -->
<link rel="stylesheet" href="https://atlas.microsoft.com/sdk/javascript/mapcontrol/3/atlas.min.css" type="text/css" />
<script src="https://atlas.microsoft.com/sdk/javascript/mapcontrol/3/atlas.min.js"></script>
<script type="text/javascript">
var map;
function InitMap()
{
map = new atlas.Map('myMap', {
center: [-122.33, 47.6],
zoom: 12,
view: 'Auto',
style: 'road',
// Add authentication details for connecting to Azure Maps.
authOptions: {
// Get an Azure Maps key at https://azuremaps.com/.
authType: 'subscriptionKey',
subscriptionKey: '{Your-Azure-Maps-Subscription-key}'
}
});
}
/* Animate map view to set camera location
to random points on the map*/
function animateMap() {
map.setCamera({
zoom: Math.random() *2 + 12,
duration: 1000,
type: 'fly'
});
}
</script>
<style>
button {
position: absolute;
top: 10px;
left: 10px;
}
</style>
</head>
<html style='width:100%;height:100%;'>
<body onload="InitMap()" style='width:100%;height:100%;padding:0;margin:0;'>
<div id='myMap' style='position:relative;width:100%;height:100%;'></div>
<button onclick="animateMap()">Animate Maps</button>
<div id="my-text-box"></div>
</body>
</html>
변환 요청
때로는 맵 컨트롤에서 만든 HTTP 요청을 수정하는 기능이 유용할 수 있습니다. 예시:
- 암호로 보호된 서비스에 대한 타일 요청에 헤더를 더 추가합니다.
- 프록시 서비스를 통해 요청을 실행하는 URL을 수정합니다.
맵의 서비스 옵션에는 맵의 모든 요청을 생성하기 전에 수정하는 데 사용할 수 있는 transformRequest가 있습니다. transformRequest 옵션은 두 개의 매개 변수, 즉 문자열 URL과 요청이 사용된 항목을 나타내는 리소스 종류 문자열을 사용하는 함수입니다. 이 함수는 Requestparameters 결과를 반환해야 합니다.
transformRequest: (url: string, resourceType: string) => RequestParameters
요청 변환을 사용하는 경우 최소한 url 속성을 포함하는 RequestParameters 개체를 반환해야 합니다. 다음은 RequestParameters 개체에 포함할 수 있는 속성입니다.
| 옵션 | Type | 설명 |
|---|---|---|
| 본문 | string | POST 요청 본문입니다. |
| credentials | 'same-origin' | 'include' |
COR(원본 간 요청) 자격 증명 설정을 지정하는 데 사용됩니다. 'include'를 사용하여 원본 간 요청이 있는 쿠키를 보냅니다. |
| 헤더 | 개체 | 요청과 함께 보낼 헤더입니다. 이 개체는 문자열 값의 키 값 쌍입니다. |
| 메서드(method) | 'GET' | 'POST' | 'PUT' |
만들 요청의 유형입니다. 기본값은 'GET'입니다. |
| type | 'string' | 'json' | 'arrayBuffer' |
POST 응답 본문의 형식입니다. |
| url | string | 요청할 URL입니다. |
맵에 추가하는 콘텐츠와 가장 관련성이 높은 리소스 유형은 다음 표에 나와 있습니다.
| 리소스 종류 | 설명 |
|---|---|
| 이미지 | SymbolLayer 또는 ImageLayer와 함께 사용할 이미지에 대한 요청입니다. |
| 원본 | TileJSON 요청과 같은 원본 정보에 대한 요청입니다. 기본 맵 스타일의 일부 요청은 원본 정보를 로드할 때 이 리소스 종류도 사용합니다. |
| 타일 | 타일 계층(래스터 또는 벡터)의 요청입니다. |
| WFS | 공간 IO 모듈의 WfsClient에서 OGC 웹 기능 서비스로의 요청입니다. 자세한 내용은 WFS 서비스에 연결을 참조하세요. |
| WebMapService | 공간 IO 모듈의 OgcMapLayer에서 WMS 또는 WMTS 서비스로의 요청입니다. 자세한 내용은 OGC(Open Geospatial Consortium)에서 맵 계층 추가를 참조하세요. |
다음은 요청 변환을 통해 전달되고 기본 맵 스타일인 StyleDefinitions, Style, SpriteImage, SpriteJSON, Glyphs, Attribution과 관련되며 일반적으로 무시되는 일부 리소스 유형입니다.
다음 예제에서는 요청에 사용자 이름 및 암호를 헤더로 추가하여 모든 요청을 https://example.com 크기에 맞게 수정하는 방법을 보여 줍니다.
var map = new atlas.Map('myMap', {
transformRequest: function (url, resourceType) {
//Check to see if the request is to the specified endpoint.
if (url.indexOf('https://examples.com') > -1) {
//Add custom headers to the request.
return {
url: url,
header: {
username: 'myUsername',
password: 'myPassword'
}
};
}
//Return the URL unchanged by default.
return { url: url };
},
authOptions: {
authType: 'subscriptionKey',
subscriptionKey: '<Your Azure Maps Key>'
}
});
다음 단계
이 문서에서 사용된 클래스 및 메서드에 대해 자세히 알아봅니다.
앱에 기능을 추가하는 코드 예제를 참조하세요.