使用 azure-maps-control npm 套件

發行項
04/22/2024

azure-maps-control npm 套件是用戶端程式庫，可讓您使用 JavaScript 或 TypeScript 將 Azure 地圖服務的地圖控制項內嵌到 node.js 應用程式中。此程式庫可讓您輕鬆地使用 Azure 地圖服務 REST 服務，並可讓您使用您的內容和影像來自訂互動式地圖。

必要條件

若要在應用程式中使用 npm 套件，您必須具備下列必要條件：

Azure 地圖服務帳戶
訂用帳戶金鑰或 Microsoft Entra 認證。如需詳細資訊，請參閱驗證選項。

安裝

安裝最新的 azure-maps-control 套件。

npm install azure-maps-control

此套件包含原始程式碼的縮小版本、CSS 樣式表單，以及 Azure 地圖服務地圖控制項的 TypeScript 定義。

您也需要為各種控制項內嵌 CSS 樣式表，使其能正確顯示。如果您使用 JavaScript 搭配程式來組合相依性與封裝程式碼，請參閱搭配程式的文件，以了解其執行方式。針對 Webpack，其完成方式通常是透過 style-loader 和 css-loader 的組合，以及搭配 style-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 地圖服務 npm 套件

Azure 地圖服務提供其他模組作為 npm 套件，這些套件可整合到您的應用程式中。這些模組包括：

下列範例示範如何匯入模組並在應用程式中使用它。此範例會使用 azure-maps-spatial-io，以 GeoJSON 的形式讀取 POINT(-122.34009 47.60995) 字串，並使用泡泡圖層在地圖上加以呈現。

安裝 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 核心模組的錯誤。將這些設定新增至您的 Webpack 組態檔，以修正問題。
```
module.exports = {
  // ...
  resolve: {
    fallback: { "crypto": false, "worker_threads": false }
  }
};
```