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: *) অন্তর্ভুক্ত করার জন্য হোস্টিং সার্ভার কনফিগার করতে হবে। অন্যথায় ম্যাপ মডেলটি লোড করতে পারবে না।