استخدام وحدة أدوات الرسم

مقالة
06/30/2023

توفر عدة تطوير برامج الويب في خرائط Azure الوحدة النمطية لأدوات الرسم. تسهل هذه الوحدة النمطية رسم الأشكال وتحريرها على المخطط باستخدام جهاز إدخال مثل الماوس أو الشاشة باللمس. الفئة الأساسية لهذه الوحدة النمطية هي مدير الرسم. يوفر مدير الرسم جميع الإمكانات اللازمة لرسم الأشكال وتحريرها على المخطط. يمكن استخدامه مباشرةً، ويتم دمجه مع واجهة مستخدم شريط أدوات مخصصة. يمكنك أيضا استخدام فئة DrawingToolbar المضمنة.

تحميل الوحدة النمطية لأدوات الرسم في صفحة ويب

إنشاء ملف HTML جديد وتنفيذ المخطط كالمعتاد.
تحميل الوحدة النمطية لأدوات الرسم في خرائط Azure. يمكنك تحميله بإحدى طريقتين:
- استخدم إصدار شبكة تسليم المحتوى من Azure المستضاف عمومياً من الوحدة النمطية لخدمات خرائط Azure. أضف مرجعا إلى JavaScript وCSS في <head> عنصر الملف:
```
<link rel="stylesheet" href="https://atlas.microsoft.com/sdk/javascript/drawing/1/atlas-drawing.min.css" type="text/css" />
<script src="https://atlas.microsoft.com/sdk/javascript/drawing/1/atlas-drawing.min.js"></script>
```
- أو يمكنك تحميل الوحدة النمطية لأدوات الرسم في التعليمة البرمجية للمصدر لعدة تطوير برامج الويب في خرائط Azure محليًا باستخدام حزمة npm azure-maps-rest، ثم استضافها مع تطبيقك. تتضمن هذه الحزمة أيضًا تعريفات TypeScript. استخدم هذا الأمر:
  
  npm install azure-maps-drawing-tools
  
  ثم قم باستيراد JavaScript في ملف مصدر:
```
import * as drawing from "azure-maps-drawing-tools";
```
  ستحتاج أيضا إلى تضمين CSS لعرض عناصر التحكم المختلفة بشكل صحيح. إذا كنت تستخدم مجمع JavaScript لتجميع التبعيات وحزم التعليمات البرمجية الخاصة بك، فراجع وثائق المجمع الخاصة بك حول كيفية القيام بذلك. بالنسبة إلى Webpack، يتم ذلك عادة عبر مزيج من style-loader الوثائق المتوفرة في محمل النمط ومعهاcss-loader.
  
  للبدء، قم بتثبيت style-loader وcss-loader:
```
npm install --save-dev style-loader css-loader
```
  داخل الملف المصدر، قم باستيراد atlas-drawing.min.css:
```
import "azure-maps-drawing-tools/dist/atlas-drawing.min.css";
```
  ثم أضف أدوات التحميل إلى جزء قواعد الوحدة النمطية من تكوين Webpack:
```
module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: ["style-loader", "css-loader"]
      }
    ]
  }
};
```
  لمعرفة المزيد، راجع كيفية استخدام حزمة npm للتحكم في خريطة خرائط Azure.

استخدام مدير الرسم مباشرةً

بمجرد تحميل الوحدة النمطية لأدوات الرسم في تطبيقك، يمكنك تمكين إمكانات الرسم والتحرير باستخدام مدير الرسم. يمكنك تحديد خيارات لمدير الرسم أثناء إنشاء مثيل له أو استخدام الدالة drawingManager.setOptions() بدلاً من ذلك.

ضبط وضع الرسم

تنشئ التعليمة البرمجية التالية مثيلاً لمدير الرسم وتضبط خيار وضع الرسم.

//Create an instance of the drawing manager and set drawing mode.
drawingManager = new atlas.drawing.DrawingManager(map,{
    mode: "draw-polygon"
});

