مشاركة عبر

أفضل ممارسات خرائط Azure Web SDK

  • مقالة

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

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

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

أفضل الممارسات الأمنية

لمزيد من المعلومات حول أفضل ممارسات الأمان، راجع أفضل ممارسات المصادقة والتخويل.

استخدام أحدث إصدارات خرائط Azure

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

إذا كانت الاستضافة الذاتية خرائط Azure Web SDK عبر الوحدة النمطية npm، فتأكد من استخدام رمز علامة الإقتران (^) بالاشتراك مع رقم إصدار حزمة npm خرائط Azure في الملف بحيث package.json يشير إلى أحدث إصدار ثانوي.

"dependencies": {
  "azure-maps-control": "^3.0.0"
}

تلميح

استخدم دائما أحدث إصدار من npm خرائط Azure Control. لمزيد من المعلومات، راجع azure-maps-control في وثائق npm.

تحسين تحميل الخريطة الأولية

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

شاهد الحدث الجاهز للخرائط

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

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

تحميل Lazy خرائط Azure Web SDK

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

يوضح نموذج تحميل خريطة التعليمات البرمجية كسول كيفية تأخير تحميل خرائط Azure Web SDK حتى يتم الضغط على زر. للحصول على التعليمات البرمجية المصدر، راجع تحميل نموذج التعليمات البرمجية للخريطة.

أضف عنصرًا نائبًا للخريطة

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

تعيين نمط الخريطة الأولية وخيارات الكاميرا عند التهيئة

غالبًا ما تريد التطبيقات تحميل الخريطة إلى موقع أو نمط معين. في بعض الأحيان ينتظر المطورون حتى يتم تحميل الخريطة (أو انتظر ready الحدث)، ثم استخدم setCamera وظائف الخريطة أو setStyle . غالبًا ما يستغرق هذا وقتًا أطول للوصول إلى طريقة عرض الخريطة الأولية المطلوبة حيث ينتهي الأمر بتحميل العديد من الموارد بشكل افتراضي قبل تحميل الموارد المطلوبة لعرض الخريطة المطلوب. تتمثل الطريقة الأفضل في تمرير كاميرا الخريطة المطلوبة وخيارات النمط إلى الخريطة عند تهيئتها.

تحسين مصادر البيانات

يحتوي Web SDK على مصدري بيانات،

  • مصدر GeoJSON: DataSource تدير الفئة بيانات الموقع الأولية بتنسيق GeoJSON محليا. جيد بالنسبة إلى مجموعات البيانات الصغيرة والمتوسطة (ما يزيد على مئات الآلاف من الميزات).
  • مصدر تجانب المتجهات: VectorTileSource تقوم الفئة بتحميل البيانات المنسقة كلوحات متجهات لعرض الخريطة الحالي، استنادا إلى نظام تجانب الخرائط. مثالية لمجموعات البيانات الكبيرة إلى الضخمة (الملايين أو المليارات من الميزات).

استخدام الحلول المستندة إلى التجانب لمجموعات البيانات الكبيرة

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

يسترد النظام الأساسي خرائط Azure Creator البيانات بتنسيق تجانب المتجهات. يمكن أن تستخدم تنسيقات البيانات الأخرى أدوات مثل Tippecanoe. لمزيد من المعلومات حول العمل مع تجانبات المتجهات، راجع Mapbox awesome-vector-tiles readme في GitHub.

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

لمزيد من المعلومات حول مصادر البيانات، راجع إنشاء مصدر بيانات.

دمج مجموعات بيانات متعددة في مصدر تجانب متجه واحد

كلما قلت مصادر البيانات التي يجب أن تديرها الخريطة، كلما كان من الأسرع معالجة كافة المعالم التي سيتم عرضها. على وجه الخصوص، عندما يتعلق الأمر بمصادر التجانب، يؤدي الجمع بين مصدري تجانب متجهين معا إلى خفض عدد طلبات HTTP لاسترداد الإطارات المتجانبة إلى النصف، وسيكون إجمالي كمية البيانات أصغر قليلا نظرا لوجود رأس ملف واحد فقط.

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

