أفضل الممارسات المتعلّقة بـ "خرائط ثلاثية الأبعاد"

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

اعتبارات الأداء

لضمان تجربة سلسة وسريعة الاستجابة للتفاعلات والعناصر المرئية، ننصحك باتّباع الطرق التالية.

تحميل الخريطة

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

• تحميل واجهة برمجة التطبيقات: استخدِم التحميل الديناميكي غير المتزامن لـ 3D Maps لتحميل Maps JavaScript API عند تحميل الصفحة الأولي.
• المكتبات: حمِّل المكتبات برمجيًا عند الحاجة، مثل google.maps.importLibrary("maps3d"). بدلاً من ذلك، إذا كنت تستخدم مكوّنات الويب ، مثل <gmp-map-3d> مباشرةً في صفحة HTML مع تحميل النص البرمجيالمباشر ، سيتم تحميل المكتبات تلقائيًا في الوقت المناسب.
• إدارة ميزات الخريطة الأساسية: استخدِم معرّف خريطة مخصّصًا لفلترة نقاط الاهتمام في الخريطة الأساسية (الوضع "مختلط")، والتحكّم في كثافتها، خاصةً إذا كان التطبيق يتضمّن مجموعة خاصة من العناصر المخصّصة، مثل العلامات أو الخطوط المتعددة. يمنع ذلك حدوث تشويش مرئي وتداخل محتمَل. بدلاً من ذلك، يمكنك إيقاف ميزات مربّعات الخريطة الأساسية المتّجهة، مثل نقاط الاهتمام والخطوط المتعددة للطرق وأسماء الطرق وأسماء الشوارع (الوضع "صورة جوية").
• الأحداث: استمِع إلى أحداث gmp-steadystate أو gmp-error لإنشاء المنطق اللاحق، مثل تحميل العلامات أو تحريك الكاميرا.

• تفاعل المستخدم: انتظِر حدث gmp-steadystate قبل إجراء تغييرات على محتوى الخريطة. إذا بدأ المستخدم التفاعل مع الخريطة (تحريك أو تكبير/تصغير) قبل حدث gmp-steadystate الأولي، لن يتم تفعيل الحدث إلا بعد أن يتوقف المستخدم عن التفاعل. تجنَّب عرض محتوى الطبقة الخارجية أو تعديله (مثل العلامات أو المضلّعات) أثناء تحريك المستخدم للخريطة أو تكبيرها/تصغيرها، وتجنَّب عرض محتوى الطبقة الخارجية أو تعديله (مثل العلامات أو المضلّعات) من خلال الاستماع إلى أحداث gmp-centerchange، وgmp-headingchange وgmp-rangechange وgmp-rollchange وgmp-tiltchange.

• استخدِم requestAnimationFrame() (rAF) لإجراء تعديلات مستمرة و فصل العمليات الحسابية المكثّفة عن طلبات الرسم بشكل صارم.

  • استخدِم rAF: تتم مزامنة التعديلات مع معدّل عرض المتصفّح للحصول على رسوم متحركة سلسة بمعدّل 60 لقطة في الثانية وتقليل استهلاك الطاقة.
  • تجنَّب العمليات المكثّفة للرسم: لا تنفِّذ مهامًا ثقيلة غير متعلقة بالرسم أثناء التعديل النهائي.
  • فصل المنطق: نفِّذ جميع العمليات المنطقية المكثّفة قبل طلبات تعديل مكوّنات الويب البسيطة ضمن حلقة rAF.

• إعدادات المشهد الأولية: <gmp-map-3d> ستؤثر إعدادات الكاميرا، مثل الإمالة، في سرعة التحميل. كلما تم تكبير المشهد أو إمالته، سيتم عرض مضلّعات أكثر تفصيلاً وتتطلب التحميل. سيعتمد مستوى التفاصيل أيضًا على الموقع الجغرافي (على سبيل المثال، مدينة تضم العديد من المباني مقابل منطقة ريفية لا تضم سوى معالم طبيعية).

  • ننصحك باستخدام طرق عرض أقل تكبيرًا (على ارتفاع عالٍ) أو غير مائلة أو مائلة قليلاً.
  • أضِف حدودًا (مثال) إلى الخريطة حتى يركّز المستخدمون على منطقة معيّنة ويتم تحميل المربّعات بالكامل.