الصورة التالية هي مثال على وضع الرسم ل DrawingManager. حدد أي مكان على الخريطة لبدء رسم مضلع.

لقطة شاشة لخريطة تعرض حديقة مركزية في مدينة نيويورك حيث يظهر مدير الرسم بخط الرسم.

ضبط نوع التفاعل

يدعم مدير الرسم ثلاث طرق مختلفة للتفاعل مع المخطط لرسم الأشكال.

click - تتم إضافة الإحداثيات عند النقر بالماوس أو باللمس.
freehand - تتم إضافة الإحداثيات عند سحب الماوس أو باللمس على المخطط.
hybrid - تتم إضافة الإحداثيات عند النقر بالماوس أو باللمس أو سحبهما.

تُمكّن التعليمة البرمجية التالية وضع الرسم المضلع وتحدد نوع تفاعل الرسم freehand الذي يجب أن يلتزم به مدير الرسم.

//Create an instance of the drawing manager and set drawing mode.
drawingManager = new atlas.drawing.DrawingManager(map,{
    mode: "draw-polygon",
    interactionType: "freehand"
});

تخصيص خيارات الرسم

أظهرت الأمثلة السابقة كيفية تخصيص خيارات الرسم أثناء إنشاء مثيل لـ "مدير الرسم". يمكنك أيضاً ضبط خيارات مدير الرسم باستخدام الدالة drawingManager.setOptions().

يمكن استخدام خيارات إدارة الرسم لاختبار تخصيص جميع الخيارات لمدير الرسم باستخدام الدالة setOptions . للحصول على التعليمات البرمجية المصدر لهذا النموذج، راجع التعليمات البرمجية المصدر لخيارات إدارة الرسم.

لقطة شاشة لخريطة سياتل مع لوحة على اليسار تعرض خيارات مدير الرسم التي يمكن تحديدها لمشاهدة التأثيرات التي يقومون بها على الخريطة.

وضع شكل في وضع التحرير

ضع شكلاً موجوداً برمجياً في وضع التحرير عن طريق تمريره إلى دالة مدير الرسم edit. إذا كان الشكل عبارة عن ميزة GeoJSON، فقم بتضمينها داخل الفئة atls.Shape قبل تمريرها.

لأخذ شكل برمجياً من وضع التحرير، قم بضبط وضع مديري الرسم إلى idle.

//If you are starting with a GeoJSON feature, wrap it with the atlas.Shape class.
var feature = { 
    "type": "Feature",
    "geometry": {
        "type": "Point",
        "coordinates": [0,0]
        },
    "properties":  {}
};

var shape = new atlas.Shape(feature);

//Pass the shape into the edit function of the drawing manager.
drawingManager.edit(shape);

//Later, to programmatically take shape out of edit mode, set mode to idle. 
drawingManager.setOptions({ mode: 'idle' });

ملاحظة

عند تمرير شكل إلى الدالة edit لمدير الرسم، تتم إضافته إلى مصدر البيانات الذي يحتفظ به مدير الرسم. إذا كان الشكل مسبقاً في مصدر بيانات آخر، فستتم إزالته من مصدر البيانات هذا.

لإضافة أشكال إلى مدير الرسم حتى يتمكن المستخدم من العرض والتحرير، ولكن لا يريد وضعها برمجياً في وضع التحرير، قم باسترداد مصدر البيانات من مدير الرسم وأضف الأشكال إليه.

//The shape(s) you want to add to the drawing manager so 
var shape = new atlas.Shape(feature);

//Retrieve the data source from the drawing manager.
var source = drawingManager.getSource();

//Add your shape.
source.add(shape);

//Alternatively, load in a GeoJSON feed using the sources importDataFromUrl function.
source.importDataFromUrl('yourFeatures.json');

يتضمن الجدول التالي نوع التحرير المدعوم من قِبل أنواع مختلفة من ميزات الشكل.