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

مقالة
04/21/2022
قراءة خلال 5 دقائق

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

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

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

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

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

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

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

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

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 قالب الصورة بلون أساسي أزرق مراوغ ولون ثانوي أبيض.

تلميح

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

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

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

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

تلميح

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

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

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

يستخدم marker-arrow النموذج التالي القالب بلون أساسي أحمر ولون ثانوي وردي وقيمة نصية "00".

تلميح

يمكن استخدام قوالب الصور خارج الخريطة أيضا. يقوم 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 ويب SDK. استخدم الدالات الثابتة التالية على atlas مساحة الاسم.

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

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

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

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

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

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

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

علامه

علامة سميكة

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

علامة مسطحة

marker icon

marker-thick icon

marker-circle icon

marker-flat icon

علامة مربع

علامة-مربع-عنقود

علامة السهم

علامة-كرة-دبوس

marker-square icon

marker-square-cluster icon

marker-ball-pin icon

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

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

flag

العلم المثلث

marker-square-rounded icon

marker-square-rounded-cluster icon

مثلث

مثلث سميك

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

مثلث-سهم-يسار

triangle icon

triangle-thick icon

مسدس

سداسي السمك

سداسي مستدير

سداسي مستدير سميك

hexagon icon

hexagon-thick icon

hexagon-rounded icon

hexagon-rounded-thick icon

دبوس

دبوس دائري

مربع مستدير

مدورة مربعة سميكة

pin icon

pin-round icon

rounded-square icon

rounded-square-thick icon

سهم لأعلى

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

سيارة

car icon

قوالب أنماط تعبئة المضلع

مدقق

المدقق بالتناوب

الدوائر

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

checker icon

checker-rotated icon

circles icon

circles-spaced icon

خطوط قطرية

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

خطوط قطرية

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

diagonal-lines-up icon

diagonal-lines-down icon

diagonal-stripes-up icon

diagonal-stripes-down icon

خطوط الشبكة

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

خطوط شبكية دوارة

x-ملء

grid-lines icon

rotated-grid-lines icon

rotated-grid-stripes icon

x-fill icon

متعرج

متعرج عمودي

النقاط

zig-zag icon

zig-zag-vertical icon

dots icon

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

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

اسم الرمز	لون	ثانوي اللون
`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`