تقليل عدد تحديثات اللوحة بسبب تحديثات البيانات

هناك عدة طرق يمكن من خلالها إضافة البيانات في DataSource فئة أو تحديثها. تعرض القائمة التالية الطرق المختلفة وبعض الاعتبارات لضمان الأداء الجيد.

  • يمكن استخدام دالة مصادر add البيانات لإضافة ميزة واحدة أو أكثر إلى مصدر بيانات. في كل مرة تسمى هذه الدالة تقوم بتشغيل تحديث لوحة الخريطة. إذا أضفت العديد من الميزات، فقم بدمجها في صفيف أو مجموعة ميزات وتمريرها إلى هذه الدالة مرة واحدة، بدلاً من تكرارها عبر مجموعة بيانات واستدعاء هذه الدالة لكل ميزة.
  • يمكن استخدام دالة مصادر setShapes البيانات للكتابة فوق كافة الأشكال في مصدر بيانات. تحت غطاء محرك السيارة، فإنه يجمع بين مصادر clear البيانات والوظائف add معا، ويحدث لوحة خريطة واحدة بدلا من اثنين، وهو أسرع. تأكد من استخدام هذه الدالة عندما تريد تحديث جميع البيانات في مصدر بيانات.
  • يمكن استخدام وظيفة مصادر importDataFromUrl البيانات لتحميل ملف GeoJSON عبر عنوان URL في مصدر بيانات. بمجرد تنزيل البيانات، يتم تمريرها إلى وظيفة مصادر add البيانات. إذا كان ملف GeoJSON مستضافًا على مجال مختلف، فتأكد من أن المجال الآخر يدعم طلبات المجالات المشتركة (CORs). إذا لم تفكر في نسخ البيانات إلى ملف محلي على مجالك أو إنشاء خدمة وكيل تم تمكين CORs عليها. إذا كان الملف كبيرًا، ففكر في تحويله إلى مصدر تجانب متجه.
  • إذا كانت الميزات ملتفة Shape مع الفئة، addPropertysetCoordinatesفإن وظائف الشكل و و جميعها setProperties تؤدي إلى تحديث في مصدر البيانات وتحديث لوحة الخريطة. يتم التفاف جميع الميزات التي تم إرجاعها بواسطة مصادر getShapes البيانات والدالات getShapeById تلقائيًا مع Shape الفئة. إذا كنت تريد تحديث عدة أشكال، فمن الأسرع تحويلها إلى JSON باستخدام دالة مصادر toJson البيانات، وتحرير GeoJSON، ثم تمرير هذه البيانات إلى دالة مصادر setShapes البيانات.

تجنب استدعاء دالة واضحة لمصادر البيانات دون داع

يؤدي استدعاء الدالة الواضحة للفئة DataSource إلى تحديث لوحة الخريطة. إذا تم استدعاء الدالة clear عدة مرات في صف، يمكن أن يحدث تأخير في أثناء انتظار الخريطة لكل تحديث.

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

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

إزالة الميزات والخصائص غير المستخدمة

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

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

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

بالإضافة إلى ذلك، يمكن أن يؤدي تقليل عدد الأرقام الهامة في إحداثيات الميزات أيضًا إلى تقليل حجم البيانات بشكل كبير. ليس من غير المألوف أن تحتوي الإحداثيات على 12 منزلا عشريا أو أكثر؛ ومع ذلك، تبلغ دقة ستة منازل عشرية حوالي 0.1 متر، والتي غالبا ما تكون أكثر دقة من الموقع الذي يمثله الإحداثيات (يوصى بستة منازل عشرية عند العمل مع بيانات الموقع الصغيرة مثل تخطيطات المباني الداخلية). من المحتمل أن لا يحدث وجود أكثر من ستة منازل عشرية أي فرق في كيفية عرض البيانات ويتطلب من المستخدم تنزيل المزيد من البيانات دون أي فائدة إضافية.

فيما يلي قائمة بالأدوات المفيدة للعمل مع بيانات GeoJSON.

استخدام مصدر بيانات منفصلاً لتغيير البيانات بسرعة

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

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

