সীমানা বহুভুজ স্টাইল করা

প্ল্যাটফর্ম বেছে নিন: Android iOS JavaScript

এক নজরে

বাউন্ডারি বহুভুজ পূরণ ও স্ট্রোক করার স্টাইল নির্দিষ্ট করতে, স্টাইল অ্যাট্রিবিউটকে ডিফাইন করতে FeatureStyleOptions ব্যবহার করুন এবং ফিচার লেয়ারের style প্রপার্টিকে a google.maps.FeatureStyleFunction-এ সেট করুন, যার মধ্যে স্টাইলিং লজিক থাকে।

নিচের উদাহরণ ম্যাপে একটি অঞ্চলের সীমানা পলিগন হাইলাইট করে দেখানো হয়েছে।

style প্রপার্টিকে google.maps.FeatureStyleFunction-এ সেট করে বাউন্ডারি ফিচারে স্টাইল প্রয়োগ করুন, এতে স্টাইলিং লজিক থাকতে পারে। স্টাইল ফাংশনটি প্রভাবিত ফিচার লেয়ারের প্রতিটি ফিচারের উপর রান করে এবং আপনি স্টাইল প্রপার্টি সেট করার সময় প্রয়োগ করা হয়। এটি আপডেট করতে, আপনাকে অবশ্যই আবার style প্রপার্টি সেট করতে হবে।

ফিচার লেয়ারের সব ফিচারকে একই স্টাইলে সাজাতে, style প্রপার্টিকে google.maps.FeatureStyleOptions হিসেবে সেট করুন। এই ক্ষেত্রে, আপনাকে ফিচার স্টাইল ফাংশন ব্যবহার করতে হবে না, কারণ লজিকের প্রয়োজন নেই।

ফিচারের উপর প্রয়োগ করা হলে, স্টাইল ফাংশন সবসময় একই ধরনের ফলাফল দেয়। যেমন, আপনি যদি কোনও ফিচারের সেটকে র‍্যান্ডম রঙ করতে চান, তাহলে র‍্যান্ডম অংশটি ফিচার স্টাইল ফাংশনে করা উচিত নয়, কারণ এটি অনাকাঙ্ক্ষিত ফলাফল তৈরি করবে।

এই ফাংশন লেয়ারের প্রতিটি ফিচারের উপর রান করে বলে, অপ্টিমাইজেশন গুরুত্বপূর্ণ। রেন্ডারিংয়ের সময় যাতে প্রভাবিত না হয়, তার জন্য:

• আপনার প্রয়োজনীয় লেয়ারগুলিই শুধু চালু করুন।
• কোনও লেয়ার আর ব্যবহার না হলে style-কে null হিসেবে সেট করুন।

লোকালিটি ফিচার লেয়ারে কোনও পলিগন স্টাইল করতে, নিম্নলিখিত ধাপগুলি অনুসরণ করুন:

1. আপনি আগে থেকে এটি না করে থাকলে, নতুন ম্যাপ আইডি ও ম্যাপ স্টাইল তৈরি করতে, শুরু করা যাক লিঙ্কে দেওয়া ধাপগুলি অনুসরণ করুন। Locality ফিচার লেয়ার চালু করতে ভুলবেন না।

2. ম্যাপ ইনিশিয়ালাইজ করার সময় লোকালিটি ফিচার লেয়ারের রেফারেন্স পান।

   TypeScript

   // Get the feature layer.
   featureLayer = innerMap.getFeatureLayer('LOCALITY');
   index.ts

   মনে রাখবেন: TypeScript ও Google Maps ব্যবহার করা সংক্রান্ত নির্দেশিকা পড়ুন।

   জাভাস্ক্রিপ্ট

   // Get the feature layer.
   featureLayer = innerMap.getFeatureLayer('LOCALITY');
   index.js

3. google.maps.FeatureStyleFunction ধরনের স্টাইল সংজ্ঞা তৈরি করুন।

4. ফিচার লেয়ারে style প্রপার্টিকে FeatureStyleFunction হিসেবে সেট করুন। নিচের উদাহরণে, শুধুমাত্র google.maps.Feature-এর সাথে মিলে যাওয়া প্লেস আইডিতে স্টাইল প্রয়োগ করার জন্য ফাংশন কীভাবে ডিফাইন করতে হয় তা দেখানো হয়েছে:

   TypeScript

   // Define a style with purple fill and border.
   const featureStyleOptions: google.maps.FeatureStyleOptions = {
       strokeColor: '#810FCB',
       strokeOpacity: 1.0,
       strokeWeight: 3.0,
       fillColor: '#810FCB',
       fillOpacity: 0.5,
   };
   
   // Apply the style to a single boundary.
   featureLayer.style = (options: google.maps.FeatureStyleFunctionOptions) => {
       const feature = options.feature as google.maps.PlaceFeature;
       if (feature.placeId === 'ChIJ0zQtYiWsVHkRk8lRoB1RNPo') {
           // Hana, HI
           return featureStyleOptions;
       }
       return null;
   };
   index.ts

   মনে রাখবেন: TypeScript ও Google Maps ব্যবহার করার ব্যাপারে গাইড পড়ুন।

   জাভাস্ক্রিপ্ট

   // Define a style with purple fill and border.
   const featureStyleOptions = {
       strokeColor: '#810FCB',
       strokeOpacity: 1.0,
       strokeWeight: 3.0,
       fillColor: '#810FCB',
       fillOpacity: 0.5,
   };
   
   // Apply the style to a single boundary.
   featureLayer.style = (options) => {
       const feature = options.feature;
       if (feature.placeId === 'ChIJ0zQtYiWsVHkRk8lRoB1RNPo') {
           // Hana, HI
           return featureStyleOptions;
       }
       return null;
   };
   index.js

