Sdílet prostřednictvím


Použití balíčku npm pro azure-maps-control

Balíček npm pro řízení azure-maps je knihovna na straně klienta, která umožňuje vložit ovládací prvek mapy Azure Mapy do aplikací node.js pomocí JavaScriptu nebo TypeScriptu. Tato knihovna usnadňuje používání služeb Azure Mapy REST a umožňuje přizpůsobit interaktivní mapy pomocí obsahu a obrázků.

Předpoklady

Pokud chcete použít balíček npm v aplikaci, musíte mít následující požadavky:

  • Účet Azure Mapy
  • Klíč předplatného nebo přihlašovací údaje Microsoft Entra. Další informace najdete v tématu Možnosti ověřování.

Instalace

Nainstalujte nejnovější balíček azure-maps-control .

npm install azure-maps-control

Tento balíček obsahuje minifikovanou verzi zdrojového kódu, šablony stylů CSS a definice TypeScriptu pro ovládací prvek mapy Azure Mapy.

Pro správné zobrazení různých ovládacích prvků byste také museli vložit šablonu stylů CSS. Pokud ke sbalování závislostí a zabalení kódu používáte javascriptový bundler, přečtěte si dokumentaci k vašemu bundleru, jak se to dělá. U webpacku se obvykle provádí prostřednictvím kombinace style-loader a css-loader dokumentace, která je k dispozici ve stylu zavaděče.

Začněte instalací style-loader a css-loader:

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

Ve zdrojovém souboru importujte atlas.min.css:

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

Potom přidejte zavaděče do části pravidel modulu konfigurace webpacku:

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

Úplný příklad najdete v následující části.

Vytvoření mapy v aplikaci node.js

Vložení mapy na webovou stránku pomocí balíčku npm ovládacího prvku mapy

  1. Vytvoření nového projektu

    npm init
    

    npm init je příkaz, který vám pomůže vytvořit soubor package.json pro projekt uzlu. Položí vám několik otázek a vygeneruje soubor na základě vašich odpovědí. Můžete také použít -y nebo –yes přeskočit otázky a použít výchozí hodnoty. Soubor package.json obsahuje informace o projektu, jako je jeho název, verze, závislosti, skripty atd.

  2. Nainstalujte nejnovější balíček azure-maps-control .

    npm install azure-maps-control
    
  3. Nainstalujte Webpack a další závislosti vývoje.

    npm install --save-dev webpack webpack-cli style-loader css-loader
    
  4. Aktualizujte soubor package.json přidáním nového skriptu pro "build": "webpack". Soubor by teď měl vypadat přibližně takto:

    {
      "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"
      }
    }
    
  5. V kořenové složce projektu vytvořte konfigurační soubor Webpack s názvem webpack.config.js . Zahrňte tato nastavení do konfiguračního souboru.

    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"]
          }
        ]
      }
    };
    
  6. Přidejte nový javascriptový soubor na adrese ./src/js/main.js s tímto kódem.

    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;
    
  7. Do kořenové složky projektu přidejte nový soubor HTML s názvem index.html s tímto obsahem:

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

    Projekt by teď měl mít následující soubory:

    ├───node_modules
    ├───index.html
    ├───package-lock.json
    ├───package.json
    ├───webpack.config.js
    └───src
        └───js
            └───main.js
    
  8. Spuštěním následujícího příkazu vygenerujte javascriptový soubor na adrese ./dist/bundle.js.

    npm run build
    
  9. Otevřete soubor index.html ve webovém prohlížeči a zobrazte vykreslenou mapu. Měl by vypadat jako na následujícím obrázku:

    A screenshot showing a map of the world.

Použití jiných balíčků npm Mapy Azure

Azure Mapy nabízí další moduly jako balíčky npm, které je možné integrovat do vaší aplikace. Mezi tyto moduly patří:

Následující ukázka ukazuje, jak importovat modul a používat ho ve vaší aplikaci. Tato ukázka používá azure-maps-spatial-io ke čtení POINT(-122.34009 47.60995) řetězce jako GeoJSON a vykreslení na mapě pomocí bublinové vrstvy.

  1. Nainstalujte balíček npm .

    npm install azure-maps-spatial-io
    
  2. Pak pomocí deklarace importu přidejte modul do zdrojového souboru:

    import * as spatial from "azure-maps-spatial-io";
    
  3. Slouží spatial.io.ogc.WKT.read() k analýze textu.

    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;
    
  4. Webpack 5 může vyvolat chyby týkající se nemožnosti vyřešit některé moduly node.js Core. Pokud chcete tento problém vyřešit, přidejte tato nastavení do konfiguračního souboru Webpacku.

    module.exports = {
      // ...
      resolve: {
        fallback: { "crypto": false, "worker_threads": false }
      }
    };
    

Tento obrázek je snímek obrazovky s výstupem ukázky.

A screenshot showing a map of Seattle with a blue dot.

Další kroky

Zjistěte, jak vytvořit mapu a pracovat s ní:

Naučte se stylovat mapu:

Seznamte se s osvědčenými postupy a projděte si ukázky: