كيفية استخدام قوالب الصور

مقالة
06/27/2023

يمكن استعمال الصور مع علامات HTML وطبقات مختلفة داخل خرائط Azure web SDK:

يمكن لطبقات الرموز عرض النقاط على الخريطة باستخدام أيقونة الصورة. يمكن أيضا عرض الرموز على طول مسار الخطوط.
يمكن عرض طبقات المضلع مع صورة نمط التعبئة.
يمكن لعلامات HTML عرض النقاط باستعمال الصور وعناصر HTML الأخرى.

من أجل ضمان الأداء الجيد مع الطبقات، حمل الصور في مورد صورة الخريطة قبل العرض. تقوم IconOptions، الخاصة بـ SymbolLayer، بتحميل بعض صور العلامة مسبقا في عدد قليل من الألوان في صورة الخريطة، بطريقة افتراضية. تتوفر صور العلامة هذه والمزيد باعتبارها قوالب SVG. يمكن استخدامها لإنشاء صور بمقاييس مخصصة، أو استخدامها باعتبارها لون أساسي وثانوي للعميل. في المجموع هناك 42 قالب صورة متاحة: 27 رمزا و 15 نمط تعبئة مضلع.

يمكن إضافة قوالب الصور إلى موارد صورة الخريطة باستعمال الدالة map.imageSprite.createFromTemplate. تتيح هذه الدالة بتمرير ما يصل إلى خمس معلما;

createFromTemplate(id: string, templateName: string, color?: string, secondaryColor?: string, scale?: number): Promise<void>

id هو المعرف الفريد الذي تقوم بإنشائه. id يتم التعيين إلى الصورة عند إضافتها إلى sprite صورة الخرائط. استخدم هذا المعرف في الطبقات لتحديد مورد الصورة الذي سيتم عرضه. templateName يحدد قالب الصورة الذي يتعين استخدامه. يعينcolor الخيار اللون الأساسي الخاص بالصورة وتحددsecondaryColor الخيارات اللون الثانوي للصورة. يقومscale الخيار بتغيير الحجم الخاص بقالب الصورة قبل تطبيقه على قالب الصورة. عند تطبيق الصورة على سبوريت الصورة، يتم تحويلها إلى PNG. لضمان العرض السريع، من الأفضل توسيع قالب الصورة قبل إضافته إلى sprite، بدلا من توسيع نطاقه في طبقة.

تقوم هذه الدالة بتحميل الصورة بنحو غير متزامن في sprite الصورة. وبالتالي، فإنه يقوم بإرجاع الوعد الذي يوفر لك الانتظار حتى تكتمل هذه الدالة.

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

map.imageSprite.createFromTemplate('myTemplatedIcon', 'marker-flat', 'teal', '#fff').then(function () {

   //Add a symbol layer that uses the custom created icon.
   map.layers.add(new atlas.layer.SymbolLayer(datasource, null, {
      iconOptions: {
         image: 'myTemplatedIcon'
      }
   }));
});

استعمل قالب صورة مع طبقة رمز

بمجرد تحميل قالب صورة في قالب صورة الخريطة، يمكن عرضه باعتباره رمز في طبقة رمز عن طريق الرجوع إلى معرف مورد الصورة في image خيارiconOptions.

توضح طبقة الرمز مع نموذج قالب الأيقونة المضمن كيفية القيام بذلك عن طريق عرض طبقة رمز باستخدام marker-flat قالب الصورة بلون أساسي ولون ثانوي أبيض، كما هو موضح في لقطة الشاشة التالية.

للحصول على التعليمات البرمجية المصدر لهذه العينة، راجع طبقة الرمز مع نموذج نموذج قالب الأيقونة المضمن.

استخدام قالب صورة على طول مسار الخطوط

بمجرد تحميل القالب الخاص بالصورة في قالب صورة الخريطة، يمكن عرضه على طول مسار خط عن طريق إضافة LineString إلى مصدر بيانات واستخدام طبقة رمز مع خيارlineSpacingومن خلال الرجوع إلى معرف مورد الصورة في image خيار th iconOptions.

