خرائط Azure أفضل ممارسات حزمة تطوير البرامج (SDK) على الويب

هل هذه الصفحة مفيدة؟

هل لديك ملاحظات إضافية؟

سيتم إرسال الملاحظات إلى Microsoft: بالضغط على الزر «إرسال»، سيتم استخدام ملاحظاتك لتحسين منتجات Microsoft وخدماتها. نهج الخصوصية.

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

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

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

أساسيات الأمان

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

هام

يوفر خرائط Azure طريقتين للمصادقة.

• المصادقة المستندة إلى مفتاح الاشتراك
• مصادقة Azure Active Directory.

استخدم Azure Active Directory في كافة تطبيقات الإنتاج. المصادقة المستندة إلى مفتاح الاشتراك بسيطة وما تستخدمه معظم منصات رسم الخرائط كطريقة خفيفة لقياس استخدامك للنظام الأساسي لأغراض الفوترة. ومع ذلك ، هذا ليس شكلا آمنا من أشكال المصادقة ويجب استخدامه محليا فقط عند تطوير التطبيقات. توفر بعض الأنظمة الأساسية القدرة على تقييد عناوين IP و / أو محيل HTTP في الطلبات ، ومع ذلك ، يمكن بسهولة انتحال هذه المعلومات. إذا كنت تستخدم مفاتيح الاشتراك، فتأكد من تدويرها بانتظام. Azure Active Directory هي خدمة هوية مؤسسية تحتوي على مجموعة كبيرة من ميزات الأمان والإعدادات لجميع أنواع سيناريوهات التطبيقات. توصي Microsoft بأن تستخدم كافة تطبيقات الإنتاج التي تستخدم خرائط Azure Azure Active Directory للمصادقة. تعرف على المزيد حول إدارة المصادقة في خرائط Azure في هذا المستند.

تأمين بياناتك الخاصة

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

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

راجع هذا البرنامج التعليمي حول إضافة مصادقة إلى تطبيق الويب الذي يعمل على خدمة تطبيقات Azure

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

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

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

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

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

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

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

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

تحميل كسول خرائط Azure ويب SDK

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

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

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

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

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

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

تحتوي مجموعة تطوير البرامج (SDK) على مصدرين للبيانات،

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

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

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

يوفر النظام الأساسي خرائط Azure Creator القدرة على استرداد البيانات بتنسيق تجانب البيانات الاتجاهية. يمكن أن تستخدم تنسيقات البيانات الأخرى أدوات مثل Tippecanoe أو أحد قائمة الموارد العديدة في هذه الصفحة.

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

تعرف على المزيد حول مصادر البيانات في مستند إنشاء مصدر بيانات .

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

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

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

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

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

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

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

يؤدي استدعاء الدالة الواضحة للفئة إلى 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 مضمنة داخل جافا سكريبت ، ولكن هذا سيستخدم الكثير من الذاكرة حيث سيتم تخزين نسخ منه عبر المتغير الذي أنشأته لهذا الكائن ومثيل مصدر البيانات ، الذي يديره داخل عامل ويب منفصل. قم بتعريض GeoJSON لتطبيقك باستخدام عنوان URL بدلا من ذلك وسيقوم مصدر البيانات بتحميل نسخة واحدة من البيانات مباشرة إلى عامل الويب الخاص بمصادر البيانات.

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

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

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

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

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

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

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

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

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

دمج الطبقات

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

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

• قم بتقسيم البيانات إلى مصدري بيانات استنادا 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 وتريد أن يتم عرضها فقط على المستويات التي تحتوي عليها تجانبات، ولا تحاول ملء التجانبات المفقودة بالتجانبات من مستويات التكبير/التصغير الأخرى.
• إذا كنت تريد فقط عرض طبقة عند مستويات تكبير/تصغير معينة. تحتوي جميع الطبقات على خيار و maxZoom حيث سيتم تقديم الطبقة عند حدوث ذلك بين مستويات التكبير/التصغير هذه بناء على minZoom هذا المنطق 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 الفصل على خيارات لتجميع البيانات محليا. بالإضافة إلى ذلك، تحتوي العديد من الأدوات التي تنشئ تجانبات متجهة أيضا على خيارات تجميع.

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

استخدام الخرائط الحرارية المجمعة المرجحة

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

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

تعرف على المزيد في [خرائط التجميع والحرارة في هذا المستند] (تجميع-نقطة-بيانات-ويب-sdk.md #clustering-و-حرارة-خرائط-طبقة)

إبقاء موارد الصور صغيرة

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

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

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

تقليل تعقيد الفلاتر

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

• في حالة استخدام تجانبات متجهة، قم بتقسيم البيانات إلى طبقات مصدر مختلفة.
• في حالة استخدام الفئة 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 محمي؟

نعم.

تلميح

يحتوي Safari على خطأ يمنع إطارات iframe التي تم وضع الحماية من تشغيل عمال الويب ، وهو أحد متطلبات خرائط Azure Web SDK. الحل هو إضافة "allow-same-origin" العلامة إلى خاصية sandbox الخاصة ب iframe.

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

فيما يلي الطرق المختلفة للحصول على دعم خرائط Azure بناء على مشكلتك.

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

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

ملاحظة

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

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

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

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

• للأسئلة المتعلقة خرائط Azure Power BI المرئي، اتصل بدعم Power BI.

• بالنسبة لجميع خدمات خرائط Azure الأخرى، اتصل بدعم Azure.

• للأسئلة أو التعليقات حول ميزات خرائط Azure محددة، استخدم منتديات مطوري البرامج خرائط Azure.

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

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

اجعل تطبيقك متاحا

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

مسرد خرائط Azure