ضبط خيارات المخزن المؤقت والتسامح في مصادر بيانات GeoJSON

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

DataSource تحتوي الفئة أيضًا على خيار tolerance يستخدم مع خوارزمية التبسيط Douglas-Peucker عند تقليل دقة الهندسة لأغراض العرض. تؤدي زيادة قيمة التسامح هذه إلى تقليل دقة الهندسة وتحسين الأداء بدوره. قم بتعديل هذا الخيار للحصول على المزيج الصحيح من دقة الهندسة والأداء لمجموعة البيانات الخاصة بك.

تعيين خيار الحد الأقصى للتكبير/التصغير لمصادر بيانات GeoJSON

DataSource تحول الفئة بيانات الموقع الخام إلى تجانبات متجهات محلية للعرض في أثناء التنقل. بشكل افتراضي، يقوم بذلك حتى مستوى التكبير/التصغير 18، وعند هذه النقطة، عند التكبير بشكل أقرب، فإنه يقوم بأخذ عينات من البيانات من الإطارات المتجانبة التي تم إنشاؤها لمستوى التكبير/التصغير 18. يعمل هذا بشكل جيد لمعظم مجموعات البيانات التي تحتاج إلى دقة عالية عند التكبير في هذه المستويات. ومع ذلك، عند العمل مع مجموعات البيانات التي من المرجح أن يتم عرضها عند تصغيرها بشكل أكبر، مثل عند عرض مضلعات الولاية أو المقاطعة، يؤدي تعيين minZoom خيار مصدر البيانات إلى قيمة أصغر مثل 12 تقليل حساب المقدار وإنشاء التجانب المحلي الذي يحدث والذاكرة المستخدمة من قبل مصدر البيانات وزيادة الأداء.

تصغير استجابة GeoJSON

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

الوصول إلى GeoJSON الخام باستخدام عنوان URL

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

تحسين طبقات العرض

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

إنشاء طبقات مرة واحدة وإعادة استخدامها

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

ضع في اعتبارك طبقة الفقاعة فوق طبقة الرمز

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

استخدام علامات HTML والنوافذ المنبثقة باعتدال

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

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

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

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

الجمع بين الطبقات

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

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

  • تقسيم البيانات إلى مصدري بيانات استنادًا isHealthy إلى القيمة وإرفاق طبقة فقاعية بخيار لون مشفر مضمن لكل مصدر بيانات.
  • ضع جميع البيانات في مصدر بيانات واحد وأنشئ طبقتين فقاعيتين مع خيار ألوان مرمزة بشفرة مضمنة وعامل تصفية استنادًا إلى الخاصية isHealthy.
  • ضع جميع البيانات في مصدر بيانات واحد، وأنشئ طبقة فقاعة واحدة مع case تعبير نمط لخيار اللون استنادًا إلى الخاصية isHealthy. فيما يلي نموذج التعليمات البرمجية الذي يوضح هذا.
var layer = new atlas.layer.BubbleLayer(source, null, {
    color: [
        'case',

        //Get the 'isHealthy' property from the feature.
        ['get', 'isHealthy'],

        //If true, make the color 'green'. 
        'green',

        //If false, make the color red.
        'red'
    ]
});

إنشاء حركات طبقة رموز سلسة

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

  • allowOverlap - يحدد ما إذا كان الرمز مرئيا عند تصادمه مع رموز أخرى.
  • ignorePlacement - يحدد ما إذا كان يسمح للرموز الأخرى بالتصادم مع الرمز.

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

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

لقطة شاشة لخريطة العالم مع رمز يدور في دائرة، توضح كيفية تحريك موضع رمز على الخريطة عن طريق تحديث الإحداثيات.