توضح طبقة الخط مع قالب الأيقونة المضمن كيفية القيام بذلك. كما يظهر في لقطة الشاشة التالية، فإنه يعرض خطا أحمر على الخريطة ويستخدم طبقة رمز باستخدام car قالب الصورة مع لون أساسي أزرق dodger ولون ثانوي أبيض. للحصول على التعليمات البرمجية المصدر لهذا النموذج، راجع طبقة الخط مع نموذج نموذج قالب الأيقونة المضمن.

تلميح

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

استخدام قالب صورة مع الطبقة المضلعة

بمجرد تحميل قالب صورة في sprite صورة الخريطة، يمكن تقديمه باعتباره نمط تعبئة في طبقة مضلعة عن طريق الرجوع إلى معرف مورد الصورة في fillPattern خيار الطبقة.

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

تلميح

يؤدي تعيين اللون الثانوي لأنماط التعبئة إلى تسهيل رؤية الخريطة الرئيسية وسيظل يوفر النمط الأساسي.

استعمل قالب صورة مع علامة HTML

يمكن استرداد قالب صورة باستخدام الدالة altas.getImageTemplate واستخدامه باعتباره محتوى لعلامة HTML. يمكن تمرير القالب إلى htmlContent خيار العلامة، ثم تخصيصه باستخدام color، secondaryColor،text والخيارات.

توضح علامة HTML مع نموذج قالب الأيقونة المضمن هذا باستخدام القالب marker-arrow بلون أساسي أحمر ولون ثانوي وردي وقيمة نصية "00"، كما هو موضح في لقطة الشاشة التالية. للحصول على التعليمات البرمجية المصدر لهذا النموذج، راجع HTML Marker مع رمز نموذج قالب الأيقونة المضمن.

تلميح

يمكن استعمال قوالب الصور خارج الخريطة أيضا. يقوم getImageTemplate funciton بإرجاع سلسلة SVG التي تشتمل على عناصر نائبة؛ {color}, {secondaryColor}, {scale}, {text}. استبدل القيم الخاصة بالعنصر النائب هذه لإنشاء سلسلة SVG صالحة. يمكنك بعد ذلك إما إضافة سلسلة SVG مباشرة إلى HTML DOM أو تحويلها إلى URI بيانات وإدراجها في علامة الصورة. على سبيل المثال:

//Retrieve an SVG template and replace the placeholder values.
var svg = atlas.getImageTemplate('marker').replace(/{color}/, 'red').replace(/{secondaryColor}/, 'white').replace(/{text}/, '').replace(/{scale}/, 1);

//Convert to data URI for use in image tags.
var dataUri = 'data:image/svg+xml;base64,' + btoa(svg);

إنشاء القوالب المخصصة القابلة لإعادة الاستخدام

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

الاسم	نوع الإرجاع	‏‏الوصف
`addImageTemplate(templateName: string, template: string, override: boolean)`		عملية إضافة قالب صورة SVG مخصص إلى مساحة اسم atlas.
`getImageTemplate(templateName: string, scale?: number)`	سلسلة	عملية استرداد قالب SVG بالاسم.
`getAllImageTemplateNames()`	string[]	عملية استرداد قالب SVG بالاسم.

تدعم القوالب الخاصة بصور SVG قيم العنصر النائب التالية:

Placeholder	‏‏الوصف
`{color}`	اللون الرئيسي.
`{secondaryColor}`	اللون الثانوي.
`{scale}`	يتم تحويل صورة SVG إلى صورة png عند إضافتها إلى الصورة الخاصة بخريطة sprite. يمكن استخدام هذا العنصر النائب لتوسيع نطاق قالب قبل تحويله للتأكد من عرضه بوضوح.
`{text}`	موقع عرض النص عند استعماله مع HTML Marker.

يوضح نموذج Add custom icon template to atlas namespace كيفية أخذ قالب SVG وإضافته إلى خرائط Azure web SDK كقالب أيقونة قابل لإعادة الاستخدام، كما هو موضح في لقطة الشاشة التالية. للحصول على التعليمات البرمجية المصدر لهذا النموذج، راجع إضافة قالب أيقونة مخصص إلى نموذج التعليمات البرمجية لمساحة اسم أطلس.

