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

ওভারভিউ

একটি সীমানা বহুভুজের জন্য ফিল এবং স্ট্রোকের স্টাইল করতে, শৈলী বৈশিষ্ট্যগুলি সংজ্ঞায়িত করতে FeatureStyleOptions ব্যবহার করুন এবং একটি বৈশিষ্ট্য স্তরে একটি google.maps.FeatureStyleFunction এ style বৈশিষ্ট্য সেট করুন, যাতে স্টাইলিং লজিক রয়েছে৷

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

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

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

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

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

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

স্থানীয় বৈশিষ্ট্য স্তরে একটি বহুভুজ স্টাইল করতে, নিম্নলিখিত পদক্ষেপগুলি নিন:

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

2. মানচিত্র শুরু হলে স্থানীয় বৈশিষ্ট্য স্তরের একটি রেফারেন্স পান।

   featureLayer = map.getFeatureLayer("LOCALITY");

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

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

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

   // Define a style with purple fill and border.
   //@ts-ignore
   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.
   //@ts-ignore
   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.
   //@ts-ignore
   const featureStyleOptions = {
     strokeColor: "#810FCB",
     strokeOpacity: 1.0,
     strokeWeight: 3.0,
     fillColor: "#810FCB",
     fillOpacity: 0.5,
   };
   
   // Apply the style to a single boundary.
   //@ts-ignore
   featureLayer.style = (options) => {
     if (options.feature.placeId == "ChIJ0zQtYiWsVHkRk8lRoB1RNPo") {
       // Hana, HI
       return featureStyleOptions;
     }
   };
   index.js

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

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

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

featureLayer.style = null;

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

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

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

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

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

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

let map: google.maps.Map;
//@ts-ignore
let featureLayer;

async function initMap() {
  // Request needed libraries.
  const { Map } = await google.maps.importLibrary("maps") as google.maps.MapsLibrary;

  map = new Map(document.getElementById('map') as HTMLElement, {
    center: { lat: 20.773, lng: -156.01 }, // Hana, HI
    zoom: 12,
    // In the cloud console, configure this Map ID with a style that enables the
    // "Locality" feature layer.
    mapId: 'a3efe1c035bad51b', // <YOUR_MAP_ID_HERE>,
  });

  //@ts-ignore
  featureLayer = map.getFeatureLayer('LOCALITY');

  // Define a style with purple fill and border.
  //@ts-ignore
  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.
  //@ts-ignore
  featureLayer.style = (options: { feature: { placeId: string; }; }) => {
    if (options.feature.placeId == 'ChIJ0zQtYiWsVHkRk8lRoB1RNPo') { // Hana, HI
      return featureStyleOptions;
    }
  };

}

initMap();
index.ts

let map;
//@ts-ignore
let featureLayer;

async function initMap() {
  // Request needed libraries.
  const { Map } = await google.maps.importLibrary("maps");

  map = new Map(document.getElementById("map"), {
    center: { lat: 20.773, lng: -156.01 }, // Hana, HI
    zoom: 12,
    // In the cloud console, configure this Map ID with a style that enables the
    // "Locality" feature layer.
    mapId: "a3efe1c035bad51b", // <YOUR_MAP_ID_HERE>,
  });
  //@ts-ignore
  featureLayer = map.getFeatureLayer("LOCALITY");

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

  // Apply the style to a single boundary.
  //@ts-ignore
  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. 
 */
#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>
  </head>
  <body>
    <div id="map"></div>

    <!-- 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: "AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg", v: "weekly"});</script>
  </body>
</html>
index.html