3D Maps-এর জন্য পেশাদার পদ্ধতি

এই নির্দেশিকা 3D Maps ওয়েব কম্পোনেন্ট এবং আপনার অ্যাপ্লিকেশনের সাথে ইন্টিগ্রেট করার সময় বিবেচনা করার মতো বিষয়গুলি সম্পর্কে বিস্তারিত তথ্য প্রদান করে।

জায়গা সার্চ করা ও রুট খোঁজার উদাহরণ।

পারফর্ম্যান্স সংক্রান্ত বিবেচনা

ইন্টারঅ্যাক্টিভিটি এবং ভিজ্যুয়াল এলিমেন্টের জন্য একটি মসৃণ এবং প্রতিক্রিয়াশীল অভিজ্ঞতা নিশ্চিত করতে, নিম্নলিখিত পদ্ধতিগুলি বিবেচনা করুন।

ম্যাপ লোড করুন

3D ম্যাপের প্রাথমিক লোড এবং রেন্ডারিং সেটআপ ব্রাউজার কনফিগারেশন কৌশল এবং UI-এর সেরা অনুশীলনগুলিকে একত্রিত করে যাতে ব্যবহারকারীর অভিজ্ঞতা আরও ভালো হয়।

• API লোড: প্রাথমিক পৃষ্ঠা লোড করার সময় Maps JavaScript API লোড করার জন্য 3D Maps অ্যাসিঙ্ক ডায়নামিক লোডিং ব্যবহার করুন।
• লাইব্রেরি: যেখানে প্রয়োজন সেখানে প্রোগ্রাম্যাটিক্যালি লাইব্রেরি লোড করুন, যেমন google.maps.importLibrary("maps3d")। বিকল্প হিসেবে, আপনি যদি সরাসরি স্ক্রিপ্ট লোড করার মাধ্যমে আপনার HTML পৃষ্ঠায় সরাসরি <gmp-map-3d>-এর মতো ওয়েব কম্পোনেন্ট ব্যবহার করেন, তাহলে উপযুক্ত সময়ে লাইব্রেরি অটোমেটিক লোড হয়ে যাবে
• বেসম্যাপ ফিচার ম্যানেজ করা: বেসম্যাপ POI (HYBRID মোড) ফিল্টার করতে কাস্টম mapId ব্যবহার করুন এবং তাদের ঘনত্ব নিয়ন্ত্রণ করুন, বিশেষ করে যদি অ্যাপ্লিকেশনের নিজস্ব কাস্টম এলিমেন্ট যেমন মার্কার বা পলিলাইন থাকে। এটি ভিজ্যুয়াল বিশৃঙ্খলা এবং সম্ভাব্য ওভারল্যাপ প্রতিরোধ করে। বিকল্প হিসেবে, আপনি বেসম্যাপ ভেক্টর টাইলস ফিচার যেমন, POI, রাস্তার পলিলাইন, রাস্তার নাম, স্ট্রিটের নাম (SATELLITE মোড) বন্ধ করতে পারেন।
• ইভেন্ট: মার্কার লোড করা, ক্যামেরার অ্যানিমেশন দেখানোর মতো পরবর্তী লজিক তৈরি করতে gmp-steadystate বা gmp-error ইভেন্ট শুনুন।

ব্যাকগ্রাউন্ড ক্যানভাস > ছোট করা টাইল > ভূখণ্ড মেশ > সারফেস মেশ (যেমন:বিল্ডিং) > আগ্রহের স্থান ও রাস্তার লেবেল, কাস্টম এলিমেন্ট সমান্তরালভাবে লোড করা হচ্ছে (মার্কার, 3D মডেল ইত্যাদি)

