আপনি আপনার মানচিত্রে বিভিন্ন আকৃতি যোগ করতে পারেন। আকৃতি হলো মানচিত্রের উপর অবস্থিত একটি বস্তু, যা একটি LatLng স্থানাঙ্ক ব্যবস্থার সাথে যুক্ত থাকে। Maps JavaScript API-এর 3D Maps বৈশিষ্ট্যটি মানচিত্রে রেখা এবং বহুভুজ যোগ করা সমর্থন করে।
পলিলাইন
আপনার ম্যাপে একটি লাইন আঁকতে, পলিলাইন ব্যবহার করুন। Polyline3DElement ক্লাসটি ম্যাপের উপর সংযুক্ত লাইন সেগমেন্টের একটি রৈখিক স্তর তৈরি করে। একটি Polyline3DElement অবজেক্টে LatLng অবস্থানগুলির একটি অ্যারে থাকে এবং এটি একটি নির্দিষ্ট ক্রমে সেই অবস্থানগুলিকে সংযুক্ত করে একাধিক লাইন সেগমেন্ট তৈরি করে।
একটি পলিলাইন যোগ করুন
Polyline3DElement কনস্ট্রাক্টরটি Polyline3DElementOptions এর একটি সেট গ্রহণ করে, যা লাইনের LatLng স্থানাঙ্ক এবং পলিলাইনের দৃশ্যমান আচরণ সমন্বয় করার জন্য এক সেট স্টাইল নির্দিষ্ট করে।
পলিলাইন অবজেক্টগুলো ম্যাপের উপর একাধিক সরল রেখাংশ হিসেবে আঁকা হয়। লাইন তৈরি করার সময় আপনি Polyline3DElementOptions এর মধ্যে লাইনের স্ট্রোকের জন্য নিজস্ব রং, প্রস্থ, অস্বচ্ছতা, উচ্চতা এবং জ্যামিতিক স্টাইলিং অপশন নির্দিষ্ট করে দিতে পারেন, অথবা লাইনটি তৈরি করার পরেও সেই প্রোপার্টিগুলো পরিবর্তন করতে পারেন। একটি পলিলাইন নিম্নলিখিত স্ট্রোক স্টাইলগুলো সমর্থন করে:
-
outerColor:"#FFFFFF"ফরম্যাটের একটি হেক্সাডেসিমাল HTML রঙ। -
outerWidth:0.0এবং1.0এর মধ্যে একটি সাংখ্যিক মান, যাstrokeWidthএর শতাংশ হিসাবে গণ্য করা হয়। -
strokeColor:"#FFFFFF"ফরম্যাটের একটি হেক্সাডেসিমাল HTML রঙ। -
strokeWidth: লাইনের প্রস্থ, পিক্সেল এককে। -
geodesic: বহুভুজের কিনারাগুলো পৃথিবীর বক্রতা অনুসরণ করবে, নাকি সরলরেখা হিসেবে অঙ্কিত হবে। -
altitudeMode: স্থানাঙ্কে উচ্চতার উপাদানগুলিকে কীভাবে ব্যাখ্যা করা হয় -
drawsOccludedSegments: একটি বুলিয়ান যা নির্দেশ করে যে বস্তু (যেমন ভবন) দ্বারা আবৃত বহুভুজের অংশগুলি আঁকা হবে কিনা। -
extruded: একটি বুলিয়ান যা নির্দেশ করে পলিলাইনটি ভূমির সাথে সংযুক্ত হবে কি না।
let map; async function init() { const { Map3DElement, Polyline3DElement } = await google.maps.importLibrary('maps3d'); map = new Map3DElement({ center: { lat: 37.7927, lng: -122.402, altitude: 65.93 }, range: 3362.87, tilt: 64.01, heading: 25.0, mode: 'SATELLITE', gestureHandling: 'COOPERATIVE', }); document.body.append(map); const polyline = new Polyline3DElement({ path: [ { lat: 37.80515638571346, lng: -122.4032569467164 }, { lat: 37.80337073509504, lng: -122.4012878349353 }, { lat: 37.79925208843463, lng: -122.3976697250461 }, { lat: 37.7989102378512, lng: -122.3983408725656 }, { lat: 37.79887832784348, lng: -122.3987094864192 }, { lat: 37.79786443410338, lng: -122.4066878788802 }, { lat: 37.79549248916587, lng: -122.4032992702785 }, { lat: 37.78861484290265, lng: -122.4019489189814 }, { lat: 37.78618687561075, lng: -122.398969592545 }, { lat: 37.7892310309145, lng: -122.3951458683092 }, { lat: 37.7916358762409, lng: -122.3981969390652 }, ], strokeColor: 'blue', outerColor: 'white', strokeWidth: 10, outerWidth: 0.4, altitudeMode: 'RELATIVE_TO_GROUND', // Place it on the ground (as it has no altitude it will just be at ground height). drawsOccludedSegments: true, // Show the line through the buildings or anything else that might get in the way. }); map.append(polyline); } void init();
ইন্টারেক্টিভ পলিলাইন
নিম্নলিখিত উদাহরণটি একটি ক্লিক ইভেন্ট নিবন্ধন করার পর পলিলাইনের drawsOccludedSegments প্রপার্টিটি টগল করে।
let map; async function init() { const { Map3DElement, Polyline3DInteractiveElement } = await google.maps.importLibrary('maps3d'); map = new Map3DElement({ center: { lat: 37.7927, lng: -122.402, altitude: 65.93 }, range: 3362.87, tilt: 64.01, heading: 25.0, mode: 'SATELLITE', gestureHandling: 'COOPERATIVE', }); document.body.append(map); const polyline = new Polyline3DInteractiveElement({ coordinates: [ { lat: 37.80515638571346, lng: -122.4032569467164 }, { lat: 37.80337073509504, lng: -122.4012878349353 }, { lat: 37.79925208843463, lng: -122.3976697250461 }, { lat: 37.7989102378512, lng: -122.3983408725656 }, { lat: 37.79887832784348, lng: -122.3987094864192 }, { lat: 37.79786443410338, lng: -122.4066878788802 }, { lat: 37.79549248916587, lng: -122.4032992702785 }, { lat: 37.78861484290265, lng: -122.4019489189814 }, { lat: 37.78618687561075, lng: -122.398969592545 }, { lat: 37.7892310309145, lng: -122.3951458683092 }, { lat: 37.7916358762409, lng: -122.3981969390652 }, ], strokeColor: 'blue', outerColor: 'white', strokeWidth: 10, outerWidth: 0.4, altitudeMode: 'RELATIVE_TO_GROUND', // Place it on the ground (as it has no altitude it will just be at ground height). drawsOccludedSegments: true, // Show the line through the buildings or anything else that might get in the way. }); polyline.addEventListener('gmp-click', function () { // Toggle whether the line draws occluded segments. this.drawsOccludedSegments = !this.drawsOccludedSegments; }); map.append(polyline); } void init();
বহুভুজ
একটি বহুভুজ একটি বদ্ধ পথ (বা লুপ) দ্বারা আবদ্ধ একটি এলাকাকে বোঝায়, যা একাধিক স্থানাঙ্ক দ্বারা সংজ্ঞায়িত করা হয়। Polygon3DElement অবজেক্টগুলো Polyline3DElement অবজেক্টের মতোই, কারণ এগুলো একটি নির্দিষ্ট ক্রমে সাজানো একাধিক স্থানাঙ্ক নিয়ে গঠিত। বহুভুজ একটি স্ট্রোক এবং একটি ফিল দিয়ে আঁকা হয়। আপনি বহুভুজের প্রান্তের (স্ট্রোক) জন্য নিজস্ব রঙ ও প্রস্থ এবং আবদ্ধ এলাকার (ফিল) জন্য নিজস্ব রঙ ও অস্বচ্ছতা নির্ধারণ করতে পারেন। রঙগুলো হেক্সাডেসিমেল HTML ফরম্যাটে উল্লেখ করতে হবে। রঙের নাম সমর্থিত নয়।
Polygon3DElement অবজেক্টগুলো জটিল আকৃতি বর্ণনা করতে পারে, যার মধ্যে অন্তর্ভুক্ত রয়েছে:
- একটিমাত্র বহুভুজ দ্বারা সংজ্ঞায়িত একাধিক অসংলগ্ন এলাকা।
- যেসব জায়গায় গর্ত আছে।
- এক বা একাধিক এলাকার ছেদবিন্দু।
একটি জটিল আকৃতি নির্ধারণ করতে, একাধিক পথবিশিষ্ট একটি বহুভুজ ব্যবহার করা হয়।
একটি বহুভুজ যোগ করুন
যেহেতু একটি বহুভুজীয় এলাকায় একাধিক পৃথক পথ থাকতে পারে, তাই Polygon3DElement অবজেক্টের paths প্রপার্টিটি অ্যারের একটি অ্যারে নির্দিষ্ট করে। প্রতিটি অ্যারে ক্রমানুসারে সাজানো LatLng স্থানাঙ্কের একটি পৃথক অনুক্রম নির্ধারণ করে।
শুধুমাত্র একটি পাথ নিয়ে গঠিত সাধারণ পলিগনের জন্য, আপনি LatLng স্থানাঙ্কের একটি একক অ্যারে ব্যবহার করে একটি Polygon3DElement তৈরি করতে পারেন। Maps জাভাস্ক্রিপ্ট API-এর 3D Maps, path প্রপার্টির মধ্যে সংরক্ষণ করার সময়, তৈরির মুহূর্তে অ্যারেটিকে একটি অ্যারের অ্যারেতে রূপান্তর করে।
async function init() { const { Map3DElement, Polygon3DElement } = await google.maps.importLibrary('maps3d'); const map3DElement = new Map3DElement({ center: { lat: 40.6842, lng: -74.0019, altitude: 1000 }, heading: 340, tilt: 70, mode: 'HYBRID', gestureHandling: 'COOPERATIVE', }); const polygonOptions = { strokeColor: '#0000ff80', strokeWidth: 8, fillColor: '#ff000080', drawsOccludedSegments: false, }; const examplePolygon = new Polygon3DElement(polygonOptions); examplePolygon.path = [ { lat: 40.7144, lng: -74.0208 }, { lat: 40.6993, lng: -74.019 }, { lat: 40.7035, lng: -74.0004 }, ]; map3DElement.append(examplePolygon); document.body.append(map3DElement); } void init();
ইন্টারেক্টিভ বহুভুজ
নিম্নলিখিত উদাহরণটি একটি ক্লিক ইভেন্ট রেজিস্টার করার পর বহুভুজটির ভেতরের ও বাইরের রঙ পরিবর্তন করে।
async function init() { const { Map3DElement, Polygon3DInteractiveElement } = await google.maps.importLibrary('maps3d'); const map = new Map3DElement({ center: { lat: 40.6842, lng: -74.0019, altitude: 1000 }, heading: 340, tilt: 70, mode: 'HYBRID', gestureHandling: 'COOPERATIVE', }); document.body.append(map); const polygonOptions = { strokeColor: '#0000ff80', strokeWidth: 8, fillColor: '#ff000080', drawsOccludedSegments: false, }; const examplePolygon = new Polygon3DInteractiveElement(polygonOptions); examplePolygon.path = [ { lat: 40.7144, lng: -74.0208 }, { lat: 40.6993, lng: -74.019 }, { lat: 40.7035, lng: -74.0004 }, { lat: 40.7144, lng: -74.0208 }, ]; examplePolygon.addEventListener('gmp-click', function (event) { // change the color of the polygon stroke and fill colors to a random alternatives! this.fillColor = randomizeHexColor(this.fillColor); this.strokeColor = randomizeHexColor(this.strokeColor); console.log(event); }); map.append(examplePolygon); } function randomizeHexColor(originalHexColor) { console.log(originalHexColor); const alpha = originalHexColor.substring(7); // Generate random values for Red, Green, Blue (0-255) const r = Math.floor(Math.random() * 256); const g = Math.floor(Math.random() * 256); const b = Math.floor(Math.random() * 256); console.log(r + ' ' + g + ' ' + b); // Convert decimal to 2-digit hex, padding with '0' if needed const rHex = ('0' + r.toString(16)).slice(-2); const gHex = ('0' + g.toString(16)).slice(-2); const bHex = ('0' + b.toString(16)).slice(-2); // Combine parts: '#' + random RGB + original Alpha (if any) return `#${rHex}${gHex}${bHex}${alpha}`; } void init();