azure-maps-control npm 패키지 사용

아티클
02/23/2024

azure-maps-control npm 패키지는 JavaScript 또는 TypeScript를 사용하여 node.js 애플리케이션에 Azure Maps 맵 컨트롤을 포함할 수 있는 클라이언트 쪽 라이브러리입니다. 이 라이브러리를 사용하면 Azure Maps REST 서비스를 쉽게 사용할 수 있으며 원하는 콘텐츠 및 이미지로 대화형 맵을 사용자 지정할 수 있습니다.

필수 조건

애플리케이션에서 npm 패키지를 사용하려면 다음 필수 구성 요소가 있어야 합니다.

Azure Maps 계정
구독 키 또는 Microsoft Entra 자격 증명 자세한 내용은 인증 옵션을 참조하세요.

설치

최신 azure-maps-control 패키지를 설치합니다.

npm install azure-maps-control

이 패키지에는 소스 코드의 축소된 버전, CSS 스타일시트 및 Azure Maps 맵 컨트롤에 대한 TypeScript 정의가 포함됩니다.

또한 다양한 컨트롤이 올바르게 표시되도록 CSS 스타일시트를 포함해야 합니다. JavaScript 번들러를 사용하여 종속성을 번들로 묶고 코드를 패키지하는 경우 수행 방법에 대해 번들러 설명서를 참조하세요. Webpack의 경우 이 작업은 일반적으로 style-loader에서 사용할 수 있는 설명서와 style-loader 및 css-loader 조합을 통해 수행됩니다.

시작하려면 style-loader 및 css-loader를 설치합니다.

npm install --save-dev style-loader css-loader

원본 파일 내에서 atlas.min.css를 가져옵니다.

import "azure-maps-control/dist/atlas.min.css";

그런 다음, Webpack 구성의 모듈 규칙 부분에 로더를 추가합니다.

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: ["style-loader", "css-loader"]
      }
    ]
  }
};

전체 예제는 다음 섹션을 참조하세요.

node.js 애플리케이션에서 맵 만들기

맵 컨트롤 npm 패키지를 사용하여 웹 페이지에 맵을 포함합니다.

새 프로젝트 만들기
```
npm init
```
npm init는 노드 프로젝트에 대한 package.json 파일을 만드는 데 도움이 되는 명령입니다. 사용자에게 몇 가지 질문을 하고 사용자의 답변을 기준으로 파일을 생성합니다. -y 또는 –yes를 사용하여 질문을 건너뛰고 기본값을 사용할 수도 있습니다. package.json 파일에는 이름, 버전, 종속성, 스크립트 등 프로젝트에 대한 정보가 포함되어 있습니다.
최신 azure-maps-control 패키지를 설치합니다.
```
npm install azure-maps-control
```

Webpack 및 기타 개발 종속성을 설치합니다.

npm install --save-dev webpack webpack-cli style-loader css-loader

"build": "webpack"에 대한 새 스크립트를 추가하여 package.json을 업데이트합니다. 이 파일은 다음과 같이 표시됩니다.

{
  "name": "azure-maps-npm-demo",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "azure-maps-control": "^2.3.1"
  },
  "devDependencies": {
    "css-loader": "^6.8.1",
    "style-loader": "^3.3.3",
    "webpack": "^5.88.1",
    "webpack-cli": "^5.1.4"
  }
}

프로젝트의 루트 폴더에 webpack.config.js라는 Webpack 구성 파일을 만듭니다. 구성 파일에 이러한 설정을 포함합니다.

module.exports = {
  entry: "./src/js/main.js",
  mode: "development",
  output: {
    path: `${__dirname}/dist`,
    filename: "bundle.js"
  },
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: ["style-loader", "css-loader"]
      }
    ]
  }
};

이 코드를 사용하여 ./src/js/main.js에서 새 JavaScript 파일을 추가합니다.

import * as atlas from "azure-maps-control";
import "azure-maps-control/dist/atlas.min.css";

const onload = () => {
  // Initialize a map instance.
  const map = new atlas.Map("map", {
    view: "Auto",
    // Add authentication details for connecting to Azure Maps.
    authOptions: {
      authType: "subscriptionKey",
      subscriptionKey: "<Your Azure Maps Key>"
    }
  });
};

document.body.onload = onload;

프로젝트의 루트 폴더에 이 콘텐츠를 포함하는 index.html이라는 새 HTML 파일을 추가합니다.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Azure Maps demo</title>
    <script src="./dist/bundle.js" async></script>
    <style>
      html,
      body,
      #map {
        width: 100%;
        height: 100%;
        padding: 0;
        margin: 0;
      }
    </style>
  </head>
  <body>
    <div id="map"></div>
  </body>
</html>

이제 프로젝트에 다음 파일이 있어야 합니다.

├───node_modules
├───index.html
├───package-lock.json
├───package.json
├───webpack.config.js
└───src
    └───js
        └───main.js

다음 명령을 실행하여 ./dist/bundle.js에서 JavaScript 파일을 생성합니다.
```
npm run build
```
웹 브라우저에서 index.html 파일을 열고 렌더링된 맵을 봅니다. 이 테이블은 다음 이미지와 같습니다.

다른 Azure Maps npm 패키지 사용

Azure Maps는 애플리케이션에 통합할 수 있는 npm 패키지로서 다른 모듈을 제공합니다. 이러한 모듈에는 다음이 포함됩니다.

다음 샘플에서는 모듈을 가져와 애플리케이션에서 사용하는 방법을 보여 줍니다. 이 샘플에서는 azure-maps-spatial-io를 사용하여 POINT(-122.34009 47.60995) 문자열을 GeoJSON으로 읽고 거품형 계층을 사용하여 맵에 렌더링합니다.

npm 패키지를 설치합니다.
```
npm install azure-maps-spatial-io
```
그런 다음, 가져오기 선언을 사용하여 모듈을 원본 파일에 추가합니다.
```
import * as spatial from "azure-maps-spatial-io";
```

spatial.io.ogc.WKT.read()를 사용하여 텍스트를 구문 분석합니다.

import * as atlas from "azure-maps-control";
import * as spatial from "azure-maps-spatial-io";
import "azure-maps-control/dist/atlas.min.css";

const onload = () => {
  // Initialize a map instance.
  const map = new atlas.Map("map", {
    center: [-122.34009, 47.60995],
    zoom: 12,
    view: "Auto",
    // Add authentication details for connecting to Azure Maps.
    authOptions: {
      authType: "subscriptionKey",
      subscriptionKey: "<Your Azure Maps Key>"
    }
  });

  // Wait until the map resources are ready.
  map.events.add("ready", () => {
    // Create a data source and add it to the map.
    const datasource = new atlas.source.DataSource();
    map.sources.add(datasource);

    // Create a layer to render the data
    map.layers.add(new atlas.layer.BubbleLayer(datasource));

    // Parse the point string.
    var point = spatial.io.ogc.WKT.read("POINT(-122.34009 47.60995)");

    // Add the parsed data to the data source.
    datasource.add(point);
  });
};

document.body.onload = onload;

Webpack 5는 일부 node.js 핵심 모듈을 확인할 수 없다는 오류를 throw할 수 있습니다. 이 문제를 해결하려면 Webpack 구성 파일에 이러한 설정을 추가합니다.
```
module.exports = {
  // ...
  resolve: {
    fallback: { "crypto": false, "worker_threads": false }
  }
};
```