• ব্যবহারকারীর ইন্টার‍্যাকশন: ম্যাপের কন্টেন্টে পরিবর্তন করার আগে gmp-steadystate ইভেন্টের জন্য অপেক্ষা করুন। প্রাথমিক gmp-steadystate ইভেন্টের আগে কোনও ব্যবহারকারী ম্যাপের সাথে ইন্টার‍্যাক্ট (প্যান, জুম) করা শুরু করলে, ব্যবহারকারী ইন্টার‍্যাক্ট করা বন্ধ করার পরেই ইভেন্টটি ট্রিগার হবে। ব্যবহারকারী ম্যাপ প্যান বা জুম করার সময় ওভারলে কন্টেন্ট (যেমন মার্কার বা পলিগন) দেখানো বা আপডেট করা এড়িয়ে চলুন, gmp-centerchange, gmp-headingchange gmp-rangechange gmp-rollchange gmp-tiltchange ইভেন্ট শুনে ওভারলে কন্টেন্ট (যেমন মার্কার বা পলিগন) দেখানো বা আপডেট করা এড়িয়ে চলুন।

• ক্রমাগত আপডেট পেতে requestAnimationFrame() (rAF) ব্যবহার করুন এবং ড্র কল থেকে ইনটেনসিভ ক্যালকুলেশন কঠোরভাবে আলাদা করুন।

  • rAF ব্যবহার করুন: মসৃণ, ৬০FPS অ্যানিমেশন এবং কম বিদ্যুৎ খরচের জন্য ব্রাউজারের ডিসপ্লে রেটের সাথে আপডেট সিঙ্ক করে।
  • ইনটেনসিভ ড্র ওয়ার্ক এড়িয়ে চলুন: ফাইনাল আপডেটের সময় ভারী, নন-ড্রয়িং টাস্ক করবেন না।
  • আলাদা লজিক: rAF লুপের মধ্যে ন্যূনতম ওয়েব কম্পোনেন্ট আপডেট কলের আগে সব ইনটেনসিভ লজিক পারফর্ম করুন।

• প্রাথমিক দৃশ্য সেটিংস: <gmp-map-3d> টিল্টের মতো ক্যামেরা সেটিংস লোডিং স্পিডকে প্রভাবিত করবে। দৃশ্যটি যত বেশি জুম বা টিল্ট করা হবে, তত বেশি বিস্তারিত পলিগন দেখানো হবে এবং লোড করতে হবে। এছাড়াও, লোকেশনের উপর নির্ভর করে বিবরণের লেভেল দেখানো হবে (যেমন: অনেক বিল্ডিং সহ শহর বনাম শুধুমাত্র প্রাকৃতিক বৈশিষ্ট্য সহ গ্রামাঞ্চল)।

  • কম জুম-ইন করা (অনেক উপর থেকে তোলা), কম বা কাত না করা ভিউ পছন্দ করা হয়।
  • ম্যাপে বাউন্ড (স্যাম্পেল) যোগ করুন যাতে ব্যবহারকারীরা একটি নির্দিষ্ট এলাকায় ফোকাস করতে পারেন এবং টাইলস সম্পূর্ণরূপে লোড হতে পারে।

• প্রিলোডার ভিজ্যুয়াল: <gmp-map-3d> অত্যন্ত দ্রুত লোড হলেও, কম ক্ষমতা সম্পন্ন ডিভাইস (কম GPU) বা ব্যান্ডউইথ (ধীরগতির 4G) ব্যবহারকারীদের জন্য সম্পূর্ণ রেজোলিউশনে দেখাতে কিছুটা সময় লাগতে পারে। এই ক্ষেত্রে আপনি ব্যাকগ্রাউন্ডে 3D দৃশ্য লোড হওয়ার সাথে সাথে ছবি, অ্যানিমেশন বা টেক্সট সহ একটি প্রিলোডার তৈরি করতে পারেন। নিচে ব্যবহার করার জন্য মূল ইভেন্ট দেখুন:

প্রিলোডার উদাহরণ

// 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();

• 2D ম্যাপ:
  • এইসব ব্যবহারকারীকে বিকল্প 2D ম্যাপ (স্যাটেলাইট) ডেলিভার করা যেতে পারে, যেখানে মার্কারের মতো আপনার জিও ডেটা অন্তর্ভুক্ত থাকবে।

• বিকল্প হিসেবে, লোড হওয়ার সময় কোনও জায়গা দেখানোর জন্য SATELLITE মোডে একটি পরিপূরক 2D স্ট্যাটিক ম্যাপ ব্যবহারকারীদের দেখানো যেতে পারে।

মনে রাখবেন: প্রতিটি ম্যাপের 2D, 3D লোডের জন্য এখন আলাদাভাবে বিল করা হয়, তাই ব্যবহারকারীরা যখন দ্বিতীয় ম্যাপের সাথে ইন্টার‍্যাক্ট করতে চান শুধুমাত্র তখনই সেটি রেন্ডার করুন।

ভিজ্যুয়াল এলিমেন্টের পারফর্ম্যান্স ও ম্যানেজমেন্ট

3D Maps, মার্কার, পলিলাইন, পলিলাইন ও 3D মডেলের মতো ভিজ্যুয়াল এলিমেন্ট দেখানোর জন্য বিভিন্ন উপায় অফার করে। এর মাধ্যমে, অনেক বেশি পরিমাণে ভিজ্যুয়াল থাকলেও, সেগুলি অপ্টিমাল পারফর্ম্যান্স সহ ও রেন্ডার করার জন্য ন্যূনতম সময় নিয়ে দেখানো যায়।

মার্কার

উদাহরণ: ৪১টি আলাদা SVG মার্কার গ্লিফ সহ ৩০০টি মার্কার লোড করতে ১৫০-৩০০ মিলি সেকেন্ড সময় লাগে (আধুনিক ল্যাপটপ: macOS M3 Pro, Chrome)

• কাস্টমাইজেশনের সেরা বিকল্প:
  • PinElement: মার্কারের প্রাথমিক পরিবর্তনের (রঙ, স্কেল, বর্ডার, টেক্সট গ্লিফ) জন্য <gmp-pin> এলিমেন্ট বা PinElement ক্লাস ব্যবহার করুন। এটি হল সবচেয়ে বেশি পারফর্ম করা কাস্টমাইজেশন পদ্ধতি।
  • HTMLImageElement বা SVGElement মার্কার কম ব্যবহার করুন: আরও কাস্টমাইজেশনের জন্য ব্যবহার করুন, যেমন স্বচ্ছতা যোগ করা বা SVGElement-এ আইকনের মতো ছবি ইনজেক্ট করা (base64 এনকোডিং প্রয়োজন)। লোড করার সময় এগুলি রাস্টারাইজ করা হবে এবং পারফর্ম্যান্স ওভারহেড অন্তর্ভুক্ত থাকবে। Marker3DElement-এর ডিফল্ট স্লটে অ্যাসাইন করার আগে HTMLImageElement এবং SVGElement-কে অবশ্যই <template> এলিমেন্টে র‍্যাপ করতে হবে।
  • এখনই প্লেন HTML বা CSS যোগ করার সুবিধা উপলভ্য নেই।
• কলিশন বিহেভিওর ম্যানেজ করা: মার্কারের collisionBehavior প্রপার্টির সুবিধা নিন। গুরুত্বপূর্ণ মার্কারের জন্য যা সবসময় দেখা যেতে হবে, সেই অনুযায়ী আচরণ সেট করুন। কম গুরুত্বপূর্ণ মার্কারের ক্ষেত্রে, বিশেষ করে হাই জুম লেভেলে, পরিষ্কার, কম বিশৃঙ্খল ম্যাপের অভিজ্ঞতা বজায় রাখতে সেগুলি লুকানোর অনুমতি দিন।
• শুধুমাত্র গুরুত্বপূর্ণ POI: শুধুমাত্র সেইসব মার্কারের জন্য drawsWhenOccluded (অথবা প্রোগ্রাম্যাটিক্যালি প্রপার্টি সেট করুন) ব্যবহার করুন যেগুলি বিল্ডিং বা ভূখণ্ডের মধ্য দিয়ে অবশ্যই দেখা যেতে হবে (যেমন, উদ্ধারের লক্ষ্য, মাটির নিচে থাকা ইউটিলিটি লাইন বা ব্যবহারকারীর অবতার)।
• টেস্ট অক্লুশন: ম্যাপটি 3D হওয়ার কারণে, বিল্ডিং বা ভূদৃশ্যের দ্বারা মার্কারগুলি দৃশ্যত অস্পষ্ট (অক্লুডেড) হতে পারে। গুরুত্বপূর্ণ POI যাতে দেখা যায় তা নিশ্চিত করতে বিভিন্ন ক্যামেরা অ্যাঙ্গেল ও মার্কার অল্টিটিউড পরীক্ষা করুন অথবা আড়াল হয়ে গেলে দৃশ্যমানতা ও অল্টিটিউড অ্যাডজাস্ট করার জন্য লজিক প্রয়োগ করুন।
• উচ্চতা ব্যবহার করা: 3D ম্যাপে, মার্কারের পজিশন উচ্চতার ভ্যালু সহ ব্যবহার করা উচিত। ভূখণ্ড বা বিল্ডিংয়ের সাথে যুক্ত মার্কারের জন্য, altitudeMode: 'RELATIVE_TO_GROUND', 'RELATIVE_TO_MESH' বা একই ধরনের সেটিংস ব্যবহার করুন যাতে ম্যাপ কাত বা ঘোরানো হলে মার্কারটি সঠিকভাবে অ্যাঙ্কর করে।

পলিগন ও পলিলাইন

উদাহরণ: ১০০০টি পলিগন লোড করতে ১০০-১৫০ মিলি সেকেন্ড সময় লাগে (আধুনিক ল্যাপটপ: macOS M3 Pro, Chrome)

• জ্যামিতি সরল করা: রেন্ডার করার আগে, আপনার পাথ ডেটাতে একটি সরলীকরণ অ্যালগরিদম প্রয়োগ করুন। এটি সাধারণ আকার বজায় রেখে ভার্টিসেসের সংখ্যা কমায়, বিশেষ করে জটিল সীমানা বা রুটের ক্ষেত্রে রেন্ডারিংয়ের গতি উল্লেখযোগ্যভাবে উন্নত করে।
• জুম লেভেল অনুযায়ী ডেটা কমানো: খুব বড় ডেটাসেটের ক্ষেত্রে, ব্যবহারকারী কোনও এলাকায় জুম ইন করলে তবেই আরও বিস্তারিত জিওমেট্রি লোড করার কথা বিবেচনা করুন। কম জুম লেভেলে, পলিলাইন বা বহুভুজের অত্যন্ত সরলীকৃত ভার্সনই প্রয়োজন।
• এক্সট্রুডেড পলিগনের জন্য প্রি-ক্যালকুলেট করা: আপনার পলিগন এক্সট্রুডেড (extruded: true) হলে, পাথ ডেটা 3D ভলিউম (একটি মেশ) নির্ধারণ করে। জটিল, হাই-ভার্টেক্স বহুভুজ প্রসেস করতে কম্পিউটেশনাল খরচ বেশি হয়। আপনার পলিগনের সোর্স ডেটা যতটা সম্ভব সহজ তা নিশ্চিত করুন।
• পলিলাইন ও পলিগন পারফর্ম্যান্স টেস্ট করা: অসংখ্য বা জটিল পলিলাইন/পলিগন যোগ করার সময়, বিশেষ করে 3D-এর জন্য এক্সট্রুড করা হলে, ফ্রেম রেট যাতে কমে না যায় তা নিশ্চিত করুন। প্রয়োজন হলে, ভার্টিসেসের সংখ্যা সীমিত করুন অথবা সরলীকরণ অ্যালগরিদম ব্যবহার করুন।
• কোনও আকার আপডেট করার সময়, লুপ করে এবং আলাদা আলাদা এলিমেন্ট পরিবর্তন করার পরিবর্তে, একটি অপারেশনে সম্পূর্ণ পাথ অ্যারে পরিবর্তন করুন। একাধিক পুনরাবৃত্তিমূলক আপডেটের চেয়ে একটি অ্যাসাইনমেন্ট অপারেশন (যেমন, polyline.path = newPathArray;) অনেক বেশি দক্ষ।
• এক্সট্রুড করা পলিলাইন এড়িয়ে চলুন (যেখানে সম্ভব): 3D স্পেসে প্লেস করার জন্য পলিলাইন অল্টিটিউড ভ্যালু ব্যবহার করতে পারলেও, পলিলাইন এক্সট্রুড করা (যেমন, এটিকে স্ট্রোক-প্রস্থ এবং একটি বড় অল্টিটিউড স্প্যান দেওয়া) গ্রাফিক্যালি ইনটেনসিভ হতে পারে। যখনই সম্ভব, আরও ভালো পারফর্ম্যান্সের জন্য গ্রাউন্ডে (RELATIVE_TO_GROUND) 2D পলিলাইন বা ন্যূনতম স্ট্রোক-প্রস্থ ব্যবহার করুন।
• গুরুত্বপূর্ণ রাউটিং এলিমেন্টের জন্য শুধুমাত্র drawsOccludedSegments ব্যবহার করুন। ব্যাকগ্রাউন্ড বা প্রাসঙ্গিক আকারের জন্য, ম্যাপের 3D জ্যামিতি দ্বারা সেগুলিকে স্বাভাবিকভাবে আড়াল করার অনুমতি দিন। নন-ক্রিটিক্যাল লুকানো জ্যামিতি দেখালে অপ্রয়োজনীয় রেন্ডারিং জটিলতা যোগ হয়।

