Azure Maps 공간 IO 모듈을 사용하는 방법

아티클
09/28/2024

Azure Maps 웹 SDK는 공간 IO 모듈을 제공합니다. 이 모듈은 공간 데이터를 JavaScript 또는 TypeScript를 사용하여 Azure Maps 웹 SDK와 통합합니다. 이 모듈의 강력한 기능을 통해 개발자는 다음을 수행할 수 있습니다.

공간 데이터 읽기 및 쓰기. 지원되는 파일 형식에는 공간 정보가 있는 열을 포함하는 KML, KMZ, GPX, GeoRSS, GML, GeoJSON 및 CSV 파일이 포함됩니다. 또한 WKT(Well-Known Text)도 지원합니다.
OGC(Open Geospatial Consortium) 서비스에 연결하고 Azure Maps 웹 SDK와 통합하고 WMS(Web Map Services)와 WMTS(Web Map Tile Services)를 지도의 레이어로 오버레이합니다. 자세한 내용은 OGC(Open Geospatial Consortium)에서 맵 계층 추가를 참조하세요.
WFS(Web Feature Service)에서 데이터를 쿼리합니다. 자세한 내용은 WFS 서비스에 연결을 참조하세요.
스타일 정보가 포함된 복잡한 데이터 세트를 오버레이하고 자동으로 렌더링합니다. 자세한 내용은 간단한 데이터 레이어 추가를 참조하세요.
고속 XML 및 경계가 정해진 파일 읽기 권한자와 작성기 클래스를 활용합니다. 자세한 내용은 Core IO 작업을 참조하세요.

이 가이드는 웹 애플리케이션에서 Spatial IO 모듈을 통합하고 사용하는 방법을 보여 줍니다.

이 비디오는 Azure Maps 웹 SDK의 공간 IO 모듈에 대한 개요를 제공합니다.

Warning

신뢰하는 원본에서 가져온 데이터 및 서비스만 사용합니다(특히 다른 도메인에서 참조하는 경우). 공간 IO 모듈은 위험을 최소화하는 단계를 수행하지만, 가장 안전한 방법은 애플리케이션에 처음부터 위험한 데이터를 사용하지 않는 것입니다.

필수 조건

공간 IO 모듈 설치

다음 두 옵션 중 하나를 사용하여 Azure Maps 공간 IO 모듈을 로드할 수 있습니다.

Azure Maps 공간 IO 모듈에 대해 전역적으로 호스트된 Azure CDN입니다. 이 옵션의 경우 HTML 파일의 <head> 요소에 JavaScript에 대한 참조를 추가합니다.
```
<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">

    <!-- Ensures that Internet Explorer and Edge uses the latest version and doesn't emulate an older version -->
    <meta http-equiv="x-ua-compatible" content="IE=Edge">

    <!-- Ensures 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 공간 IO 모듈에 대해 CDN을 사용합니다. HTML 파일의 <head> 요소에 다음 참조를 추가합니다.
```
<script src="https://atlas.microsoft.com/sdk/javascript/spatial/0/atlas-spatial.js"></script>
```
datasource를 초기화하고 지도에 데이터 원본을 추가합니다. layer를 초기화하고 지도 레이어에 데이터 원본을 추가합니다. 그런 다음 데이터 원본 및 레이어를 모두 렌더링합니다. 다음 단계에서 전체 코드를 볼 수 있도록 아래로 스크롤하기 전에 먼저 데이터 원본과 레이어 코드 조각을 배치할 가장 좋은 위치를 생각해 놓아야 합니다. 지도를 프로그래밍 방식으로 조작하기 전에 지도 리소스가 준비될 때까지 기다려야 합니다.
```
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">

    <!-- Ensures that Internet Explorer and Edge uses the latest version and doesn't emulate an older version -->
    <meta http-equiv="x-ua-compatible" content="IE=Edge">

    <!-- Ensures 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>