1. আপনি শুরু করার আগে
এই কোডল্যাবটি ম্যাপ জাভাস্ক্রিপ্টে ফটোরিয়ালিস্টিক 3D মানচিত্র ব্যবহার করে কীভাবে আপনার প্রথম 3D মানচিত্র তৈরি করবেন তা বুঝতে সাহায্য করার উদ্দেশ্যে তৈরি করা হয়েছে৷ আপনি মানচিত্র জাভাস্ক্রিপ্ট API-এর সঠিক উপাদানগুলি লোড করা, আপনার প্রথম 3D মানচিত্র প্রদর্শন এবং এতে বৈশিষ্ট্যগুলি অঙ্কন করার বিষয়ে মৌলিক বিষয়গুলি শিখবেন৷
আপনি কি নির্মাণ করবেন।
এই কোডল্যাবে, আপনি একটি 3D ওয়েব অ্যাপ তৈরি করেন যা নিম্নলিখিতগুলি করে:
- মানচিত্র জাভাস্ক্রিপ্ট API গতিশীলভাবে লোড করে।
- টরন্টোর CN টাওয়ার কেন্দ্রিক একটি 3D মানচিত্র প্রদর্শন করে।
- একটি অবস্থানের চারপাশে একটি সীমানা প্রদর্শন করে।
- 3D মানচিত্রে আগ্রহের পয়েন্টগুলি বন্ধ করে।
- অবস্থান আবরণ সীমানা বহির্ভূত.
আপনি কি শিখবেন
- Google Maps প্ল্যাটফর্ম দিয়ে শুরু করা।
- ডাইনামিক লাইব্রেরি ইম্পোর্ট ব্যবহার করে জাভাস্ক্রিপ্ট কোড থেকে ম্যাপ জাভাস্ক্রিপ্ট API ডাইনামিকভাবে লোড করা হচ্ছে।
- Map3DElement ক্লাস ব্যবহার করে একটি 3D মানচিত্র লোড করুন।
- মানচিত্রে আঁকতে বহুভুজ এবং এক্সট্রুশন ব্যবহার করে।
2. পূর্বশর্ত
এই কোডল্যাবটি সম্পূর্ণ করার জন্য আপনাকে এখানকার আইটেমগুলির সাথে নিজেকে পরিচিত করতে হবে। আপনি যদি ইতিমধ্যেই Google মানচিত্র প্ল্যাটফর্মের সাথে কাজ করার সাথে পরিচিত হন, তাহলে কোডল্যাবে এগিয়ে যান!
প্রয়োজনীয় Google Maps প্ল্যাটফর্ম পণ্য
এই কোডল্যাবে, আপনি নিম্নলিখিত Google মানচিত্র প্ল্যাটফর্ম পণ্যগুলি ব্যবহার করবেন:
- মানচিত্র জাভাস্ক্রিপ্ট API
হ্যাঁ, আপনার পৃষ্ঠায় 3D মানচিত্র যোগ করতে আপনার প্রয়োজন হবে, অন্য কিছু নয়, খুব সোজা!
এই কোডল্যাবের জন্য অন্যান্য প্রয়োজনীয়তা
এই কোডল্যাবটি সম্পূর্ণ করতে, আপনার নিম্নলিখিত অ্যাকাউন্ট, পরিষেবা এবং সরঞ্জামগুলির প্রয়োজন হবে:
- বিলিং সক্ষম সহ একটি Google ক্লাউড অ্যাকাউন্ট৷
- Maps JavaScript API সক্ষম সহ একটি Google মানচিত্র প্ল্যাটফর্ম API কী
- জাভাস্ক্রিপ্ট, এইচটিএমএল এবং সিএসএস এর প্রাথমিক জ্ঞান
- একটি টেক্সট এডিটর বা আপনার পছন্দের IDE, দেখার জন্য একটি সম্পাদনা ফাইল সংরক্ষণ করতে
- আপনি কাজ করার সাথে সাথে ফাইলটি দেখার জন্য একটি ওয়েব ব্রাউজার
3. সেট আপ করুন
Google Maps প্ল্যাটফর্ম সেট আপ করুন
আপনার যদি ইতিমধ্যেই একটি Google ক্লাউড প্ল্যাটফর্ম অ্যাকাউন্ট না থাকে এবং বিলিং সক্ষম করা একটি প্রকল্প থাকে, তাহলে অনুগ্রহ করে একটি বিলিং অ্যাকাউন্ট এবং একটি প্রকল্প তৈরি করতে Google মানচিত্র প্ল্যাটফর্মের সাথে শুরু করা নির্দেশিকাটি দেখুন৷
- ক্লাউড কনসোলে , প্রকল্পের ড্রপ-ডাউন মেনুতে ক্লিক করুন এবং এই কোডল্যাবের জন্য আপনি যে প্রকল্পটি ব্যবহার করতে চান সেটি নির্বাচন করুন।
- Google ক্লাউড মার্কেটপ্লেসে এই কোডল্যাবের জন্য প্রয়োজনীয় Google মানচিত্র প্ল্যাটফর্ম API এবং SDK সক্ষম করুন৷ এটি করতে, এই ভিডিও বা এই ডকুমেন্টেশনের ধাপগুলি অনুসরণ করুন৷
- ক্লাউড কনসোলের শংসাপত্র পৃষ্ঠায় একটি API কী তৈরি করুন। আপনি এই ভিডিও বা এই ডকুমেন্টেশনের ধাপগুলি অনুসরণ করতে পারেন। Google মানচিত্র প্ল্যাটফর্মের সমস্ত অনুরোধের জন্য একটি API কী প্রয়োজন৷
4. Maps JavaScript API লোড করুন
একবার আপনি সেট আপ করার বিভাগে সমস্ত পদক্ষেপ অনুসরণ করলে আপনি আপনার প্রথম 3D মানচিত্র তৈরি করা শুরু করতে ভাল।
আপনি কল্পনা করতে পারেন সহজতম ওয়েব পৃষ্ঠা তৈরি করুন.
প্রথমে আমরা আমাদের সমস্ত কোড হোস্ট করার জন্য একটি খুব মৌলিক ওয়েব পেজ তৈরি করব। আপনি আপনার পছন্দের যেকোনো সম্পাদক বা প্ল্যাটফর্মে এটি করতে পারেন।
<!DOCTYPE html>
<html>
<head>
<title>3D Maps Codelab</title>
<style>
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
</body>
</html>
কোডটি যোগ করুন এবং 3dmap.html এর মতো একটি নাম ব্যবহার করে ফাইলটিকে অ্যাক্সেসযোগ্য স্থানে সংরক্ষণ করুন, তারপর পৃষ্ঠার বর্তমান অবস্থা দেখতে একটি ওয়েব ব্রাউজারে এটি খুলুন এবং আপনার কোনো ত্রুটি আছে কিনা তা দেখুন৷
2D মানচিত্রের মতো 3D মানচিত্রের ভিত্তি হল মানচিত্র জাভাস্ক্রিপ্ট API, তাই আপনাকে প্রথমে এটি লোড করতে হবে।
এটি বিভিন্ন উপায়ে করা যেতে পারে, যা আপনি ডকুমেন্টেশনের লোড দ্য ম্যাপ জাভাস্ক্রিপ্ট API বিভাগে খুঁজে পেতে পারেন।
এই প্রদর্শনীতে আমরা আরও আধুনিক ডায়নামিক লাইব্রেরি আমদানি পদ্ধতি ব্যবহার করতে যাচ্ছি কারণ এটি আপনাকে ডাউনলোডের আকার এবং স্টার্টআপের সময় সংরক্ষণ করে শুধুমাত্র আপনার লোড করার জন্য প্রয়োজনীয় উপাদানগুলিকে নিয়ন্ত্রণ করতে দেয়৷
ডায়নামিক লোডার যোগ করুন
ডায়নামিক লোডার ব্যবহার করতে নিশ্চিত করুন যে আপনি আপনার ওয়েব পৃষ্ঠায় নিম্নলিখিত স্ক্রিপ্ট ট্যাগ যোগ করেছেন, উপযুক্ত জায়গায় আপনার নিজস্ব API KEY যোগ করুন (যা আপনি ধাপ 2 এ পেয়েছেন)। এই স্ক্রিপ্ট ট্যাগটি বেসিক ওয়েব পেজের বডি সেকশনের মধ্যে রাখুন।
<script async defer>
(g => { var h, a, k, p = "The Google Maps JavaScript API", c = "google", l = "importLibrary", q = "__ib__", m = document, b = window; b = b[c] || (b[c] = {}); var d = b.maps || (b.maps = {}), r = new Set, e = new URLSearchParams, u = () => h || (h = new Promise(async (f, n) => { await (a = m.createElement("script")); e.set("libraries", [...r] + ""); for (k in g) e.set(k.replace(/[A-Z]/g, t => "_" + t[0].toLowerCase()), g[k]); e.set("callback", c + ".maps." + q); a.src = `https://maps.${c}apis.com/maps/api/js?` + e; d[q] = f; a.onerror = () => h = n(Error(p + " could not load.")); a.nonce = m.querySelector("script[nonce]")?.nonce || ""; m.head.append(a) })); d[l] ? console.warn(p + " only loads once. Ignoring:", g) : d[l] = (f, ...n) => r.add(f) && u().then(() => d[l](f, ...n)) })({
key: "YOUR_API_KEY",
v: "alpha",
});
</script>
নোট করুন পণ্য প্রকাশের এই পর্যায়ে আমরা 3D মানচিত্রে অ্যাক্সেস পেতে API এর আলফা শাখা ব্যবহার করছি। এটি পণ্যগুলির সর্বাধিক পরীক্ষামূলক বৈশিষ্ট্যগুলিকে ধারণ করে এবং এটি বিকাশের সময় আপনাকে প্রাথমিক অ্যাক্সেস কোড পরীক্ষা করতে দেয় যাতে আপনি প্রকাশের সময় এটি ব্যবহার করার জন্য প্রস্তুত হতে পারেন৷
আপনার এখন ডায়নামিক লোডার সম্বলিত একটি মৌলিক ওয়েব পৃষ্ঠা থাকা উচিত (যদি আপনি পৃষ্ঠাটি খোলেন তাহলে দৃশ্যটি ফাঁকা থাকবে, কিন্তু কোনো ত্রুটি থাকবে না), আমরা এখন 3D মানচিত্র যোগ করতে প্রস্তুত।
যদি কোনো কারণে আপনার কোড কাজ না করে, আপনি ধাপ 6- এ যেতে পারেন এবং ভুল কী তা দেখতে চূড়ান্ত ফলাফলের সাথে তুলনা করতে পারেন।
পৃষ্ঠাটি কেন কাজ করছে না তা খুঁজে বের করতে, কারণটি ডিবাগ করতে আপনার ব্রাউজারে ত্রুটি কনসোলটি একবার দেখুন৷ ত্রুটি পৃষ্ঠাটি বিভিন্ন ব্রাউজারগুলির জন্য কীভাবে এটি করতে হয় সে সম্পর্কে নির্দেশনা দেয় এবং বিভিন্ন ত্রুটির বার্তা ব্যাখ্যা করে এবং কিছু সাধারণ কারণ দেয় যে কেন API কাজ করছে না। কোন বাস্তবায়নে কি ভুল হতে পারে তা খুঁজে বের করার জন্য পুরো বিকাশের সময় ব্যবহার করার জন্য এটি একটি ভাল সম্পদ।
5. একটি মানচিত্র প্রদর্শন করুন
তাই এখন আমরা পৃষ্ঠায় আমাদের প্রথম 3D মানচিত্র যোগ করতে প্রস্তুত!
google.maps.maps3d.Map3DElement ক্লাস ব্যবহার করে 3D মানচিত্র তৈরি করা হয়, যা আমাদের 3D মানচিত্র উদাহরণ তৈরি করতে এবং কাজ করতে দেয়। এই কোডল্যাবে আমরা HTML ট্যাগের পরিবর্তে সরাসরি 3D ম্যাপ অবজেক্টের সাথে কাজ করব।
Init ফাংশন তৈরি করুন এবং লাইব্রেরি লোড করুন
প্রথমে আমরা একটি ফাংশন তৈরি করব যা পৃষ্ঠায় উপাদান লোড করে। কোডটি দেখুন, আমরা প্রথমে একটি অ্যাসিঙ্ক্রোনাস ফাংশন তৈরি করি, যা আমাদের নিশ্চিত করতে দেয় যে বাকি কোডের সাথে এগিয়ে যাওয়ার আগে পুরো উপাদানটি লোড হয়েছে। পেজ লোড হওয়ার সাথে সাথে আমরা init ফাংশন চালাই।
পৃষ্ঠার মূল অংশের মধ্যে লোডিং স্ক্রিপ্টের পরে এটি যোগ করুন।
<script>
async function init() {
const { Map3DElement, MapMode } = await google.maps.importLibrary("maps3d");
}
init();
</script>
দ্রষ্টব্য যে আমরা এগিয়ে যাওয়ার আগে লাইব্রেরি লোড হয়েছে তা নিশ্চিত করতে await এক্সপ্রেশন ব্যবহার করি।
3D মানচিত্র উপাদান তৈরি করুন এবং অবস্থান নির্দিষ্ট করুন
এরপরে আমরা যে অবস্থানটি মানচিত্রটি দেখতে চাই তা নির্দিষ্ট করতে হবে। 3D মানচিত্রের জন্য আপনি ভিউ সেট করতে ব্যবহার করতে পারেন এমন বিভিন্ন প্যারামিটার রয়েছে। এগুলি ভার্চুয়াল ক্যামেরা প্যারামিটারগুলিকে নির্দেশ করে যা দৃশ্যের মধ্যে আপনি কী দেখছেন তা বর্ণনা করে৷
আসুন সিএন টাওয়ারের একটি দৃশ্য তৈরি করি যা দেখতে কিছুটা এরকম।
প্রথমে আমরা যে স্থানাঙ্কগুলি দেখতে চাই তা নির্দিষ্ট করতে হবে। এগুলো দুটি ভিন্ন দৃষ্টিভঙ্গির সমন্বয়ে গঠিত
- এর উচ্চতা সহ আমরা যে পয়েন্টটি দেখতে চাই।
- ভার্চুয়াল ক্যামেরার দূরত্ব এবং দিক যে বিন্দুর দিকে তাকাচ্ছে।
আপনি যদি নিম্নলিখিত চিত্রটি দেখেন তবে আপনি এই সেটিংসগুলি কীভাবে কাজ করে তার একটি ধারণা পেতে পারেন।
উপাদানটির কেন্দ্র হল আপনি যে বিন্দুর দিকে তাকাচ্ছেন, যখন পরিসর হল আপনি বস্তু থেকে যত দূরত্বে আছেন এবং টিল্ট হল সেই কোণ যেখানে আপনি ছবিটি দেখছেন। আপনি যদি সেগুলিও নিয়ন্ত্রণ করতে চান তবে আপনি অবজেক্টের শিরোনাম এবং রোল সেট করতে পারেন, তবে আমরা এখানে এটি ব্যবহার করছি না।
এখন আমরা যাব এবং পৃষ্ঠায় 3D মানচিত্র তৈরি করব, লাইব্রেরি আমদানি করার পরে init বিভাগে নিম্নলিখিত কোডটি যোগ করুন।
const map3DElement = new Map3DElement({
center: { lat: 43.6425, lng: -79.3871, altitude: 400 },
range: 1000,
tilt: 60,
mode: MapMode.HYBRID,
});
document.body.append(map3DElement);
প্রথমে আমরা উপাদান তৈরি করি এবং উপযুক্ত অবস্থানের পরামিতি সেট করি, তারপরে আমরা পৃষ্ঠায় উপাদান যোগ করি (আমরা চাইলে এটি বিদ্যমান ডিভ-এ বরাদ্দ করতে পারি যদি আমরা চাই)।
আপনার কোড এখন এখানে উদাহরণ মত দেখা উচিত:
<!DOCTYPE html>
<html>
<head>
<title>3D Maps Codelab</title>
<style>
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<script async defer>
(g => { var h, a, k, p = "The Google Maps JavaScript API", c = "google", l = "importLibrary", q = "__ib__", m = document, b = window; b = b[c] || (b[c] = {}); var d = b.maps || (b.maps = {}), r = new Set, e = new URLSearchParams, u = () => h || (h = new Promise(async (f, n) => { await (a = m.createElement("script")); e.set("libraries", [...r] + ""); for (k in g) e.set(k.replace(/[A-Z]/g, t => "_" + t[0].toLowerCase()), g[k]); e.set("callback", c + ".maps." + q); a.src = `https://maps.${c}apis.com/maps/api/js?` + e; d[q] = f; a.onerror = () => h = n(Error(p + " could not load.")); a.nonce = m.querySelector("script[nonce]")?.nonce || ""; m.head.append(a) })); d[l] ? console.warn(p + " only loads once. Ignoring:", g) : d[l] = (f, ...n) => r.add(f) && u().then(() => d[l](f, ...n)) })({
key: "YOUR_API_KEY",
v: "alpha",
});
</script>
<script>
async function init() {
const { Map3DElement, MapMode } = await google.maps.importLibrary("maps3d");
const map3DElement = new Map3DElement({
center: { lat: 43.6425, lng: -79.3871, altitude: 400 },
range: 1000,
tilt: 60,
mode: MapMode.HYBRID
});
document.body.append(map3DElement);
}
init();
</script>
</body>
</html>
আমরা এখন ফাইলটি সংরক্ষণ করতে পারি এবং এটি কাজ করতে দেখতে একটি ব্রাউজারে পৃষ্ঠাটি খুলতে পারি। আমাদের দেখতে হবে ক্যামেরাটি টাওয়ারের নিচের দিকে তাকিয়ে আছে যেমনটি ছবিতে দেখানো হয়েছে। এগিয়ে যাওয়ার আগে এবং টাওয়ারের উপরে একটি বাক্স যুক্ত করার আগে একটি খেলা করুন।
6. বৈশিষ্ট্য যোগ করুন এবং এক্সট্রুড করুন
তাই এখন আমাদের কাছে একটি 3D মানচিত্র আছে, যেতে দিন এবং ব্যবহারকারীদের কাছে একটি বস্তু হাইলাইট করুন যে এটি একটি আগ্রহের আইটেম। এই ক্ষেত্রে আমরা সিএন টাওয়ারের চারপাশে একটি বাক্স তৈরি করতে একটি বহুভুজ এবং এক্সট্রুশন ফাংশন ব্যবহার করতে যাচ্ছি, যাতে এটি নীচের দৃশ্যের মতো দেখায়।
বিশৃঙ্খলা লুকান
প্রথম জিনিসটি আপনি লক্ষ্য করতে পারেন যে আমরা আগ্রহের পয়েন্টগুলি বন্ধ করে দিয়েছি। এই মানচিত্রে আমরা ফোকাস টাওয়ার নিজেই হতে চাই তাই আমাদের অন্যান্য ভিজ্যুয়াল উপাদানগুলি থেকে পরিত্রাণ পেতে হবে।
এটি করার জন্য আমাদের লেবেলগুলি লুকানোর জন্য কোডটি পরিবর্তন করতে হবে। পয়েন্ট লুকানোর জন্য SATELLITE-এ মানচিত্রের মোড লাইন আপডেট করুন।
mode: MapMode.SATELLITE,
এই বৈশিষ্ট্যটি সেট করা মানচিত্রের লেবেলগুলিকে নিষ্ক্রিয় করে, এতে শুধুমাত্র আগ্রহের পয়েন্টগুলিই অন্তর্ভুক্ত নয়, রাস্তা এবং সীমানা রেখাগুলিও অন্তর্ভুক্ত থাকে এবং অবস্থানের একটি "পরিষ্কার" দৃশ্য তৈরি করে৷
বহুভুজ যোগ করুন এবং স্টাইল করুন
পরবর্তী ধাপ হল পৃষ্ঠায় বহুভুজ যোগ করা। এটি দুটি ধাপে করা যেতে পারে। প্রথমে আমাদের প্রয়োজনীয় তথ্য ধারণ করে ফাংশনগুলি লোড করতে হবে এবং পরেরটি বহুভুজ সম্পর্কে স্টাইলিং বিশদ উল্লেখ করতে হবে, যেমন এর রঙ বা এটি অন্যান্য বৈশিষ্ট্যগুলির পিছনে প্রদর্শিত হবে কিনা।
প্রথমে আমরা নিচের কোডের লাইনটি ব্যবহার করে পৃষ্ঠায় প্রয়োজনীয় ক্লাস যোগ করি।
const { Polygon3DElement, AltitudeMode } = await google.maps.importLibrary("maps3d");
এটি পৃষ্ঠায় Polygon3DElement এবং AltitudeMode ক্লাসগুলিকে লোড করে, যেগুলি ভিউতে একটি বহুভুজ বস্তু যোগ করার জন্য প্রয়োজন৷
একটি বহুভুজের অনেকগুলি বিভিন্ন সেটিংস থাকতে পারে যা দৃশ্যকে নিয়ন্ত্রণ করতে পারে, স্ট্রোকের প্রস্থ, রঙ (নাম বা হেক্স মান অনুসারে) এবং সীমানার অস্বচ্ছতা এবং ফিল সেটিংস, এটি অন্যান্য বৈশিষ্ট্য বা বিল্ডিংয়ের পিছনে দেখানো হয় কিনা তা নিয়ন্ত্রণ করতে, উদাহরণস্বরূপ: আবদ্ধ অংশগুলি আঁকা। আপনি Polygon3DElement ক্লাসের জন্য ডকুমেন্টেশনে আরও বিশদ জানতে পারেন।
আমাদের সেট করতে হবে অন্য বৈশিষ্ট্য যাতে বহুভুজ একটি বহিষ্কৃত পদ্ধতিতে আঁকা হয়। এর অর্থ হল তার নির্ধারিত উচ্চতায় একটি বহুভুজ আঁকা এবং তারপর এটিকে মাটিতে প্রসারিত করা। এটি বহুভুজকে একটি বাক্সের মতো উচ্চতা দেয় (যা আপনি উপরের ছবিতে দেখতে পাচ্ছেন)। এর জন্য আমাদের বহুভুজে উচ্চতা মোড সেট করতে হবে, এই কারণেই আমাদের উপরে AltitudeMode ধ্রুবকগুলি লোড করতে হবে। বহুভুজ বের করার জন্য এটিকে ABSOLUTE বা RELATIVE_TO_GROUND তে সেট করতে হবে যাতে বহুভুজ শীর্ষবিন্দুতে উচ্চতা থেকে সঠিক অবস্থান পাওয়া যায়।
কোডটি একটি আক্ষরিক বস্তু তৈরি করে যা এই বৈশিষ্ট্যগুলি ধারণ করে যা দেখানো হিসাবে Polygon3DElement অবজেক্ট তৈরি করতে ব্যবহার করা যেতে পারে:
const polygonOptions = {
strokeColor: "#EA433580",
strokeWidth: 4,
fillColor: "#0000FF80",
altitudeMode: "ABSOLUTE",
extruded: true,
drawsOccludedSegments: true,
}
const towerPolygon = new google.maps.maps3d.Polygon3DElement(polygonOptions);
এখন আমরা বহুভুজ বস্তু তৈরি করেছি এবং আমাদের অবশ্যই এর ভৌগলিক স্থানাঙ্কও সেট করতে হবে। বহুভুজের ভিতরের এবং বাইরের উভয় স্থানাঙ্ক থাকতে পারে যেগুলি কীভাবে উপস্থাপন করা হচ্ছে তার উপর নির্ভর করে, অভ্যন্তরীণ কোঅর্ডিনেটগুলি বহুভুজের মধ্যে কাট আউটের রূপ দেয় এবং বহিরাগত কোঅর্ডিনেটগুলি বহুভুজের বাইরের সীমানা নির্ধারণ করে। যেহেতু এটি একটি বহুভুজ এবং একটি লাইন নয় তাই স্থানাঙ্কগুলিকে একটি সম্পূর্ণ আকৃতি দেওয়ার জন্য একই বিন্দুতে শুরু এবং শেষ করতে হবে।
আপনি LatLng বা LatLngAltitude অবজেক্ট বা লিটারেলগুলির একটি অ্যারে ব্যবহার করে স্থানাঙ্কগুলি নির্দিষ্ট করতে পারেন এবং আমরা এটি আমাদের মৌলিক বহুভুজের জন্য দেখতে পারি।
towerPolygon.outerCoordinates = [
{ lat: 43.6427196, lng: -79.3876802, altitude: 600 },
{ lat: 43.6421742, lng: -79.3869184, altitude: 600 },
{ lat: 43.643001, lng: -79.3866475, altitude: 600 },
{ lat: 43.6427196, lng: -79.3876802, altitude: 600 }
];
এখন আমরা বহুভুজের জন্য স্টাইলিং এবং স্থানাঙ্ক সেট আপ করেছি আমরা এটিকে পৃষ্ঠায় যুক্ত করতে প্রস্তুত। বহুভুজ হল মানচিত্র উপাদানের শিশু উপাদান এবং পৃষ্ঠায় বিদ্যমান একটি মানচিত্র বস্তুতে যোগ করা প্রয়োজন। পৃষ্ঠায় নিম্নলিখিত কোড যোগ করুন.
map3DElement.append(towerPolygon);
একবার আমাদের হয়ে গেলে আমাদের নিম্নলিখিত সম্পূর্ণ বাস্তবায়ন করা উচিত, যেমনটি এখানে দেখানো হয়েছে (এতে আপনার নিজস্ব API কী থাকবে)। আমরা পৃষ্ঠাটি চালাতে এবং ফলাফল দেখতে প্রস্তুত।
<!DOCTYPE html>
<html>
<head>
<title>3D Maps Codelab</title>
<style>
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<script async defer>
(g => { var h, a, k, p = "The Google Maps JavaScript API", c = "google", l = "importLibrary", q = "__ib__", m = document, b = window; b = b[c] || (b[c] = {}); var d = b.maps || (b.maps = {}), r = new Set, e = new URLSearchParams, u = () => h || (h = new Promise(async (f, n) => { await (a = m.createElement("script")); e.set("libraries", [...r] + ""); for (k in g) e.set(k.replace(/[A-Z]/g, t => "_" + t[0].toLowerCase()), g[k]); e.set("callback", c + ".maps." + q); a.src = `https://maps.${c}apis.com/maps/api/js?` + e; d[q] = f; a.onerror = () => h = n(Error(p + " could not load.")); a.nonce = m.querySelector("script[nonce]")?.nonce || ""; m.head.append(a) })); d[l] ? console.warn(p + " only loads once. Ignoring:", g) : d[l] = (f, ...n) => r.add(f) && u().then(() => d[l](f, ...n)) })({
key: "YOUR_API_KEY",
v: "alpha",
});
</script>
<script>
async function init() {
const { Map3DElement, MapMode } = await google.maps.importLibrary("maps3d");
const map3DElement = new Map3DElement({
center: { lat: 43.6425, lng: -79.3871, altitude: 400 },
range: 1000,
tilt: 60,
mode: MapMode.SATELLITE,
});
const { Polygon3DElement, AltitudeMode } = await google.maps.importLibrary("maps3d");
const polygonOptions = {
strokeColor: "#EA433580",
strokeWidth: 4,
fillColor: "#0000FF80",
fillOpacity: 0.2,
altitudeMode: "ABSOLUTE",
extruded: true,
drawsOccludedSegments: true,
}
const towerPolygon = new google.maps.maps3d.Polygon3DElement(polygonOptions);
towerPolygon.outerCoordinates = [
{ lat: 43.6427196, lng: -79.3876802, altitude: 600 },
{ lat: 43.6421742, lng: -79.3869184, altitude: 600 },
{ lat: 43.643001, lng: -79.3866475, altitude: 600 },
{ lat: 43.6427196, lng: -79.3876802, altitude: 600 }
];
map3DElement.append(towerPolygon);
document.body.append(map3DElement);
}
init();
</script>
</body>
</html>
কোডটি সঠিক হলে আপনাকে নিম্নলিখিত 3D মানচিত্র এবং বহুভুজ সহ একটি পৃষ্ঠা দেখতে হবে।
আপনি Google মানচিত্র প্ল্যাটফর্ম ব্যবহার করে সফলভাবে আপনার প্রথম 3D মানচিত্র তৈরি করেছেন, যার মধ্যে মানচিত্র জাভাস্ক্রিপ্ট API লোড করা, একটি 3D মানচিত্র তৈরি করা এবং একটি এক্সট্রুড বহুভুজ যোগ করা।
7. পরবর্তী কি?
এই কোডল্যাবে, আপনি Maps JavaScript API দিয়ে কী করতে পারেন তার মূল বিষয়গুলি কভার করেছেন৷ এর পরে, মানচিত্রে এই বৈশিষ্ট্যগুলির মধ্যে কিছু যোগ করার চেষ্টা করুন:
- আগ্রহের পয়েন্টগুলি চালু এবং বন্ধ করার জন্য একটি বোতাম যোগ করুন।
- কিছু লাইন যোগ করুন যা বিভিন্ন জায়গায় এবং থেকে একটি রুট দেখায়..
- ব্যবহারকারী ভিউটি কোথায় সরাতে পারে তা নিয়ন্ত্রণ করতে কিছু সীমানা সীমাবদ্ধতা সেট করুন।
- মানচিত্র জাভাস্ক্রিপ্ট API-এর জন্য উপলব্ধ অতিরিক্ত লাইব্রেরিগুলি দেখুন যা অতিরিক্ত পরিষেবাগুলিকে সক্ষম করে, যেমন স্থান বা দিকনির্দেশ।
আপনি ওয়েবে Google মানচিত্র প্ল্যাটফর্ম এবং 3D এর সাথে কাজ করতে পারেন এমন আরও উপায় শেখা চালিয়ে যেতে, এই লিঙ্কগুলি দেখুন: