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

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

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

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

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

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

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

• تحميل واجهة برمجة التطبيقات: استخدِم التحميل الديناميكي غير المتزامن للخرائط الثلاثية الأبعاد لتحميل 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> تؤثر إعدادات الكاميرا، مثل "الإمالة"، في سرعة التحميل. كلما زاد تكبير المشهد أو إمالته، زاد عدد المضلّعات التفصيلية التي سيتم عرضها وتتطلب التحميل. يعتمد مستوى التفاصيل أيضًا على الموقع الجغرافي (على سبيل المثال: مدينة تضم العديد من المباني مقابل ريف يضم معالم طبيعية فقط).

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

• Preloader visual: While <gmp-map-3d> loads extremely fast, it may take some time to display in full resolution for users with low end devices (low GPU), or bandwidth (slow 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' أو إعدادات مشابهة لضمان تثبيت العلامة بشكل صحيح عند إمالة الخريطة أو تدويرها.

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

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

• تبسيط الشكل الهندسي: قبل العرض، يمكنك تطبيق خوارزمية تبسيط على بيانات المسار. يؤدي ذلك إلى تقليل عدد الرؤوس مع الاحتفاظ بالشكل العام، ما يحسّن سرعة العرض بشكل كبير، خاصةً للحدود أو المسارات المعقّدة.
• التقليل حسب مستوى التكبير: بالنسبة إلى مجموعات البيانات الكبيرة جدًا، ننصحك بتحميل الأشكال الهندسية الأكثر تفصيلاً فقط عندما يكبّر المستخدم المنطقة. عند مستوى تكبير منخفض، لا يلزم سوى نسخة مبسطة للغاية من الخطوط المتعددة أو المضلّع.
• الحساب المسبق للمضلّعات البارزة: إذا كانت المضلّعات بارزة (extruded: true)، تحدّد بيانات المسار حجمًا ثلاثي الأبعاد (شبكة). تتطلّب معالجة المضلّعات المعقّدة التي تحتوي على عدد كبير من الرؤوس موارد حوسبة كبيرة. تأكَّد من أنّ بيانات المصدر للمضلّعات بسيطة قدر الإمكان.
• اختبار أداء الخطوط المتعدّدة والمضلّعات: عند إضافة العديد من الخطوط المتعدّدة أو المضلّعات أو المعقّدة، خاصةً عند بروزها بشكل ثلاثي الأبعاد، تأكَّد من أنّها لا تؤدي إلى انخفاض عدد اللقطات في الثانية. يمكنك الحدّ من عدد الرؤوس أو استخدام خوارزميات التبسيط إذا لزم الأمر.
• عند تعديل شكل، عدِّل مصفوفة المسار بالكامل في عملية واحدة بدلاً من تكرار العناصر الفردية وتعديلها. إنّ عملية تعيين واحدة (مثل polyline.path = newPathArray;) تكون أكثر كفاءة من التعديلات التكرارية المتعددة.
• تجنُّب الخطوط المتعدّدة الممتدة (حيثما أمكن): على الرغم من أنّ الخطوط المتعدّدة يمكنها استخدام قيمة ارتفاع ليتم وضعها في مساحة ثلاثية الأبعاد، فإنّ تمديد خط متعدّد (على سبيل المثال، من خلال منحه عرض خط وارتفاع كبير) يمكن أن يكون مكثفًا من الناحية الرسومية. Whenever possible, use 2D polylines on the ground (RELATIVE_TO_GROUND) or a minimal stroke-width for better performance.
• لا تستخدِم سوى drawsOccludedSegments لعناصر التوجيه المهمة. بالنسبة إلى الأشكال الخلفية أو السياقية، يمكنك السماح بحجبها بشكل طبيعي من خلال الأشكال الهندسية الثلاثية الأبعاد للخريطة. يؤدي عرض الأشكال الهندسية المخفية غير الضرورية إلى زيادة تعقيد عملية العرض.

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

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

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

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