你当前正在访问 Microsoft Azure Global Edition 技术文档网站。如果需要访问由世纪互联运营的 Microsoft Azure 中国技术文档网站，请访问 https://docs.azure.cn。

使用 azure-maps-control npm 包

项目
07/18/2023

azure-maps-control npm 包是一种客户端库，支持将 Azure Maps 地图控制嵌入到使用 JavaScript 或 TypeScript 编写的 node.js 应用程序中。借助此库，可以轻松使用 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 和 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
```
在 Web 浏览器中打开文件“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 核心模块的错误。将这些设置添加到 Webpack 配置文件可以解决此问题。
```
module.exports = {
  // ...
  resolve: {
    fallback: { "crypto": false, "worker_threads": false }
  }
};
```