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

প্ল্যাটফর্ম নির্বাচন করুন: অ্যান্ড্রয়েড আইওএস জাভাস্ক্রিপ্ট

সংক্ষিপ্ত বিবরণ

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

নিম্নলিখিত উদাহরণ মানচিত্রটি একটি একক অঞ্চলের সীমানা বহুভুজকে হাইলাইট করার পদ্ধতি প্রদর্শন করে।

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

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

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

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

  • শুধুমাত্র আপনার প্রয়োজনীয় লেয়ারগুলো সক্রিয় করুন।
  • যখন কোনো লেয়ার আর ব্যবহার করা হয় না, তখন style null এ সেট করুন।

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

  1. যদি আপনি ইতিমধ্যে তা না করে থাকেন, তাহলে একটি নতুন ম্যাপ আইডি এবং ম্যাপ স্টাইল তৈরি করতে 'Get Started'- এর ধাপগুলো অনুসরণ করুন। 'Locality' ফিচার লেয়ারটি অবশ্যই সক্রিয় করবেন।

  2. ম্যাপটি চালু হওয়ার সময় লোকালিটি ফিচার লেয়ারের একটি রেফারেন্স নিন।

    টাইপস্ক্রিপ্ট 

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

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

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

  3. google.maps.FeatureStyleFunction টাইপের একটি স্টাইল ডেফিনিশন তৈরি করুন।

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

    টাইপস্ক্রিপ্ট 

    // 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: { feature: { placeId: string } }) => {
    if (options.feature.placeId == 'ChIJ0zQtYiWsVHkRk8lRoB1RNPo') {
        // Hana, HI
        return featureStyleOptions;
    }
};
    index.ts

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

    // 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) => {
    if (options.feature.placeId == 'ChIJ0zQtYiWsVHkRk8lRoB1RNPo') {
        // Hana, HI
        return featureStyleOptions;
    }
};
    index.js

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

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

কোনো লেয়ার থেকে স্টাইলিং অপসারণ করতে, style null এ সেট করুন:

featureLayer.style = null;

বৈশিষ্ট্যগুলি লক্ষ্য করতে স্থানের আইডিগুলি সন্ধান করুন।

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

অঞ্চলভেদে আওতা ভিন্ন হয়। বিস্তারিত জানতে গুগলের সীমানা আওতা দেখুন।

ভৌগোলিক নাম বিভিন্ন উৎস থেকে পাওয়া যায়, যেমন ইউএসজিএস বোর্ড অন জিওগ্রাফিক নেমস এবং ইউএস গেজেটিয়ার ফাইলস ।

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

টাইপস্ক্রিপ্ট 

let featureLayer;

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

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

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

    // Get the feature layer.
    featureLayer = innerMap.getFeatureLayer(google.maps.FeatureType.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: { feature: { placeId: string } }) => {
        if (options.feature.placeId == 'ChIJ0zQtYiWsVHkRk8lRoB1RNPo') {
            // Hana, HI
            return featureStyleOptions;
        }
    };
}

initMap();
index.ts

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

let featureLayer;
async function initMap() {
    // 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(google.maps.FeatureType.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) => {
        if (options.feature.placeId == 'ChIJ0zQtYiWsVHkRk8lRoB1RNPo') {
            // Hana, HI
            return featureStyleOptions;
        }
    };
}
initMap();
index.js

সিএসএস 

/* 
 * 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>
    <head>
        <title>Boundaries Simple</title>

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

নমুনা চেষ্টা করুন