تحديد نطاق مستوى التكبير/التصغير

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

  • إذا كانت البيانات واردة من مصدر تجانب متجه، فغالبًا ما تتوفر طبقات المصدر لمختلف أنواع البيانات فقط من خلال مجموعة من مستويات التكبير/التصغير.
  • إذا كنت تستخدم طبقة تجانب لا تحتوي على لوحات لجميع مستويات التكبير/التصغير من 0 إلى 24 وتريد عرضها فقط على المستويات التي تحتوي على لوحات، وعدم محاولة ملء الإطارات المتجانبة المفقودة بلوحات من مستويات التكبير/التصغير الأخرى.
  • إذا كنت تريد فقط عرض طبقة على مستويات تكبير/تصغير معينة. تحتوي جميع الطبقات على minZoom خيار و maxZoom حيث يتم عرض الطبقة عندما تكون بين مستويات التكبير/التصغير هذه استنادا إلى المنطق maxZoom > zoom >= minZoom.

مثال

//Only render this layer between zoom levels 1 and 9. 
var layer = new atlas.layer.BubbleLayer(dataSource, null, {
    minZoom: 1,
    maxZoom: 10
});

تحديد حدود طبقة التجانب ونطاق التكبير/التصغير المصدر

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

مثال

var tileLayer = new atlas.layer.TileLayer({
    tileUrl: 'myTileServer/{z}/{y}/{x}.png',
    bounds: [-101.065, 14.01, -80.538, 35.176],
    minSourceZoom: 1,
    maxSourceZoom: 10
});

استخدام نمط خريطة فارغ عندما لا تكون الخريطة الأساسية مرئية

إذا كانت طبقة ممتدة على الخريطة تغطي الخريطة الأساسية بالكامل، ففكر في تعيين نمط الخريطة إلى blank أو blank_accessible بحيث لا يتم عرض الخريطة الأساسية. السيناريو الشائع للقيام بذلك هو عند تراكب لوحة الكرة الأرضية الكاملة في ليست له شفافية أو منطقة شفافة أعلى الخريطة الأساسية.

تحريك طبقات الصور أو الإطارات المتجانبة بسلاسة

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

منطق الكشف عن تصادم طبقة القرص الرمز

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

مجموعات بيانات النقطة الكبيرة للمجموعة

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

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

استخدام خرائط التمثيل اللوني المتفاوت المسافات المرجحة

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

var layer = new atlas.layer.HeatMapLayer(source, null, {
   weight: ['get', 'point_count']
});

لمزيد من المعلومات، راجع التجميع وطبقة خرائط التمثيل اللوني.

الحفاظ على موارد الصور صغيرة

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

تحسين التعبيرات

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

تقليل تعقيد عوامل التصفية

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

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

تأكد من أن التعبيرات لا تنتج أخطاء

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

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

var layer = new atlas.layer.BubbleLayer(source, null, {
    color: ['get', 'myColor']
});

تعمل التعليمات البرمجية أعلاه بشكل جيد إذا كانت جميع الميزات في مصدر البيانات تحتوي على myColor خاصية، وقيمة هذه الخاصية هي لون. قد لا تكون هذه مشكلة إذا كان لديك تحكم كامل في البيانات في مصدر البيانات وتعرف أن بعض الميزات لها لون صالح في خاصية myColor . ومع ذلك، لجعل هذه التعليمة البرمجية آمنة من الأخطاء، case يمكن استخدام تعبير مع has التعبير للتحقق من أن الميزة تحتوي على الخاصية myColor. إذا كان الأمر كذلك، to-color فيمكن عندئذٍ استخدام تعبير النوع لمحاولة تحويل قيمة هذه الخاصية إلى لون. إذا كان اللون غير صالح، يمكن استخدام لون احتياطي. توضح التعليمات البرمجية التالية كيفية القيام بذلك وتعيين اللون الاحتياطي إلى اللون الأخضر.

var layer = new atlas.layer.BubbleLayer(source, null, {
    color: [
        'case',

        //Check to see if the feature has a 'myColor' property.
        ['has', 'myColor'],

        //If true, try validating that 'myColor' value is a color, or fallback to 'green'. 
        ['to-color', ['get', 'myColor'], 'green'],

        //If false, return a fallback value.
        'green'
    ]
});

ترتيب التعبيرات المنطقية من الأكثر تحديدًا إلى الأقل تحديدًا

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

تبسيط التعبيرات

