تغيير نمط الخريطة
يدعم عنصر تحكم الخريطة العديد من خيارات نمط الخريطة المختلفة وأنماط الخريطة الأساسية. يمكن تعيين كافة الأنماط عند تهيئة عنصر تحكم الخريطة. أو يمكنك تعيين الأنماط باستخدام وظيفة عنصر تحكم الخريطة setStyle . توضح لك هذه المقالة كيفية استخدام خيارات النمط هذه لتخصيص مظهر الخريطة. ستتعلم أيضا كيفية تنفيذ عنصر تحكم منتقي الأنماط في خريطتك. يسمح عنصر تحكم منتقي الأنماط للمستخدم بالتبديل بين الأنماط الأساسية المختلفة.
تعيين خيارات نمط الخريطة
يمكن تعيين خيارات النمط أثناء تهيئة التحكم في الويب. أو يمكنك تحديث خيارات النمط عن طريق استدعاء وظيفة عنصر تحكم الخريطة setStyle . للاطلاع على جميع خيارات النمط المتوفرة، راجع خيارات النمط.
//Set the style options when creating the map.
var map = new atlas.Map('map', {
renderWorldCopies: false,
showBuildingModels: false,
showLogo: true,
showFeedbackLink: true,
style: 'road'
//Additional map options.
};
//Update the style options at anytime using `setStyle` function.
map.setStyle({
renderWorldCopies: true,
showBuildingModels: true,
showLogo: false,
showFeedbackLink: false
});
توضح الأداة التالية كيف تغير خيارات النمط المختلفة كيفية عرض الخريطة. لرؤية مباني 3D ، قم بالتكبير بالقرب من مدينة كبرى.
تعيين نمط خريطة أساسية
يمكنك أيضا تهيئة عنصر تحكم الخريطة باستخدام أحد أنماط الخريطة الأساسية المتوفرة في Web SDK. يمكنك بعد ذلك استخدام setStyle الوظيفة لتحديث النمط الأساسي بنمط خريطة مختلف.
تعيين نمط خريطة أساسية عند التهيئة
يمكن تعيين الأنماط الأساسية لعنصر تحكم الخريطة أثناء التهيئة. في التعليمة البرمجية التالية، style يتم تعيين خيار عنصر تحكم الخريطة إلى grayscale_dark نمط الخريطة الأساسية.
var map = new atlas.Map('map', {
style: 'grayscale_dark',
//Additional map options
);
تحديث نمط الخريطة الأساسية
يمكن تحديث نمط الخريطة الأساسية باستخدام setStyle الوظيفة وتعيين style الخيار إما للتغيير إلى نمط خريطة أساس مختلف أو إضافة خيارات نمط إضافية.
map.setStyle({ style: 'satellite' });
في التعليمة البرمجية التالية، بعد تحميل مثيل خريطة، يتم تحديث نمط الخريطة من grayscale_dark إلى satellite استخدام الدالة setStyle .
إضافة عنصر تحكم منتقي النمط
يوفر عنصر تحكم منتقي الأنماط زرا سهل الاستخدام مع لوحة منبثقة يمكن استخدامها من قبل المستخدم النهائي للتبديل بين الأنماط الأساسية.
يحتوي منتقي النمط على خيارين مختلفين للتخطيط: icon و list. أيضا ، يسمح لك منتقي النمط باختيار خيارين مختلفين للتحكم في style منتقي النمط: light و dark. في هذا المثال، يستخدم منتقي الأنماط icon التخطيط ويعرض قائمة محددة من أنماط الخريطة الأساسية في شكل أيقونات. يتضمن منتقي عنصر تحكم النمط مجموعة الأنماط الأساسية التالية: ["road", "grayscale_light", "grayscale_dark", "night", "road_shaded_relief"]. لمزيد من المعلومات حول خيارات التحكم في منتقي الأنماط، راجع خيارات التحكم في الأنماط.
توضح الصورة أدناه عنصر تحكم منتقي النمط المعروض في icon التخطيط.
توضح الصورة أدناه عنصر تحكم منتقي النمط المعروض في list التخطيط.
هام
بشكل افتراضي، يسرد عنصر تحكم منتقي الأنماط جميع الأنماط المتوفرة ضمن طبقة تسعير S0 خرائط Azure. إذا كنت تريد تقليل عدد الأنماط في هذه القائمة، فقم بتمرير صفيف من الأنماط التي تريد ظهورها في القائمة إلى mapStyle خيار منتقي الأنماط. إذا كنت تستخدم طبقة تسعير Gen 1 (S1) أو Gen 2 وتريد إظهار جميع الأنماط المتاحة، فقم بتعيين mapStyles خيار منتقي الأنماط إلى "all".
توضح لك التعليمة البرمجية التالية كيفية تجاوز قائمة الأنماط الأساسية الافتراضية mapStyles . في هذا المثال، نقوم بتعيين الخيار لسرد الأنماط mapStyles الأساسية التي نريد عرضها بواسطة عنصر تحكم منتقي الأنماط.
الخطوات التالية
لمعرفة المزيد حول الفئات والأساليب المستخدمة في هذه المقالة:
راجع المقالات التالية للحصول على مزيد من نماذج التعليمات البرمجية لإضافتها إلى خرائطك: