استخدام حزمة azure-maps-control npm

مقالة
07/15/2023

حزمة azure-maps-control npm هي مكتبة من جانب العميل تسمح لك بتضمين عنصر تحكم الخريطة خرائط Azure في تطبيقات node.js باستخدام JavaScript أو TypeScript. تسهل هذه المكتبة استخدام خدمات خرائط AZURE REST وتتيح لك تخصيص الخرائط التفاعلية باستخدام المحتوى والصور.

المتطلبات الأساسية

لاستخدام حزمة npm في أحد التطبيقات، يجب أن يكون لديك المتطلبات الأساسية التالية:

حساب خرائط Azure
مفتاح اشتراك أو بيانات اعتماد Microsoft Entra. لمزيد من المعلومات، راجع خيارات المصادقة.

التثبيت

تثبيت أحدث حزمة التحكم في خرائط azure.

npm install azure-maps-control

تتضمن هذه الحزمة إصدارا تم تصغيره من التعليمات البرمجية المصدر وورقة أنماط CSS وتعريفات TypeScript لعنصر تحكم الخريطة خرائط Azure.

ستحتاج أيضا إلى تضمين ورقة أنماط CSS لعرض عناصر التحكم المختلفة بشكل صحيح. إذا كنت تستخدم مجمع JavaScript لتجميع التبعيات وحزم التعليمات البرمجية الخاصة بك، فراجع وثائق المجمع حول كيفية القيام بذلك. بالنسبة إلى webpack، يتم ذلك عادة عبر مجموعة من style-loader الوثائق المتوفرة في style-loader ومعهاcss-loader.

للبدء، قم بتثبيت style-loader و css-loader:

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

داخل الملف المصدر، قم باستيراد atlas.min.css:

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

ثم أضف أدوات التحميل إلى جزء قواعد الوحدة النمطية من تكوين webpack:

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

راجع القسم التالي للحصول على مثال كامل.

إنشاء خريطة في تطبيق node.js

تضمين خريطة في صفحة ويب باستخدام حزمة npm لعنصر تحكم الخريطة.

إنشاء مشروع جديد
```
npm init
```
npm init هو أمر يساعدك على إنشاء ملف package.json لمشروع العقدة. يسألك بعض الأسئلة وينشئ الملف استنادا إلى إجاباتك. يمكنك أيضا استخدام -y أو –yes لتخطي الأسئلة واستخدام القيم الافتراضية. يحتوي ملف package.json على معلومات حول مشروعك، مثل اسمه وإصداره وتبعياته والبرامج النصية وما إلى ذلك.
تثبيت أحدث حزمة التحكم في خرائط azure.
```
npm install azure-maps-control
```

تثبيت webpack وتبعيات التطوير الأخرى.

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

تحديث package.json عن طريق إضافة برنامج نصي جديد ل "build": "webpack". يجب أن يبدو الملف الآن كما يلي:

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

إنشاء ملف تكوين webpack المسمى webpack.config.js في المجلد الجذر للمشروع. قم بتضمين هذه الإعدادات في ملف التكوين.

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

أضف ملف JavaScript جديدا في ./src/js/main.js باستخدام هذه التعليمة البرمجية.

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;

أضف ملف HTML جديدا باسم index.html في المجلد الجذر للمشروع باستخدام هذا المحتوى:

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

يجب أن يحتوي المشروع الآن على الملفات التالية:

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

قم بتشغيل الأمر التالي لإنشاء ملف JavaScript في ./dist/bundle.js
```
npm run build
```
افتح الملف index.html في مستعرض الويب الخاص بك واعرض الخريطة المعروضة. يجب أن تبدو مثل الصورة التالية:

استخدام حزم npm خرائط Azure الأخرى

يقدم خرائط Azure وحدات نمطية أخرى كحزم npm يمكن دمجها في التطبيق الخاص بك. تتضمن هذه الوحدات النمطية ما يلي:

يوضح النموذج التالي كيفية استيراد وحدة نمطية واستخدامها في التطبيق الخاص بك. يستخدم هذا النموذج azure-maps-spatial-io لقراءة سلسلة POINT(-122.34009 47.60995) ك GeoJSON وعرضها على الخريطة باستخدام طبقة فقاعة.

تثبيت حزمة npm.
```
npm install azure-maps-spatial-io
```
ثم استخدم إعلان استيراد لإضافة الوحدة النمطية إلى ملف مصدر:
```
import * as spatial from "azure-maps-spatial-io";
```

استخدم 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;

قد يطرح Webpack 5 أخطاء حول عدم القدرة على حل بعض الوحدات النمطية الأساسية node.js. أضف هذه الإعدادات إلى ملف تكوين webpack لإصلاح المشكلة.
```
module.exports = {
  // ...
  resolve: {
    fallback: { "crypto": false, "worker_threads": false }
  }
};
```