3D মানচিত্রের জন্য সেরা অনুশীলন

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

স্থান অনুসন্ধান এবং পথ খোঁজার উদাহরণ।

কর্মক্ষমতা বিবেচনা

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

মানচিত্র লোড করুন

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

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

ব্যাকগ্রাউন্ড ক্যানভাস > সংকুচিত টাইলস > ভূখণ্ডের মেশ > পৃষ্ঠতলের মেশ (যেমন: ভবন) > আগ্রহের স্থান ও রাস্তার লেবেল, সমান্তরালভাবে লোড হওয়া কাস্টম উপাদানসমূহ (মার্কার, ৩ডি মডেল, ইত্যাদি)

• ব্যবহারকারীর মিথস্ক্রিয়া: ম্যাপের বিষয়বস্তুতে কোনো পরিবর্তন করার আগে 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> অত্যন্ত দ্রুত লোড হয়, নিম্নমানের ডিভাইস (কম জিপিইউ) বা ব্যান্ডউইথ (ধীরগতির ৪জি) ব্যবহারকারীদের ক্ষেত্রে এটি সম্পূর্ণ রেজোলিউশনে প্রদর্শিত হতে কিছুটা সময় লাগতে পারে। এক্ষেত্রে, আপনি ব্যাকগ্রাউন্ডে ৩ডি সিনটি লোড হওয়ার সাথে সাথে ছবি, অ্যানিমেশন বা টেক্সট সহ একটি প্রিলোডার তৈরি করতে পারেন। ব্যবহারের জন্য নিচের কী ইভেন্টটি দেখুন:

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

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

• ২ডি মানচিত্র:
  • এই ব্যবহারকারীদের কাছে একটি বিকল্প দ্বি-মাত্রিক মানচিত্র ( স্যাটেলাইট ) সরবরাহ করা যেতে পারে, যেখানে আপনার ভূ-তথ্য যেমন মার্কারগুলোও অন্তর্ভুক্ত থাকবে।

• বিকল্পভাবে, লোড হওয়ার সময় ব্যবহারকারীদের কোনো নির্দিষ্ট স্থান কল্পনা করার জন্য স্যাটেলাইট মোডে একটি পরিপূরক দ্বি-মাত্রিক স্থির মানচিত্র প্রদর্শন করা যেতে পারে।

দ্রষ্টব্য: আপাতত প্রতিটি ২ডি ও ৩ডি ম্যাপ লোডের জন্য আলাদাভাবে বিল করা হবে, তাই ব্যবহারকারীরা যখন দ্বিতীয় ম্যাপটির সাথে ইন্টারঅ্যাক্ট করতে চাইবেন, কেবল তখনই সেটি রেন্ডার করুন।

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

3D ম্যাপস মার্কার, পলিলাইন এবং 3D মডেলের মতো ভিজ্যুয়াল উপাদানগুলিকে সর্বোত্তম পারফরম্যান্স এবং ন্যূনতম রেন্ডার সময়ে প্রদর্শন করার জন্য বিভিন্ন উপায় সরবরাহ করে, এমনকি উচ্চ পরিমাণের ভিজ্যুয়ালের ক্ষেত্রেও।

চিহ্নিতকারী

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

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

বহুভুজ এবং বহুরেখা

উদাহরণস্বরূপ: ১০০০টি পলিগন লোড হতে ১০০-১৫০ মিলিসেকেন্ড সময় লাগে (আধুনিক ল্যাপটপ: ম্যাকওএস এম৩ প্রো, ক্রোম)।

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

3D মডেল

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

উদাহরণস্বরূপ: একটি পথ ধরে চলমান আলোর ৩ডি মডেলের (২০০কেবি) ১০০০টি উপস্থিতি প্রদর্শন করতে প্রায় ২ সেকেন্ড সময় লাগে। (আধুনিক ল্যাপটপ: ম্যাকওএস এম৩ প্রো, ক্রোম)

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