• العنصر المرئي الخاص بأداة التحميل المسبق: على الرغم من أنّ <gmp-map-3d> يتم تحميلها بسرعة كبيرة، قد يستغرق عرضها بدقة كاملة بعض الوقت للمستخدمين الذين لديهم أجهزة منخفضة المستوى (وحدة معالجة رسومات منخفضة الأداء) أو نطاق ترددي منخفض (شبكة 4G بطيئة). في هذه الحالة، يمكنك إنشاء أداة تحميل مسبق تتضمّن صورة أو رسمًا متحركًا أو نصًا مع تحميل المشهد ثلاثي الأبعاد في الخلفية. اطّلِع أدناه على الحدث الرئيسي الذي يجب استخدامه:

// create the map in the background and wait for gmp-steadystate event
async function initMap() {
    await google.maps.importLibrary("maps3d");
    const map = document.querySelector('gmp-map-3d');
    const div = document.querySelector('div'); // preloader "
    map.addEventListener('gmp-steadystate', ({isSteady}) => {
        if (isSteady) {
            div.style.display = 'none';
        }
    });
}
initMap();

• خريطة ثنائية الأبعاد:
  • يمكن عرض خريطة بديلة ثنائية الأبعاد (صورة جوية) لهؤلاء المستخدمين مع تضمين بياناتك الجغرافية، مثل العلامات.

• بدلاً من ذلك، يمكن عرض خريطة ثابتة تكميلية ثنائية الأبعاد في الوضع "صورة جوية" ليتمكّن المستخدمون من تصوُّر مكان معيّن أثناء تحميله.

أداء العناصر المرئية وإدارتها

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

العلامات

• خيار التخصيص الأمثل:
  • PinElement: لإجراء تغييرات أساسية على العلامة (اللون أو المقياس أو الحدود أو رمز النص )، استخدِم العنصر <gmp-pin> أو الفئة PinElement. هذه هي طريقة التخصيص الأفضل أداءً.
  • استخدِم علامات HTMLImageElement أو SVGElement باعتدال: استخدِمها لإجراء المزيد من التخصيصات، مثل إضافة الشفافية أو إدراج صورة، مثل رمز في SVGElement (يتطلب ذلك ترميز base64). سيتم تنقيطها عند التحميل وستؤدي إلى زيادة الحمل على الأداء. يجب تضمين HTMLImageElement وSVGElement في عنصر <template> قبل تعيينهما في الفتحة التلقائية لـ Marker3DElement.
  • لا تتوفّر حاليًا إمكانية إضافة HTML أو CSS عاديَين.
• إدارة سلوك التصادم: استفِد من السمة collisionBehavior للعلامة. بالنسبة إلى العلامات المهمة التي يجب أن تظل مرئية دائمًا، اضبط السلوك وفقًا لذلك. بالنسبة إلى العلامات الأقل أهمية، اسمح بإخفائها للحفاظ على تجربة خريطة أكثر نظافة وأقل تشويشًا، خاصةً عند مستويات التكبير العالية.
• نقاط الاهتمام المهمة فقط: لا تستخدِم drawsWhenOccluded (أو اضبط السمة برمجيًا) إلا للعلامات التي يجب أن تظهر من خلال المباني أو التضاريس (على سبيل المثال، هدف الإنقاذ أو خط خدمة مدفون أو صورة رمزية للمستخدم).
• اختبار الحجب: بما أنّ الخريطة ثلاثية الأبعاد، يمكن أن تحجب المباني أو التضاريس العلامات مرئيًا. اختبِر زوايا الكاميرا المختلفة وارتفاعات العلامات لضمان بقاء نقاط الاهتمام المهمة مرئية أو نفِّذ منطقًا لضبط مستوى الرؤية والارتفاع عند الحجب.
• الاستفادة من الارتفاع: في الخرائط ثلاثية الأبعاد، يجب أن تستخدم العلامات الموضع مع قيمة الارتفاع. بالنسبة إلى العلامات المرتبطة بالتضاريس أو المباني، استخدِم altitudeMode: 'RELATIVE_TO_GROUND' أو 'RELATIVE_TO_MESH' أو إعدادات مشابهة لضمان تثبيت العلامة بشكل صحيح عند إمالة الخريطة أو تدويرها.

المضلّعات والخطوط المتعددة

