حزمة أدوات Places UI Kit: هي مكتبة جاهزة للاستخدام تتيح للمطوّرين إمكانية التخصيص والتحكّم. ننصحك بتجربتها ومشاركة ملاحظاتك حول تجربتك مع حزمة واجهة المستخدم.

Google uses AI technology to translate content into your preferred language. AI translations can contain errors.

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

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

مثال عن حالة استخدام للبحث عن الأماكن والعثور على الطرق — مثال على البحث عن مكان والعثور على مسار

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

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

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

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

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

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

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

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

العلامات

خيار التخصيص الأمثل:
- 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;) أكثر فعالية بكثير من عمليات التعديل المتكررة المتعددة.
تجنَّب الخطوط المتعددة البارزة (حيثما أمكن): على الرغم من أنّه يمكن أن تستخدم الخطوط المتعددة قيمة ارتفاع لوضعها في مساحة ثلاثية الأبعاد، يمكن أن يكون بروز الخط المتعدد (على سبيل المثال، منحه 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: *). وإلا، لن تتمكّن الخريطة من تحميل النموذج.