你当前正在访问 Microsoft Azure Global Edition 技术文档网站。 如果需要访问由世纪互联运营的 Microsoft Azure 中国技术文档网站,请访问 https://docs.azure.cn。
使用 azure-maps-control npm 包
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 } } };
此图中示例的输出的屏幕截图。
后续步骤
了解如何创建地图并与之进行交互:
了解如何设置地图样式:
了解最佳做法并查看示例: