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

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

مثال على البحث عن الأماكن والعثور على المسارات

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

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

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

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

• تحميل واجهة برمجة التطبيقات: استخدِم التحميل الديناميكي غير المتزامن للخرائط الثلاثية الأبعاد لتحميل 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();

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

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

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

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

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

العلامات

مثال على سيناريو: يستغرق تحميل 300 علامة مع 41 رمز علامة SVG مختلفة من 150 إلى 300 ملي ثانية (كمبيوتر محمول حديث: macOS M3 Pro، Chrome)

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

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

مثال: يستغرق تحميل 1, 000 مضلّع من 100 إلى 150 ملي ثانية (على كمبيوتر محمول حديث: macOS M3 Pro، Chrome)

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

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

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

مثال: يستغرق عرض 1000 تكرار لنموذج ثلاثي الأبعاد خفيف (200 كيلوبايت) يتحرك على طول مسار معيّن ثانيتين تقريبًا. (كمبيوتر محمول حديث: macOS M3 Pro، متصفّح Chrome)

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