Az azure-maps-control npm-csomag használata

Cikk
10/18/2023

Az Azure-maps-control npm csomag egy ügyféloldali kódtár, amely lehetővé teszi az Azure Térképek térképvezérlő beágyazását a node.js-alkalmazásokba JavaScript vagy TypeScript használatával. Ez a kódtár megkönnyíti az Azure Térképek REST-szolgáltatások használatát, és lehetővé teszi interaktív térképek testreszabását tartalommal és képekkel.

Előfeltételek

Az npm-csomag alkalmazásbeli használatához a következő előfeltételekkel kell rendelkeznie:

Azure-Térképek-fiók
Egy előfizetési kulcs vagy a Microsoft Entra hitelesítő adatai. További információkért lásd a hitelesítési beállításokat.

Installation

Telepítse a legújabb azure-maps-control csomagot.

npm install azure-maps-control

Ez a csomag tartalmazza a forráskód, a CSS stíluslap és az Azure Térképek térképvezérlő TypeScript-definícióinak egy minifikált verzióját.

A különböző vezérlők megfelelő megjelenítéséhez a CSS-stíluslapot is beágyaznia kell. Ha JavaScript-kötegelőt használ a függőségek kötegeléséhez és a kód csomagolásához, tekintse meg a csomagkötegelő dokumentációját a művelet módjáról. A Webpack esetében ez általában a stílusbetöltőben elérhető dokumentáció kombinációján style-loader keresztül történik.css-loader

Első lépésként telepítse style-loader és css-loader:

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

A forrásfájlon belül importálja az atlas.min.css fájlt:

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

Ezután adjon hozzá rakodókat a Webpack konfiguráció modulszabályainak részéhez:

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

A teljes példáért tekintse meg a következő szakaszt.

Térkép létrehozása node.js-alkalmazásban

Térkép beágyazása weblapra a térképvezérlő npm-csomagjának használatával.

Új projekt létrehozása
```
npm init
```
npm init egy parancs, amely segít a package.json fájl létrehozásában a csomópontprojekthez. Kérdéseket tesz fel, és a válaszok alapján hozza létre a fájlt. Használhatja vagy –yes kihagyhatja -y a kérdéseket, és használhatja az alapértelmezett értékeket. A package.json fájl információkat tartalmaz a projektről, például a nevét, verzióját, függőségeit, szkripteit stb.
Telepítse a legújabb azure-maps-control csomagot.
```
npm install azure-maps-control
```

Telepítse a Webpackot és más fejlesztői függőségeket.

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

A package.json frissítéséhez adjon hozzá egy új szkriptet a következőhöz"build": "webpack": . A fájlnak a következőhöz hasonlóan kell kinéznie:

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

Hozzon létre egy webpack.config.js nevű Webpack konfigurációs fájlt a projekt gyökérmappájában. Adja meg ezeket a beállításokat a konfigurációs fájlban.

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

Adjon hozzá egy új JavaScript-fájlt a ./src/js/main.js címen ezzel a kóddal.

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;

Adjon hozzá egy új, index.html nevű HTML-fájlt a projekt gyökérmappájába a következő tartalommal:

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

A projektnek most a következő fájlokkal kell rendelkeznie:

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

Futtassa a következő parancsot egy JavaScript-fájl létrehozásához a ./dist/bundle.js címen
```
npm run build
```
Nyissa meg az index.html fájlt a webböngészőben, és tekintse meg a renderelt térképet. A következő képnek kell kinéznie:

Egyéb Azure Térképek npm-csomagok használata

Az Azure Térképek más modulokat is kínál npm-csomagként, amelyek integrálhatók az alkalmazásba. Ezek a modulok a következők:

Az alábbi minta bemutatja, hogyan importálhat egy modult, és hogyan használhatja azt az alkalmazásban. Ez a minta az azure-maps-spatial-io használatával olvas be egy sztringet POINT(-122.34009 47.60995) GeoJSON-ként, és buborékréteggel jeleníti meg a térképen.

Telepítse az npm csomagot.
```
npm install azure-maps-spatial-io
```
Ezután egy importálási deklarációval adja hozzá a modult egy forrásfájlhoz:
```
import * as spatial from "azure-maps-spatial-io";
```

A szöveg elemzésére használható 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;

A Webpack 5 hibát jelezhet, ha nem sikerül megoldani néhány node.js core modult. Adja hozzá ezeket a beállításokat a Webpack konfigurációs fájljához a probléma megoldásához.
```
module.exports = {
  // ...
  resolve: {
    fallback: { "crypto": false, "worker_threads": false }
  }
};
```