Maps JavaScript-এ 3D Maps আপনাকে ইমারসিভ, 3D ম্যাপের অভিজ্ঞতা তৈরি করতে সাহায্য করে। এটি ম্যাপ স্টাইলিং কাস্টমাইজ করা, অ্যাক্সেসিবিলিটি উন্নত করা এবং ব্যবহারযোগ্যতা বাড়ানোর জন্য টুল প্রদান করে, যা আকর্ষক এবং ইন্টারেক্টিভ অ্যাপ্লিকেশন ডেভেলপ করতে সাহায্য করে।
Maps JavaScript API-তে 3D Maps-এর সাহায্যে আপনি কী করতে পারেন তার একটি উদাহরণ এখানে দেওয়া হল:
Maps JavaScript-এ 3D Maps কেন ব্যবহার করবেন
Maps JavaScript-এ 3D Maps, maps3d লাইব্রেরিতে
Map3DElement
(<gmp-map-3d>)
ক্লাস প্রদান করে যাতে আপনি নিজের অ্যাপ্লিকেশন জুড়ে Google-এর 3D ছবি ব্যবহার করতে পারেন। 3D ম্যাপে বিল্ট-ইন 3D রেন্ডারিং অভিজ্ঞতা পাওয়া যায়, যার মাধ্যমে আপনি
3D বাস্তব-জগতের পরিবেশ, শহরের দৃশ্য এবং ল্যান্ডমার্ক ট্যুর
যোগ করতে বা পরীক্ষা করতে পারেন।
3D টেরেন, ক্যামেরা টিল্ট, হেডিং ও রেঞ্জ
ফ্লাইওভার, এক্সট্রুড করা 3D বিল্ডিং ও 3D অবজেক্টের জন্য 3D
<gmp-map-3d>
(maps3d লাইব্রেরিতে
Map3DElement) ব্যবহার করুন, যেমন
Marker3DElement
(<gmp-marker-3d>)।
ফ্ল্যাট 2D রোড ম্যাপ, স্ট্যান্ডার্ড 2D
AdvancedMarkerElement
পিন ও 2D ভেক্টর স্টাইলিংয়ের জন্য 2D
<gmp-map>
(maps লাইব্রেরিতে
MapElement অথবা
google.maps.Map) ব্যবহার করুন।
Maps JavaScript-এ 3D Maps-এর সাহায্যে আপনি কী করতে পারবেন?
- বাস্তব-জগতের ম্যাপের অভিজ্ঞতা তৈরি করুন:
SATELLITEবাHYBRIDমোডে (যা স্যাটেলাইট ইমেজের উপর বেসম্যাপ লেবেল ওভারলে করে) শহর, ভূখণ্ড এবং ল্যান্ডমার্কের ফটোরিয়েলিস্টিক 3D এরিয়াল ইমেজ রেন্ডার করুন অথবাmodeপ্রপার্টি ব্যবহার করেROADMAPমোডে স্টাইল করা 3D বেসম্যাপ দেখান। আরও তথ্যের জন্য, ম্যাপ মোড পরিবর্তন করুন বিকল্প দেখুন। - ম্যাপের স্টাইল কাস্টমাইজ করুন:
- 3D ক্লাউড-ভিত্তিক ম্যাপ স্টাইলিং: বেসম্যাপ পয়েন্ট অফ ইন্টারেস্ট (POI) এবং রাস্তার দৃশ্যমানতা ও স্টাইলিং নিয়ন্ত্রণ করুন। আরও তথ্যের জন্য, 3D ম্যাপ কাস্টমাইজ করুন দেখুন।
- কাস্টম মার্কার, পপওভার, পলিলাইন ও পলিগন:
MarkerElement,Marker3DElement,Marker3DInteractiveElement,PopoverElement,Polyline3DElementএবংPolygon3DElementব্যবহার করে লোকেশন শনাক্ত করুন এবং ম্যাপে 3D রুট বা সীমানা আঁকুন। আরও তথ্যের জন্য, মার্কার, পপওভার এবং আকার ও লাইন দেখুন। - 3D মডেল এবং glTF অ্যাসেট:
Model3DElementব্যবহার করে রিয়েল-ওয়ার্ল্ড কোঅর্ডিনেটে বিল্ডিং, ল্যান্ডমার্ক বা অবজেক্টের কাস্টম PBR glTF 3D মডেল যোগ করুন। আরও তথ্যের জন্য, মডেল দেখুন।
- ইমারসিভ ম্যাপ তৈরি করুন:
- প্রিসেট ক্যামেরা পাথ:
flyCameraToএবংflyCameraAroundব্যবহার করে আগে থেকে নির্দিষ্ট করা ক্যামেরা ফ্লাইওভার এবং অরবিটাল অ্যানিমেশনের মাধ্যমে ব্যবহারকারীদের আপনার 3D ম্যাপে গাইড করুন। আরও তথ্যের জন্য, ক্যামেরা পাথ অ্যানিমেট করুন দেখুন। - ব্যবহারকারীর ইন্টার্যাকশন নিয়ন্ত্রণ করুন: আপনার ব্যবহারকারীদের জন্য উপলভ্য কন্ট্রোল ও ক্যামেরা মুভমেন্ট কাস্টমাইজ করুন। আরও তথ্যের জন্য, 3D ম্যাপ কন্ট্রোল ও এক্সপ্লোরেশন, ক্যামেরা ভিউ ও বাউন্ড সীমাবদ্ধ করা এবং ক্যামেরার পজিশন কন্ট্রোল করা দেখুন।
- প্রিসেট ক্যামেরা পাথ:
দ্রুত উদাহরণ
maps3d লাইব্রেরি লোড করতে এবং
<gmp-map-3d>
এলিমেন্ট
mode="HYBRID",
center
(lat,lng,altitude),
range,
tilt
এবং
heading
দিয়ে রেন্ডার করতে, নিম্নলিখিত স্নিপেট ব্যবহার করুন:
<gmp-map-3d
style="height: 400px; width: 100%;"
mode="HYBRID"
center="40.7484,-73.9857,200"
range="900"
tilt="67"
heading="35">
</gmp-map-3d>
<script async
src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&v=beta&libraries=maps3d">
</script>
YOUR_API_KEY-এর জায়গায় আপনার Google Maps Platform API কী লিখুন।
Maps JavaScript-এ কীভাবে 3D Maps ব্যবহার করবেন
| ১ | সেট-আপ করুন | জাভাস্ক্রিপ্ট API সেট-আপ করুন বিকল্প দিয়ে শুরু করুন এবং তারপরে সেট-আপ করার নির্দেশাবলী সম্পূর্ণ করুন। |
| ২ | Maps JavaScript API কীভাবে বিল করে তা বোঝা | আরও তথ্যের জন্য, ব্যবহার ও বিলিং দেখুন। |
| ৩ | ম্যাপ তৈরি করা | আরও তথ্যের জন্য, শুরু করুন দেখুন। |
কভারেজ
ফোটোরিয়েলিস্টিক 3D বিল্ডিং এবং ল্যান্ডমার্ক মেশ, কাজ করে এমন দেশ ও অঞ্চলের মধ্যে বেছে নেওয়া
মেট্রোপলিটন এলাকায় উপলভ্য। 3D মেশ কভারেজ নেই এমন অঞ্চলে (যেমন ভারত),
<gmp-map-3d>
এক্সট্রুড করা 3D বিল্ডিং ছাড়াই 3D ভূখণ্ডের উচ্চতার উপর 2D স্যাটেলাইট বা রোডম্যাপের ছবি রেন্ডার করে। 3D মেশ কভারেজ নেই এমন কোনও এলাকার ল্যান্ডমার্ক দেখানোর জন্য, আপনি
Model3DElement ব্যবহার করে এর কোঅর্ডিনেটে কাস্টম glTF 3D মডেল রাখতে পারেন
অথবা 2D
<gmp-map> ব্যবহার করতে পারেন। দেশ অনুযায়ী
উপলভ্যতা (Maps JavaScript 3D কলামের অধীনে) জানতে,
Google Maps Platform কভারেজের বিবরণ দেখুন।
পরবর্তী ধাপ
- "Hello, World!" তৈরি করতে শুরু করুন নির্দেশিকা দেখুন 3D ম্যাপ।
- ম্যাপে কীভাবে ফিচার যোগ করতে হয় তা এক্সপ্লোর করতে, কোডল্যাব ইন্ট্রো ব্যবহার করে দেখুন।
- পরবর্তী কোডল্যাবে মার্কার ও অ্যানিমেশন সম্পর্কে আপনার জ্ঞান আরও বাড়ান।
- আপনার ব্যবহারের ক্ষেত্রে কাজ করে এমন একটি খুঁজে পেতে Google-এর স্যাম্পেল-এর সংগ্রহ ব্রাউজ করুন।