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

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

Example use case for place search and route finding.
স্থান অনুসন্ধান এবং রুট অনুসন্ধানের উদাহরণ।

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

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

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

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

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

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

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

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

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

    • কম জুম-ইন (উচ্চতা), কম বা কাত না হওয়া দৃশ্য পছন্দ করুন।
    • মানচিত্রে সীমানা ( sample ) যোগ করুন যাতে ব্যবহারকারীরা একটি নির্দিষ্ট এলাকার উপর দৃষ্টি নিবদ্ধ রাখতে পারেন এবং টাইলগুলি সম্পূর্ণরূপে লোড হতে পারে।

  • 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). In this case you can create a preloader with image, animation or text with the 3D scene loading in the background. See key event to use below:

Preloader example
প্রিলোডারের উদাহরণ 
// 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 মানচিত্র:
    • An alternative 2D map ( SATELLITE ) can be delivered to these users while still including your geo data such as markers.
Satellite map example
  • বিকল্পভাবে, ব্যবহারকারীরা লোড করার সময় একটি নির্দিষ্ট স্থান কল্পনা করার জন্য SATELLITE মোডে একটি পরিপূরক 2D স্ট্যাটিক মানচিত্র প্রদর্শন করা যেতে পারে।

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

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

মার্কার

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

বহুভুজ এবং পলিলাইন

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

3D মডেল

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

3D model loading example
উদাহরণ: একটি হালকা 3D মডেল (200KB) একটি পথ ধরে চলমান 1000টি ঘটনা প্রদর্শন করতে প্রায় 2 সেকেন্ড সময় লাগে। (আধুনিক ল্যাপটপ: macOS M3 Pro, Chrome)
  • কম্প্রেশনের মাধ্যমে ফাইলের আকার কম করুন : বিশেষ করে মোবাইল নেটওয়ার্কে দ্রুত লোডিং নিশ্চিত করতে, জটিল .glb মডেল ফাইলগুলি 5MB এর মধ্যে রাখুন (আদর্শভাবে কম)। এটি অর্জনের প্রাথমিক পদ্ধতি হল আপনার .glb ফাইলের মধ্যে থাকা মেশ ডেটাতে Draco Compression প্রয়োগ করা, যা ন্যূনতম ভিজ্যুয়াল মানের ক্ষতি সহ ফাইলের আকার উল্লেখযোগ্যভাবে (প্রায়শই 50% এর বেশি) কমাতে পারে।
  • সেন্টার মডেল অরিজিন: নিশ্চিত করুন যে 3D মডেলিং সফ্টওয়্যারটি মডেলের ভিত্তিকে কেন্দ্র করে তার অরিজিন (0, 0, 0 পয়েন্ট) দিয়ে মডেলটি রপ্তানি করে। এটি মানচিত্রে অবস্থান এবং ঘূর্ণনকে সহজ করে তোলে, নিশ্চিত করে যে মডেলটি Lat, Lng স্থানাঙ্কের সাথে সঠিকভাবে অ্যাঙ্কর করে।
  • CORS পরিচালনা করুন : যদি আপনার মডেল ফাইলগুলি আপনার ওয়েব অ্যাপ্লিকেশনের পরিবর্তে অন্য কোনও ডোমেন বা CDN-তে হোস্ট করা হয়, তাহলে আপনাকে হোস্টিং সার্ভারটি প্রয়োজনীয় ক্রস-অরিজিন রিসোর্স শেয়ারিং (CORS) হেডার (যেমন, অ্যাক্সেস-কন্ট্রোল-অ্যালউ-অরিজিন: *) অন্তর্ভুক্ত করার জন্য কনফিগার করতে হবে। অন্যথায় মানচিত্রটি মডেলটি লোড করতে পারবে না।