إضافة طبقة رمز إلى خريطة

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

الاتصال رمزا إلى مصدر بيانات، واستخدمه لعرض رمز أو نص عند نقطة معينة.

يتم تقديم طبقات الرموز باستخدام WebGL. استخدم طبقة رمز لعرض مجموعات كبيرة من النقاط على الخريطة. بالمقارنة مع علامة HTML ، تعرض طبقة الرمز عددا كبيرا من البيانات النقطية على الخريطة ، مع أداء أفضل. ومع ذلك، لا تدعم طبقة الرموز عناصر CSS وHTML التقليدية للتصميم.

تلميح

ستقوم طبقات الرمز افتراضيا بعرض إحداثيات جميع الأشكال الهندسية في مصدر بيانات. لتقييد الطبقة بحيث تجعل فقط معالم هندسة النقاط تعيين filter خاصية الطبقة إلى ['==', ['geometry-type'], 'Point'] أو ['any', ['==', ['geometry-type'], 'Point'], ['==', ['geometry-type'], 'MultiPoint']] إذا أردت، يمكنك تضمين ميزات MultiPoint كذلك.

يقوم مدير عفريت صور الخرائط بتحميل الصور المخصصة المستخدمة من قبل طبقة الرمز. وهو يدعم تنسيقات الصور التالية:

جي بي جي
PNG
إس في جي
BMP
GIF (بدون رسوم متحركة)

إضافة طبقة رمز

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

يوضح الرمز أدناه ما يجب إضافته إلى الخريطة بعد تحميلها. يعرض هذا النموذج نقطة واحدة على الخريطة باستخدام طبقة رمز.

//Create a data source and add it to the map.
var dataSource = new atlas.source.DataSource();
map.sources.add(dataSource);

//Create a symbol layer to render icons and/or text at points on the map.
var layer = new atlas.layer.SymbolLayer(dataSource);

//Add the layer to the map.
map.layers.add(layer);

//Create a point and add it to the data source.
dataSource.add(new atlas.data.Point([0, 0]));

هناك أربعة أنواع مختلفة من البيانات النقطية التي يمكن إضافتها إلى الخريطة:

هندسة GeoJSON Point - يحتوي هذا الكائن فقط على إحداثيات نقطة ولا شيء آخر. يمكن استخدام فئة المساعد atlas.data.Point لإنشاء هذه الكائنات بسهولة.
هندسة GeoJSON MultiPoint - يحتوي هذا الكائن على إحداثيات نقاط متعددة ولا شيء آخر. يمكن استخدام فئة المساعد atlas.data.MultiPoint لإنشاء هذه الكائنات بسهولة.
ميزة GeoJSON - يتكون هذا الكائن من أي هندسة GeoJSON ومجموعة من الخصائص التي تحتوي على بيانات تعريف مرتبطة بالهندسة. يمكن استخدام فئة المساعد atlas.data.Feature لإنشاء هذه الكائنات بسهولة.
atlas.Shape الفئة مشابهة لميزة GeoJSON. يتكون كلاهما من هندسة GeoJSON ومجموعة من الخصائص التي تحتوي على بيانات تعريف مرتبطة بالهندسة. إذا تمت إضافة كائن GeoJSON إلى مصدر بيانات، فيمكن تقديمه بسهولة في طبقة. ومع ذلك، إذا تم تحديث خاصية الإحداثيات لكائن GeoJSON هذا، فلن يتغير مصدر البيانات والخريطة. ذلك لأنه لا توجد آلية في كائن JSON لتشغيل تحديث. توفر فئة الشكل وظائف لتحديث البيانات التي تحتوي عليها. عند إجراء تغيير، يتم إعلام مصدر البيانات والخريطة وتحديثهما تلقائيا.

ينشئ نموذج التعليمات البرمجية التالي هندسة GeoJSON Point ويمررها إلى atlas.Shape الفصل لتسهيل التحديث. يستخدم مركز الخريطة في البداية لعرض رمز. تتم إضافة حدث نقرة إلى الخريطة بحيث عند تشغيله، يتم استخدام إحداثيات الماوس مع وظيفة الأشكال setCoordinates . يتم تسجيل إحداثيات الماوس في وقت حدث النقر. بعد ذلك، يقوم setCoordinates بتحديث موقع الرمز على الخريطة.

تلميح

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

إضافة أيقونة مخصصة إلى طبقة رمز

يتم تقديم طبقات الرموز باستخدام WebGL. على هذا النحو ، يجب تحميل جميع الموارد ، مثل صور الرموز ، في سياق WebGL. يوضح هذا النموذج كيفية إضافة رمز مخصص إلى موارد الخريطة. ثم يتم استخدام هذا الرمز لعرض البيانات النقطية برمز مخصص على الخريطة. textField تتطلب خاصية طبقة الرمز تحديد تعبير. في هذه الحالة ، نريد عرض خاصية درجة الحرارة. نظرا لأن درجة الحرارة هي رقم ، فيجب تحويلها إلى سلسلة. بالإضافة إلى ذلك ، نريد إلحاق "°F" به. يمكن استخدام تعبير للقيام بهذا التسلسل ؛ ['concat', ['to-string', ['get', 'temperature']], '°F'].

تلميح

توفر خرائط Azure ويب SDK العديد من قوالب الصور القابلة للتخصيص التي يمكنك استخدامها مع طبقة الرمز. لمزيد من المعلومات، راجع مستند كيفية استخدام قوالب الصور .