3D মডেল

3D মডেল .glb রেন্ডারিং এবং gmp-ক্লিক ইভেন্টের মতো ইন্টারঅ্যাক্টিভিটি <gmp-map-3d>-এ খুব দ্রুত হয়।

উদাহরণ: একটি হালকা 3D মডেল (২০০কেবি) কোনও পাথ বরাবর সরানোর সময় ১০০০টি ঘটনা দেখাতে প্রায় ২ সেকেন্ড সময় লাগে। (আধুনিক ল্যাপটপ: macOS M3 Pro, Chrome)

• কম্প্রেশনের মাধ্যমে ফাইলের সাইজ কমানো: দ্রুত লোড হওয়ার বিষয়টি নিশ্চিত করতে, বিশেষ করে মোবাইল নেটওয়ার্কে, জটিল .glb মডেল ফাইলের সাইজ ৫ এমবির কম (আদর্শগতভাবে আরও কম) রাখুন। এটি করার প্রাথমিক পদ্ধতি হল আপনার .glb ফাইলের মধ্যে মেশ ডেটাতে Draco কম্প্রেশন প্রয়োগ করা, যা ভিজ্যুয়াল কোয়ালিটির ন্যূনতম ক্ষতি করে ফাইলের সাইজ উল্লেখযোগ্যভাবে (প্রায়শই ৫০%-এর বেশি) কমাতে পারে।
• সেন্টার মডেল অরিজিন: 3D মডেলিং সফ্টওয়্যারটি যেন মডেলের বেসে কেন্দ্র করে তার অরিজিন (0, 0, 0 পয়েন্ট) সহ মডেলটি এক্সপোর্ট করে তা নিশ্চিত করুন। এটি ম্যাপে পজিশন ও রোটেশনকে সহজ করে তোলে, যার ফলে মডেলটি অক্ষাংশ, দ্রাঘিমাংশ কোঅর্ডিনেটে সঠিকভাবে অ্যাঙ্কর করে।
• CORS ম্যানেজ করা: আপনার মডেল ফাইলগুলি যদি আপনার ওয়েব অ্যাপ্লিকেশনের চেয়ে আলাদা ডোমেন বা CDN-এ হোস্ট করা হয়, তাহলে আপনাকে অবশ্যই হোস্টিং সার্ভার কনফিগার করতে হবে যাতে প্রয়োজনীয় ক্রস-অরিজিন রিসোর্স শেয়ারিং (CORS) হেডার অন্তর্ভুক্ত থাকে (যেমন, Access-Control-Allow-Origin: *)। অন্যথায় ম্যাপ মডেলটি লোড করতে পারবে না।