আপনি ম্যাপে বিভিন্ন আকার যোগ করতে পারবেন। শেপ হল ম্যাপের একটি অবজেক্ট, যা
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', }); 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', }); 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 অবজেক্টের পাথ প্রপার্টি অ্যারের একটি অ্যারে নির্দিষ্ট করে। প্রতিটি
অ্যারে, ক্রম অনুযায়ী LatLng স্থানাঙ্কের একটি পৃথক সিকোয়েন্স নির্ধারণ করে।
শুধুমাত্র একটি পাথ নিয়ে গঠিত বেসিক পলিগনের জন্য, আপনি LatLng কোঅর্ডিনেটের একটি অ্যারে ব্যবহার করে
Polygon3DElement তৈরি করতে পারেন। Maps JavaScript 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', }); 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', }); 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();