Menggunakan paket npm azure-maps-control

Artikel
10/18/2023

Paket npm azure-maps-control adalah pustaka sisi klien yang memungkinkan Anda menyematkan kontrol peta Azure Peta ke dalam aplikasi node.js Anda menggunakan JavaScript atau TypeScript. Pustaka ini memudahkan penggunaan layanan Azure Peta REST dan memungkinkan Anda menyesuaikan peta interaktif dengan konten dan citra Anda.

Prasyarat

Untuk menggunakan paket npm dalam aplikasi, Anda harus memiliki prasyarat berikut:

Akun Azure Peta
Kunci langganan atau kredensial Microsoft Entra. Untuk informasi selengkapnya, lihat opsi autentikasi.

Penginstalan

Instal paket azure-maps-control terbaru.

npm install azure-maps-control

Paket ini mencakup versi minifikasi kode sumber, Lembar Gaya CSS, dan definisi TypeScript untuk kontrol peta Azure Peta.

Anda juga perlu menyematkan Lembar Gaya CSS agar berbagai kontrol ditampilkan dengan benar. Jika Anda menggunakan bunder JavaScript untuk memaketkan dependensi dan mengemas kode Anda, lihat dokumentasi bunder Anda tentang cara melakukannya. Untuk Webpack, biasanya dilakukan melalui kombinasi style-loader dan css-loader dengan dokumentasi yang tersedia di style-loader.

Untuk memulai, instal style-loader dan css-loader:

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

Di dalam file sumber Anda, impor atlas.min.css:

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

Kemudian tambahkan loader ke bagian aturan modul dari konfigurasi Webpack:

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

Lihat bagian berikut untuk contoh lengkapnya.

Membuat peta di aplikasi node.js

Sematkan peta di halaman web menggunakan paket npm kontrol peta.

Membuat proyek baru
```
npm init
```
npm init adalah perintah yang membantu Anda membuat file package.json untuk proyek simpul Anda. Ini mengajukan beberapa pertanyaan dan menghasilkan file berdasarkan jawaban Anda. Anda juga dapat menggunakan -y atau –yes untuk melewati pertanyaan dan menggunakan nilai default. File package.json berisi informasi tentang proyek Anda, seperti nama, versi, dependensi, skrip, dll.
Instal paket azure-maps-control terbaru.
```
npm install azure-maps-control
```

Instal Webpack dan dependensi dev lainnya.

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

Perbarui package.json dengan menambahkan skrip baru untuk "build": "webpack". File sekarang akan terlihat seperti berikut ini:

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

Buat file konfigurasi Webpack bernama webpack.config.js di folder akar proyek. Sertakan pengaturan ini dalam file konfigurasi.

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

Tambahkan file JavaScript baru di ./src/js/main.js dengan kode ini.

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;

Tambahkan file HTML baru bernama index.html di folder akar proyek dengan konten ini:

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

Proyek Anda sekarang memiliki file berikut:

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

Jalankan perintah berikut untuk menghasilkan file JavaScript di ./dist /bundle.js
```
npm run build
```
Buka file index.html di browser web Anda dan lihat peta yang dirender. Ini akan terlihat seperti gambar berikut:

Menggunakan paket npm Azure Peta lainnya

Azure Peta menawarkan modul lain sebagai paket npm yang dapat diintegrasikan ke dalam aplikasi Anda. Modul-modul ini meliputi:

Sampel berikut menunjukkan cara mengimpor modul dan menggunakannya di aplikasi Anda. Sampel ini menggunakan azure-maps-spatial-io untuk membaca POINT(-122.34009 47.60995) string sebagai GeoJSON dan merendernya di peta menggunakan lapisan gelembung.

Instal paket npm.
```
npm install azure-maps-spatial-io
```
Kemudian, gunakan deklarasi impor untuk menambahkan modul ke file sumber:
```
import * as spatial from "azure-maps-spatial-io";
```

Gunakan spatial.io.ogc.WKT.read() untuk mengurai teks.

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 dapat melemparkan kesalahan tentang tidak dapat menyelesaikan beberapa modul inti node.js. Tambahkan pengaturan ini ke file konfigurasi Webpack Anda untuk memperbaiki masalah.
```
module.exports = {
  // ...
  resolve: {
    fallback: { "crypto": false, "worker_threads": false }
  }
};
```