Korzystanie z pakietu npm kontrolki azure-maps-control

Artykuł
10/18/2023

Pakiet npm kontrolki azure-maps-control to biblioteka po stronie klienta, która umożliwia osadzanie kontrolki mapy usługi Azure Mapy w aplikacjach node.js przy użyciu języka JavaScript lub TypeScript. Ta biblioteka ułatwia korzystanie z usług AZURE Mapy REST i umożliwia dostosowywanie interaktywnych map przy użyciu zawartości i obrazów.

Wymagania wstępne

Aby użyć pakietu npm w aplikacji, musisz mieć następujące wymagania wstępne:

Konto usługi Azure Mapy
Klucz subskrypcji lub poświadczenia entra firmy Microsoft. Aby uzyskać więcej informacji, zobacz opcje uwierzytelniania.

Instalacja

Zainstaluj najnowszy pakiet azure-maps-control .

npm install azure-maps-control

Ten pakiet zawiera minimalną wersję kodu źródłowego, arkusz stylów CSS i definicje Języka TypeScript dla kontrolki mapy Mapy platformy Azure.

Należy również osadzić arkusz stylów CSS dla różnych kontrolek, aby wyświetlić je poprawnie. Jeśli używasz pakietu JavaScript do tworzenia pakietów zależności i tworzenia pakietu kodu, zapoznaj się z dokumentacją pakietu pakietów, aby dowiedzieć się, jak to zrobić. W przypadku pakietu Webpack często odbywa się to za pomocą kombinacji style-loader elementów i css-loader z dokumentacją dostępną w module ładujący style.

Aby rozpocząć, zainstaluj i style-loadercss-loader:

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

W pliku źródłowym zaimportuj plik atlas.min.css:

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

Następnie dodaj moduły ładujących do części reguł modułu konfiguracji pakietu WebPack:

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

Aby zapoznać się z kompletnym przykładem, zapoznaj się z poniższą sekcją.

Tworzenie mapy w aplikacji node.js

Osadź mapę na stronie internetowej przy użyciu pakietu npm kontrolki mapy.

Tworzenie nowego projektu
```
npm init
```
npm init to polecenie ułatwiające utworzenie pliku package.json dla projektu węzła. Zadaje kilka pytań i generuje plik na podstawie Twoich odpowiedzi. Możesz również użyć -y polecenia lub –yes pominąć pytania i użyć wartości domyślnych. Plik package.json zawiera informacje o projekcie, takie jak jego nazwa, wersja, zależności, skrypty itp.
Zainstaluj najnowszy pakiet azure-maps-control .
```
npm install azure-maps-control
```

Zainstaluj pakiet WebPack i inne zależności deweloperskie.

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

Zaktualizuj plik package.json , dodając nowy skrypt dla pliku "build": "webpack". Plik powinien teraz wyglądać podobnie do następującego:

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

Utwórz plik konfiguracji pakietu Webpack o nazwie webpack.config.js w folderze głównym projektu. Uwzględnij te ustawienia w pliku konfiguracji.

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

Dodaj nowy plik JavaScript w pliku ./src/js/main.js przy użyciu tego kodu.

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;

Dodaj nowy plik HTML o nazwie index.html w folderze głównym projektu o następującej zawartości:

<!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 powinien teraz zawierać następujące pliki:

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

Uruchom następujące polecenie, aby wygenerować plik JavaScript w pliku ./dist/bundle.js
```
npm run build
```
Otwórz plik index.html w przeglądarce internetowej i wyświetl renderowaną mapę. Powinien wyglądać podobnie do poniższej ilustracji:

Korzystanie z innych pakietów npm platformy Azure Mapy

Usługa Azure Mapy oferuje inne moduły jako pakiety npm, które można zintegrować z aplikacją. Te moduły obejmują:

W poniższym przykładzie pokazano, jak zaimportować moduł i użyć go w aplikacji. W tym przykładzie użyto polecenia azure-maps-spatial-io do odczytania POINT(-122.34009 47.60995) ciągu jako pliku GeoJSON i renderowania go na mapie przy użyciu warstwy bąbelkowej.

Zainstaluj pakiet npm.
```
npm install azure-maps-spatial-io
```
Następnie użyj deklaracji importu, aby dodać moduł do pliku źródłowego:
```
import * as spatial from "azure-maps-spatial-io";
```

Użyj spatial.io.ogc.WKT.read() polecenia , aby przeanalizować tekst.

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;

Pakiet WebPack 5 może zgłaszać błędy dotyczące braku możliwości rozwiązania niektórych modułów node.js Core. Dodaj te ustawienia do pliku konfiguracji pakietu WebPack, aby rozwiązać ten problem.
```
module.exports = {
  // ...
  resolve: {
    fallback: { "crypto": false, "worker_threads": false }
  }
};
```