القائمة الخاصة بقوالب الصور

يسرد هذا الجدول كافة قوالب الصور المتوفرة حاليا داخل خرائط Azure web SDK. يوجد اسم القالب فوق كل صورة. بطريقة افتراضية، يكون اللون الأساسي أزرق اللون واللون الثانوي أبيض. لتسهيل رؤية اللون الثانوي على الخلفية البيضاء، يتم تعيين اللون الثانوي على اللون الأسود في الصور التالية.

القوالب الخاصة بأيقونات الرموز

علامة

سمك العلامة

علامة دائرة

marker-flat

أيقونة العلامة

أيقونة سمك العلامة

أيقونة علامة الدائرة

أيقونة العلامة المسطحة

المربع الخاص بالعلامة

نظام مجموعة علامة مربعة

السهم الخاص بالعلامة

تثبيت علامة الكره

أيقونة علامة المربع

أيقونة علامة المربع المستديرة

أيقونة تثبيت علامة الكرة

marker-square-rounded

marker-square-rounded-cluster

flag

المثلث الخاص بالعلم

علامة مستديرة مربعة الشكل

علامة مجموعة مربعة مستديرة

مثلث

المثلث السميك

مثلث-السهم الأعلى

مثلث السهم إلى اليسار

رمز المثلث

رمز المثلث السميك

سداسي الزوايا

hexagon-thick

سداسية مقربة

سداسية- دائرية سميكة

أيقونة سداسية

أيقونة سداسية سميكة

أيقونة مستديرة سداسية

أيقونة سميكة دائرية الشكل

التثبيت

تثبيت دائري

مربع مستدير

دائرية مربعة سميكة

أيقونة تثبيت

أيقونة تثبيت مستديرة

أيقونة مربعة مستديرة

رمز مستدير-مربع-سميك

السهم لأعلى

سهم لأعلى-رقيقة

car

أيقونة السيارة

قوالب نماذج التعبئة المضلعة

المدقق

المدقق المستدير

الدوائر

الدوائر المتباعدة

أيقونة المدقق

رمز تدوير المدقق

أيقونة الدوائر

رمز تباعد الدوائر

diagonal-lines-up

diagonal-lines-down

diagonal-stripes-up

diagonal-stripes-down

أيقونة الخطوط القطرية

أيقونة خطوط قطرية لأسفل

رمز الخطوط القطرية إلى أعلى

رمز الخطوط القطرية لأسفل

خطوط الشبكة

خطوط الشبكة المستديرة

خطوط الشبكة المدارة

x-fill

أيقونة خطوط الشبكة

استدارة خطوط الشبكة

استدارة الشبكة خطوط الأيقونة

أيقونة x-fill

المتعرج

zig-zag-vertical

النقاط

أيقونة متعرجة

رمز متعرج عمودي

رمز النقاط

أيقونات الصور التي حملتها مسبقا

تحمل الخريطة مسبقا مجموعة من الرموز في العفريت صورة الخرائط باستخدام marker، pinو، pin-round القوالب. يتم سرد أسماء الأيقونات وقيم الألوان الخاصة بها في الجدول التالي.

الاسم الخاص بالأيقونة	color	الألوان الثانوية
`marker-black`	`#231f20`	`#ffffff`
`marker-blue`	`#1a73aa`	`#ffffff`
`marker-darkblue`	`#003963`	`#ffffff`
`marker-red`	`#ef4c4c`	`#ffffff`
`marker-yellow`	`#f2c851`	`#ffffff`
`pin-blue`	`#2072b8`	`#ffffff`
`pin-darkblue`	`#003963`	`#ffffff`
`pin-red`	`#ef4c4c`	`#ffffff`
`pin-round-blue`	`#2072b8`	`#ffffff`
`pin-round-darkblue`	`#003963`	`#ffffff`
`pin-round-red`	`#ef4c4c`	`#ffffff`