Usare il pacchetto npm azure-maps-control

Articolo
10/18/2023

Il pacchetto npm azure-maps-control è una libreria lato client che consente di incorporare il controllo mappa Mappe di Azure nelle applicazioni node.js usando JavaScript o TypeScript. Questa libreria semplifica l'uso dei servizi REST Mappe di Azure e consente di personalizzare mappe interattive con il contenuto e le immagini.

Prerequisiti

Per usare il pacchetto npm in un'applicazione, è necessario disporre dei prerequisiti seguenti:

Un account Mappe di Azure
Una chiave di sottoscrizione o le credenziali di Microsoft Entra. Per altre informazioni, vedere Opzioni di autenticazione.

Installazione

Installare il pacchetto azure-maps-control più recente.

npm install azure-maps-control

Questo pacchetto include una versione minimizzata del codice sorgente, del foglio di stile CSS e delle definizioni TypeScript per il controllo mappa Mappe di Azure.

È anche necessario incorporare il foglio di stile CSS per i vari controlli per visualizzare correttamente. Se si usa un bundler JavaScript per aggregare le dipendenze e creare il pacchetto del codice, vedere la documentazione del bundler su come viene eseguita. Per Webpack, viene comunemente eseguita tramite una combinazione di style-loader e css-loader con la documentazione disponibile in style-loader.

Per iniziare, installare style-loader e css-loader:

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

All'interno del file di origine importare atlas.min.css:

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

Aggiungere quindi i caricatori alla parte relativa alle regole del modulo della configurazione di Webpack:

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

Per un esempio completo, vedere la sezione seguente.

Creare una mappa in un'applicazione node.js

Incorporare una mappa in una pagina Web usando il pacchetto npm del controllo mappa.

Crea un nuovo progetto
```
npm init
```
npm init è un comando che consente di creare un file package.json per il progetto node. Pone alcune domande e genera il file in base alle risposte. È anche possibile usare -y o –yes per ignorare le domande e usare i valori predefiniti. Il file package.json contiene informazioni sul progetto, ad esempio il nome, la versione, le dipendenze, gli script e così via.
Installare il pacchetto azure-maps-control più recente.
```
npm install azure-maps-control
```

Installare Webpack e altre dipendenze di sviluppo.

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

Aggiornare package.json aggiungendo un nuovo script per "build": "webpack". Il file dovrebbe ora essere simile al seguente:

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

Creare un file di configurazione Webpack denominato webpack.config.js nella cartella radice del progetto. Includere queste impostazioni nel file di configurazione.

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

Aggiungere un nuovo file JavaScript in ./src/js/main.js con questo codice.

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;

Aggiungere un nuovo file HTML denominato index.html nella cartella radice del progetto con questo contenuto:

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

Il progetto dovrebbe ora includere i file seguenti:

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

Eseguire il comando seguente per generare un file JavaScript in ./dist/bundle.js
```
npm run build
```
Aprire il file index.html nel Web browser e visualizzare la mappa sottoposta a rendering. Dovrebbe essere simile all'immagine seguente:

Usare altri pacchetti npm Mappe di Azure

Mappe di Azure offre altri moduli come pacchetti npm che possono essere integrati nell'applicazione. Questi moduli includono:

L'esempio seguente illustra come importare un modulo e usarlo nell'applicazione. Questo esempio usa azure-maps-spatial-io per leggere una POINT(-122.34009 47.60995) stringa come GeoJSON ed eseguirne il rendering sulla mappa usando un livello a bolle.

Installare il pacchetto npm.
```
npm install azure-maps-spatial-io
```
Usare quindi una dichiarazione di importazione per aggiungere il modulo a un file di origine:
```
import * as spatial from "azure-maps-spatial-io";
```

Usare spatial.io.ogc.WKT.read() per analizzare il testo.

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 può generare errori relativi alla mancata risoluzione di alcuni moduli core node.js. Aggiungere queste impostazioni al file di configurazione webpack per risolvere il problema.
```
module.exports = {
  // ...
  resolve: {
    fallback: { "crypto": false, "worker_threads": false }
  }
};
```