উল্লেখ করা জায়গার আইডি খুঁজে পাওয়া না গেলে অথবা বেছে নেওয়া ফিচার টাইপের সাথে ম্যাচ না করলে, স্টাইল প্রয়োগ করা হয় না। যেমন, "New York City"-এর প্লেস আইডির সাথে ম্যাচ করা POSTAL_CODE লেয়ারে স্টাইল প্রয়োগ করার চেষ্টা করলে কোনও স্টাইল প্রয়োগ করা যাবে না।

কোনও লেয়ার থেকে স্টাইলিং সরানো

কোনও লেয়ার থেকে স্টাইলিং সরাতে, style-কে null হিসেবে সেট করুন:

featureLayer.style = null;

ফিচার টার্গেট করার জন্য প্লেস আইডি খোঁজা

অঞ্চলগুলির জন্য প্লেস আইডি পেতে:

• নামের মাধ্যমে অঞ্চল সার্চ করতে এবং নির্দিষ্ট সীমার মধ্যে থাকা অঞ্চলের জন্য প্লেস আইডি পেতে, Places API ও জিওকোডিং ব্যবহার করুন।
• ক্লিক ইভেন্ট থেকে ডেটা পান। এটি ক্লিক করা অঞ্চলের সাথে সম্পর্কিত ফিচার প্রদান করে, যা এর প্লেস আইডি, ডিসপ্লে নাম এবং ফিচার টাইপ ক্যাটেগরিতে অ্যাক্সেস প্রদান করে।

অঞ্চল অনুযায়ী কভারেজ আলাদা হতে পারে। আরও জানতে Google বাউন্ডারি কভারেজ দেখুন।

ভৌগোলিক নাম অনেক সোর্স থেকে পাওয়া যায়, যেমন USGS Board on Geographic Names, এবং U.S. Gazetteer Files।

সম্পূর্ণ উদাহরণ কোড

TypeScript

let featureLayer: google.maps.FeatureLayer;

async function init() {
    // Request needed libraries.
    await google.maps.importLibrary('maps');

    // Get the gmp-map element.
    const mapElement = document.querySelector('gmp-map')!;

    // Get the inner map.
    const innerMap = mapElement.innerMap;

    // Get the feature layer.
    featureLayer = innerMap.getFeatureLayer('LOCALITY');

    // Define a style with purple fill and border.
    const featureStyleOptions: google.maps.FeatureStyleOptions = {
        strokeColor: '#810FCB',
        strokeOpacity: 1.0,
        strokeWeight: 3.0,
        fillColor: '#810FCB',
        fillOpacity: 0.5,
    };

    // Apply the style to a single boundary.
    featureLayer.style = (options: google.maps.FeatureStyleFunctionOptions) => {
        const feature = options.feature as google.maps.PlaceFeature;
        if (feature.placeId === 'ChIJ0zQtYiWsVHkRk8lRoB1RNPo') {
            // Hana, HI
            return featureStyleOptions;
        }
        return null;
    };
}

void init();
index.ts

মনে রাখবেন: TypeScript ও Google Maps ব্যবহার করা সংক্রান্ত নির্দেশিকা পড়ুন।

জাভাস্ক্রিপ্ট

let featureLayer;

async function init() {
    // Request needed libraries.
    await google.maps.importLibrary('maps');

    // Get the gmp-map element.
    const mapElement = document.querySelector('gmp-map');

    // Get the inner map.
    const innerMap = mapElement.innerMap;

    // Get the feature layer.
    featureLayer = innerMap.getFeatureLayer('LOCALITY');

    // Define a style with purple fill and border.
    const featureStyleOptions = {
        strokeColor: '#810FCB',
        strokeOpacity: 1.0,
        strokeWeight: 3.0,
        fillColor: '#810FCB',
        fillOpacity: 0.5,
    };

    // Apply the style to a single boundary.
    featureLayer.style = (options) => {
        const feature = options.feature;
        if (feature.placeId === 'ChIJ0zQtYiWsVHkRk8lRoB1RNPo') {
            // Hana, HI
            return featureStyleOptions;
        }
        return null;
    };
}

void init();
index.js

CSS

/* 
 * Always set the map height explicitly to define the size of the div element
 * that contains the map. 
 */
gmp-map {
    height: 100%;
}

/* 
 * Optional: Makes the sample page fill the window. 
 */
html,
body {
    height: 100%;
    margin: 0;
    padding: 0;
}
style.css

HTML

<html>
    <head>
        <title>Boundaries Simple</title>

        <link rel="stylesheet" type="text/css" href="./style.css" />
        <script type="module" src="./index.js"></script>
        <script>
            // prettier-ignore
            (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: "GOOGLE_MAPS_API_KEY"
            });
        </script>
    </head>
    <body>
        <gmp-map
            center="20.773,-156.01"
            zoom="12"
            map-id="8b37d7206ccf0121d4414bb0"></gmp-map>
    </body>
</html>
index.html