يمكن أن تكون التعبيرات قوية ومعقدة في بعض الأحيان. يتم تقييم التعبيرات الأقل تعقيدا بشكل أسرع. على سبيل المثال، إذا كانت هناك حاجة إلى مقارنة بسيطة، فإن تعبير مثل ['==', ['get', 'category'], 'restaurant'] سيكون أفضل من استخدام تعبير مطابقة مثل ['match', ['get', 'category'], 'restaurant', true, false]. في هذه الحالة، إذا كانت الخاصية التي يتم التحقق منها قيمة منطقية get، فسيكون التعبير أبسط ['get','isRestaurant'].

استكشاف أخطاء SDK على الويب وإصلاحها

فيما يلي بعض النصائح لتصحيح بعض المشكلات الشائعة التي تمت مواجهتها عند التطوير باستخدام خرائط Azure Web SDK.

لماذا لا يتم عرض الخريطة عند تحميل عنصر تحكم الويب؟

أشياء للتحقق:

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

تظهر كل بياناتي على الجانب الآخر من العالم، ماذا يحدث؟

الإحداثيات، يشار إليها أيضًا باسم المواضع، في خرائط Azure SDKs تتماشى مع التنسيق القياسي للصناعة الجغرافية المكانية من [longitude, latitude]. هذا التنسيق نفسه هو أيضًا كيفية تعريف الإحداثيات في مخطط GeoJSON؛ البيانات الأساسية المنسقة المستخدمة داخل خرائط Azure SDKs. إذا كانت بياناتك تظهر على الجانب الآخر من العالم، فمن المرجح أن يكون ذلك بسبب عكس قيم خط الطول وخط العرض في معلومات الإحداثيات/الموضع.

لماذا تظهر علامات HTML في المكان الخطأ في عنصر تحكم الويب؟

أشياء للتحقق:

  • إذا كنت تستخدم محتوى مخصصًا للعلامة، فتأكد من صحة الخيارين anchor وpixelOffset. بشكل افتراضي، تتم محاذاة أسفل وسط المحتوى مع الموضع على الخريطة.
  • تأكد من تحميل ملف CSS خرائط Azure.
  • افحص عنصر DOM لعلامة HTML لمعرفة ما إذا كان أي CSS من التطبيق الخاص بك إلحاق نفسه بالعلامة ويؤثر على موضعه.

لماذا تظهر الأيقونات أو النص في طبقة الرمز في المكان الخطأ؟

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

إذا كان الرمز في غير مكانه إلا عندما تكون الخريطة مائلة/مائلة، فتحقق من pitchAlignment الخيار. بشكل افتراضي، تظل الرموز مستقيمة في منفذ عرض الخرائط عند تحريك الخريطة أو إمالتها. ومع ذلك، اعتمادا على السيناريو الخاص بك، قد يكون من المستحسن تأمين الرمز على عرض الخريطة عن طريق تعيين pitchAlignment الخيار إلى map.

لماذا لا تظهر أي من بياناتي على الخريطة؟

أشياء للتحقق:

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

هل يمكنني استخدام خرائط Azure Web SDK في iframe آلية تحديد الوصول؟

نعم.

الحصول على الدعم

فيما يلي الطرق المختلفة للحصول على دعم خرائط Azure اعتمادًا على المشكلة التي تواجهها.

كيف أعمل الإبلاغ عن مشكلة في البيانات أو مشكلة في عنوان؟

الإبلاغ عن المشكلات باستخدام موقع الملاحظات خرائط Azure. للحصول على إرشادات مفصلة حول الإبلاغ عن مشكلات البيانات، راجع تقديم ملاحظات حول البيانات إلى خرائط Azure.

إشعار

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

كيف أعمل الإبلاغ عن خطأ في خدمة أو واجهة برمجة تطبيقات؟

الإبلاغ عن المشكلات في صفحة المساعدة + الدعم في Azure عن طريق تحديد الزر إنشاء طلب دعم.

من أين يمكنني الحصول على المساعدة التقنية لخرائط Azure؟

الخطوات التالية

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

جعل طلبك متاحًا

تعرف على المزيد حول المصطلحات المستخدمة بواسطة خرائط Azure والصناعة الجغرافية المكانية.

مسرد خرائط Azure