Использование пакета npm для управления azure-maps

Статья
10/18/2023

Пакет npm для управления azure-maps — это клиентская библиотека, которая позволяет внедрить элемент управления картой Azure Карты в приложения node.js с помощью JavaScript или TypeScript. Эта библиотека упрощает использование служб AZURE Карты REST и позволяет настраивать интерактивные карты с содержимым и изображениями.

Необходимые компоненты

Чтобы использовать пакет npm в приложении, необходимо иметь следующие предварительные требования:

Учетная запись Azure Карты
Ключ подписки или учетные данные Microsoft Entra. Дополнительные сведения см. в разделе "Параметры проверки подлинности".

Установка

Установите последний пакет управления azure-maps-control .

npm install azure-maps-control

Этот пакет включает в себя минифицированную версию исходного кода, таблицы стилей CSS и определения TypeScript для элемента управления картой Azure Карты.

Кроме того, необходимо внедрить таблицу стилей CSS для правильного отображения различных элементов управления. Если вы используете пакет JavaScript для упаковки зависимостей и упаковки кода, ознакомьтесь с документацией пакета по его завершении. Для Webpack обычно это делается с помощью сочетания 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
```

Обновите package.json , добавив новый скрипт для "build": "webpack". Теперь файл должен выглядеть примерно так:

{
  "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 с именем webpack.config.js в корневой папке проекта. Включите эти параметры в файл конфигурации.

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"]
      }
    ]
  }
};

Добавьте новый файл JavaScript в ./src/js/main.js с помощью этого кода.

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;

Добавьте новый HTML-файл с именем index.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

Выполните следующую команду, чтобы создать файл JavaScript в ./dist/bundle.js
```
npm run build
```
Откройте файл index.html в веб-браузере и просмотрите отрисованную карту. Он должен выглядеть следующим образом:

Использование других пакетов npm для Azure Карты

Azure Карты предлагает другие модули в виде пакетов 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 core. Добавьте эти параметры в файл конфигурации Webpack, чтобы устранить проблему.
```
module.exports = {
  // ...
  resolve: {
    fallback: { "crypto": false, "worker_threads": false }
  }
};
```