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

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

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

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

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

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

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

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

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

লোকালিটি ফিচার লেয়ারে একটি বহুভুজ স্টাইল করতে, নিম্নলিখিত পদক্ষেপগুলি গ্রহণ করুন:

1. যদি আপনি ইতিমধ্যেই এটি না করে থাকেন, তাহলে একটি নতুন মানচিত্র আইডি এবং মানচিত্র শৈলী তৈরি করতে শুরু করুন এর ধাপগুলি অনুসরণ করুন। লোকালিটি বৈশিষ্ট্য স্তরটি সক্ষম করতে ভুলবেন না।

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;

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

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

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

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

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

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

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"});</script>
  </head>
  <body>
    <gmp-map center="20.773,-156.01" zoom="12" map-id="8b37d7206ccf0121d4414bb0">
  </body>
</html>
index.html