Verwenden des npm-Pakets „azure-maps-control“

Artikel
07/20/2023

Das npm-Paket azure-maps-control ist eine clientseitige Bibliothek, mit der Sie das Azure Maps-Kartensteuerelement mithilfe von JavaScript oder TypeScript in Ihre node.js-Anwendungen einbetten können. Diese Bibliothek erleichtert die Verwendung der Azure Maps REST-Dienste und ermöglicht es Ihnen, interaktive Karten mit Ihren Inhalten und Bildern anzupassen.

Voraussetzungen

Zum Verwenden des npm-Pakets in einer Anwendung müssen die folgenden Voraussetzungen erfüllt sein:

Ein Azure Maps-Konto
Ein Abonnementschlüssel oder Microsoft Entra-Anmeldeinformationen. Weitere Informationen finden Sie unter Authentifizierungsoptionen.

Installation

Installieren Sie das aktuelle azure-maps-control-Paket.

npm install azure-maps-control

Dieses Paket enthält eine minimierte Version des Quellcodes, CSS-Stylesheets und die TypeScript-Definitionen für das Azure Maps-Kartensteuerelement.

Sie müssen auch das CSS-Stylesheet einbetten, damit verschiedene Steuerelemente ordnungsgemäß angezeigt werden können. Wenn Sie einen JavaScript-Bundler verwenden, um die Abhängigkeiten zu bündeln und Ihren Code zu verpacken, lesen Sie die Dokumentation Ihres Bundlers zur Vorgehensweise. Für Webpack erfolgt dies in der Regel über eine Kombination von style-loader und css-loader mit einer Dokumentation, die unter style-loader verfügbar ist.

Installieren Sie zunächst style-loader und css-loader:

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

Importieren Sie in Ihrer Quelldatei atlas.min.css:

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

Fügen Sie dann dem Modulregelteil der Webpack-Konfiguration Ladeprogramme hinzu:

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

Ein vollständiges Beispiel finden Sie im folgenden Abschnitt.

Erstellen einer Karte in einer Node.js-Anwendung

Betten Sie eine Karte mithilfe des npm-Pakets für Kartensteuerelemente in eine Webseite ein.

Erstellen eines neuen Projekts
```
npm init
```
npm init ist ein Befehl, mit dem Sie eine Datei package.json für Ihr Knotenprojekt erstellen können. Er stellt Ihnen einige Fragen und generiert die Datei auf der Grundlage Ihrer Antworten. Sie können ebenso -y oder –yes verwenden, um die Fragen zu überspringen und die Standardwerte zu verwenden. Die Datei package.json enthält Informationen zu Ihrem Projekt, z. B. Name, Version, Abhängigkeiten, Skripts usw.
Installieren Sie das aktuelle azure-maps-control-Paket.
```
npm install azure-maps-control
```

Installieren Sie Webpack und andere Entwicklungsabhängigkeiten.

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

Aktualisieren Sie package.json, indem Sie ein neues Skript für "build": "webpack" hinzufügen. Die Datei sollte nun in etwa wie folgt aussehen:

{
  "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"
  }
}

Erstellen Sie eine Webpack-Konfigurationsdatei mit dem Namen webpack.config.js im Stammordner des Projekts. Schließen Sie diese Einstellungen in die Konfigurationsdatei ein.

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

Fügen Sie unter ./src/js/main.js mit diesem Code eine neue JavaScript-Datei hinzu.

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;

Fügen Sie im Stammordner des Projekts eine neue HTML-Datei mit dem Namen index.html und diesem Inhalt hinzu:

<!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>

Ihr Projekt sollte nun die folgenden Dateien enthalten:

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

Führen Sie den folgenden Befehl aus, um eine JavaScript-Datei unter ./dist/bundle.js zu generieren
```
npm run build
```
Öffnen Sie die Datei index.html in Ihrem Webbrowser, und zeigen Sie die gerenderte Karte an. Das Ergebnis sollte folgendermaßen aussehen:

Verwenden anderer Azure Maps npm-Pakete

Azure Maps bietet weitere Module als npm-Pakete an, die in Ihre Anwendung integriert werden können. Hierzu gehören die folgenden Module:

Das folgende Beispiel zeigt, wie Sie ein Modul importieren und in Ihrer Anwendung verwenden. In diesem Beispiel wird azure-maps-spatial-io verwendet, um eine POINT(-122.34009 47.60995)-Zeichenfolge als GeoJSON zu lesen und sie mithilfe einer Blasenebene auf der Karte zu rendern.

Installieren Sie das npm-Paket.
```
npm install azure-maps-spatial-io
```
Verwenden Sie dann eine Importdeklaration, um das Modul einer Quelldatei hinzuzufügen:
```
import * as spatial from "azure-maps-spatial-io";
```

Verwenden Sie spatial.io.ogc.WKT.read() zur Analyse von des Texts.

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 gibt möglicherweise Fehler aus, weil einige node.js-Kernmodule nicht aufgelöst werden können. Fügen Sie diese Einstellungen Ihrer Webpack-Konfigurationsdatei hinzu, um das Problem zu beheben.
```
module.exports = {
  // ...
  resolve: {
    fallback: { "crypto": false, "worker_threads": false }
  }
};
```