Azure Maps 공간 IO 모듈 사용
Azure Maps Spatial IO 모듈 은 JavaScript 또는 TypeScript를 사용하여 공간 데이터를 Azure Maps 웹 SDK와 통합합니다. 이 가이드는 웹 애플리케이션에서 Spatial IO 모듈을 통합하고 사용하는 방법을 보여 줍니다.
이 모듈의 강력한 기능을 사용하여 다음을 수행할 수 있습니다.
-
공간 데이터 읽기 및 쓰기. 다음을 포함하는 파일 형식을 사용할 수 있습니다.
- KML(키홀 태그 언어).
- KMZ(압축 KML).
- GPS 교환 형식(GPX).
- 지리적 정말 간단한 배포 (GeoRSS).
- GML(Geography Markup Language).
- GeoJSON(지리적 JavaScript 개체 표기법).
- 잘 알려진 텍스트(WKT)입니다.
- 열에 공간 정보가 포함된 경우 CSV(쉼표로 구분된 값)입니다.
- OGC(Open Geospatial Consortium) 서비스에 연결하고 Azure Maps 웹 SDK와 통합합니다. WMS(Web Map Services) 및 WMTS(웹 맵 타일 서비스)를 맵의 레이어로 오버레이할 수도 있습니다. 자세한 내용은 OGC(Open Geospatial Consortium)에서 맵 계층 추가를 참조하세요.
- WFS(Web Feature Service)에서 데이터를 쿼리합니다. 자세한 내용은 WFS 서비스에 연결을 참조하세요.
- 자동으로 렌더링할 수 있는 스타일 정보를 포함하는 복잡한 데이터 집합을 오버레이합니다. 자세한 내용은 간단한 데이터 레이어 추가를 참조하세요.
- 고속 XML 및 구분된 파일 판독기 및 기록기 클래스를 사용합니다. 자세한 내용은 Core IO 작업을 참조하세요.
다음 비디오에서는 Azure Maps 웹 SDK의 공간 IO 모듈에 대한 개요를 제공합니다.
Warning
특히 다른 도메인에서 데이터를 참조하는 경우 신뢰할 수 있는 원본의 데이터 및 서비스만 사용합니다. 공간 IO 모듈은 위험을 최소화하기 위한 단계를 수행하지만 애플리케이션에 위험한 데이터를 허용해서는 안 됩니다.
필수 조건
Spatial IO 모듈 설치
다음 두 가지 옵션 중 하나를 사용하여 Azure Maps 공간 IO 모듈을 로드할 수 있습니다.
첫 번째 옵션은 Azure Maps Spatial IO 모듈에 대해 전역적으로 호스트되는 Azure 콘텐츠 배달 네트워크를 사용하는 것입니다. HTML 파일의 요소에서
<head>다음 스크립트 태그를 사용하여 참조를 추가합니다.<script src="https://atlas.microsoft.com/sdk/javascript/spatial/0/atlas-spatial.js"></script>두 번째 옵션을 사용하면 azure-maps-spatial-io에 대한 소스 코드를 로컬로 로드하고 앱으로 호스트할 수 있습니다. 이 패키지에는 TypeScript 정의도 포함됩니다. 다음 명령을 사용하여 패키지를 설치합니다.
npm install azure-maps-spatial-io가져오기 선언을 사용하여 원본 파일에 모듈을 추가합니다.
import * as spatial from "azure-maps-spatial-io";자세한 내용은 Azure Maps 맵 컨트롤 npm 패키지 사용 방법을 참조하세요.
공간 IO 모듈 구현
새 HTML 파일 만들기
Azure Maps 웹 SDK를 로드하고 지도 컨트롤을 초기화합니다. 자세한 내용은 Azure Maps 지도 컨트롤 가이드를 참조하세요. HTML 파일은 다음과 같습니다.
<!DOCTYPE html> <html> <head> <title></title> <meta charset="utf-8"> <!-- Ensure that Internet Explorer and Edge use the latest version and don't emulate an older version. --> <meta http-equiv="x-ua-compatible" content="IE=Edge"> <!-- Ensure that the web page looks good on all screen sizes. --> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <!-- 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.js"></script> <script type='text/javascript'> var map; function GetMap() { //Initialize a map instance. map = new atlas.Map('myMap', { view: 'Auto', //Add your Azure Maps subscription key to the map SDK. Get an Azure Maps key at https://azure.com/maps. authOptions: { authType: 'subscriptionKey', subscriptionKey: '<Your Azure Maps Key>' } }); //Wait until the map resources are ready. map.events.add('ready', function() { // Write your code here to make sure it runs once the map resources are ready. }); } </script> </head> <body onload="GetMap()"> <div id="myMap" style="position:relative;width:100%;min-width:290px;height:600px;"></div> </body> </html>Azure Maps 공간 IO 모듈을 로드하고 Azure Maps Spatial IO 모듈에 대한 콘텐츠 배달 네트워크를 사용합니다. HTML 파일의
<head>요소에 다음 참조를 추가합니다.<script src="https://atlas.microsoft.com/sdk/javascript/spatial/0/atlas-spatial.js"></script>데이터 원본을 초기화하고 맵에 추가합니다.
간단한 데이터 계층을 초기화하고 데이터 원본을 추가합니다.
데이터 계층을 렌더링합니다.
다음 단계에서 전체 코드를 보려면 아래로 스크롤하기 전에 데이터 원본 및 계층 코드 조각을 배치하기에 가장 적합한 위치를 결정합니다. 맵을 프로그래밍 방식으로 조작하기 전에 지도 리소스가 준비될 때까지 기다립니다.
var datasource, layer;코드 조각을 배치하기에 가장 적합한 위치를 찾습니다.
//Create a data source and add it to the map. datasource = new atlas.source.DataSource(); map.sources.add(datasource); //Add a simple data layer for rendering the data. layer = new atlas.layer.SimpleDataLayer(datasource); map.layers.add(layer);HTML 코드는 다음과 같습니다. 샘플 코드는 맵에 XML 파일의 기능 데이터를 표시하는 방법을 보여줍니다.
참고 항목
이 예에서는 Route66Attractions.xml을 사용합니다.
<!DOCTYPE html> <html> <head> <title>Spatial IO Module Example</title> <meta charset="utf-8"> <!-- Ensure that Internet Explorer and Edge use the latest version and don't emulate an older version. --> <meta http-equiv="x-ua-compatible" content="IE=Edge"> <!-- Ensure that the web page looks good on all screen sizes. --> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <!-- 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.js"></script> <!-- Add reference to the Azure Maps Spatial IO module. --> <script src="https://atlas.microsoft.com/sdk/javascript/spatial/0/atlas-spatial.js"></script> <script type='text/javascript'> var map, datasource, layer; function GetMap() { //Initialize a map instance. map = new atlas.Map('myMap', { view: 'Auto', //Add your Azure Maps subscription key to the map SDK. Get an Azure Maps key at https://azure.com/maps. authOptions: { authType: 'subscriptionKey', subscriptionKey: '<Your Azure Maps Key>' } }); //Wait until the map resources are ready. map.events.add('ready', function() { //Create a data source and add it to the map. datasource = new atlas.source.DataSource(); map.sources.add(datasource); //Add a simple data layer for rendering the data. layer = new atlas.layer.SimpleDataLayer(datasource); map.layers.add(layer); //Read an XML file from a URL or pass in a raw XML string. atlas.io.read('Route66Attractions.xml').then(r => { if (r) { //Add the feature data to the data source. datasource.add(r); //If bounding box information is known for data, set the map view to it. if (r.bbox) { map.setCamera({ bounds: r.bbox, padding: 50 }); } } }); }); } </script> </head> <body onload='GetMap()'> <div id="myMap" style="position:relative;width:100%;min-width:290px;height:600px;"></div> </body> </html><Your Azure Maps Key>를 구독 키로 바꿉니다. HTML 파일에는 다음과 같은 이미지가 포함되어야 합니다.
관련 콘텐츠
이 문서에서는 공간 IO 모듈에서 사용할 수 있는 많은 기능 중 하나만 설명합니다. 다른 사용자에 대해 알아보려면 다음 가이드를 참조하세요.