• تبسيط الشكل الهندسي: قبل العرض، طبِّق خوارزمية تبسيط على بيانات المسار. يقلّل ذلك من عدد الرؤوس مع الاحتفاظ بالشكل العام، ما يحسّن سرعة العرض بشكل كبير، خاصةً بالنسبة إلى الحدود أو المسارات المعقّدة.
• التقليل حسب مستوى التكبير/التصغير: بالنسبة إلى مجموعات البيانات الكبيرة جدًا، ننصحك بتحميل الشكل الهندسي الأكثر تفصيلاً فقط عندما يكبّر المستخدم المنطقة. عند مستوى تكبير/تصغير منخفض، لا يلزم سوى استخدام نسخة مبسطة جدًا من الخط المتعدد أو المضلّع.
• الحساب المسبق للمضلّعات البارزة: إذا كانت المضلّعات بارزة (extruded: true)، تحدّد بيانات المسار حجمًا ثلاثي الأبعاد (شبكة). تتطلب معالجة المضلّعات المعقّدة ذات الرؤوس العالية قدرًا كبيرًا من العمليات الحسابية. تأكَّد من أن تكون بيانات المصدر للمضلّعات بسيطة قدر الإمكان.
• اختبار أداء الخطوط المتعددة والمضلّعات: عند إضافة خطوط متعددة أو مضلّعات عديدة أو معقّدة، خاصةً عند بروزها ثلاثية الأبعاد، تأكَّد من أنّها لا تؤدي إلى انخفاض معدّل الإطارات. قلِّل عدد الرؤوس أو استخدِم خوارزميات التبسيط إذا لزم الأمر.
• عند تعديل شكل، عدِّل مصفوفة المسار بأكملها في عملية واحدة بدلاً من التكرار وتعديل العناصر الفردية. تكون عملية التعيين الفردية (على سبيل المثال، polyline.path = newPathArray;) أكثر كفاءة بكثير من عمليات التعديل المتكررة المتعددة.
• تجنَّب الخطوط المتعددة البارزة (حيثما أمكن): على الرغم من أنّه يمكن للخطوط المتعددة استخدام قيمة الارتفاع لوضعها في مساحة ثلاثية الأبعاد، يمكن أن يكون بروز الخط المتعدد (على سبيل المثال، منحه stroke-width ومدى ارتفاع كبير) مكثفًا من الناحية الرسومية. استخدِم الخطوط المتعددة ثنائية الأبعاد على الأرض (RELATIVE_TO_GROUND) أو stroke-width بسيطًا لتحقيق أداء أفضل كلما أمكن ذلك.
• لا تستخدِم drawsOccludedSegments إلا لعناصر التوجيه المهمة. بالنسبة إلى الأشكال الخلفية أو السياقية، اسمح بحجبها بشكل طبيعي من خلال الشكل الهندسي ثلاثي الأبعاد للخريطة. يؤدي عرض الشكل الهندسي المخفي غير المهم إلى إضافة تعقيد غير ضروري للعرض.

تصاميم ثلاثية الأبعاد

يكون عرض ملفات .glb ثلاثية الأبعاد والتفاعلات، مثل حدث gmp-click، سريعًا جدًا في <gmp-map-3d>.

• تصغير حجم الملف باستخدام الضغط: لضمان التحميل السريع، خاصةً على شبكات الجوّال، يجب أن يكون حجم ملفات النماذج المعقّدة بتنسيق .glb أقل من 5 ميغابايت (ويُفضّل أن يكون أقل من ذلك). الطريقة الأساسية لتحقيق ذلك هي تطبيق Draco Compression على بيانات الشبكة ضمن ملفات .glb، ما يمكن أن يقلّل حجم الملف بشكل كبير (غالبًا بأكثر من 50%) مع الحد الأدنى من فقدان الجودة المرئية.
• توسيط مصدر النموذج: تأكَّد من أنّ برنامج النمذجة ثلاثية الأبعاد يصدِّر النموذج مع مصدره (النقطة 0 و0 و0) المتمركز في قاعدة النموذج. يؤدي ذلك إلى تبسيط عملية تحديد الموضع والتدوير على الخريطة، ما يضمن تثبيت النموذج بشكل صحيح على إحداثيات خط العرض وخط الطول.
• إدارة CORS: إذا كانت ملفات النماذج مستضافة على نطاق أو شبكة CDN مختلفَين عن تطبيق الويب، عليك إعداد خادم الاستضافة لتضمين عناوين مشاركة الموارد المشتركة المنشأ (CORS) الضرورية (على سبيل المثال، Access-Control-Allow-Origin: *). وإلا لن تتمكّن الخريطة من تحميل النموذج.