স্থানগুলি UI কিট : একটি রেডি-টু-ব্যবহারের লাইব্রেরি যা কাস্টমাইজেশন এবং কম-কোড বিকাশের জন্য জায়গা প্রদান করে। এটি ব্যবহার করে দেখুন, এবং আপনার UI কিট অভিজ্ঞতাতে আপনার ইনপুট শেয়ার করুন।

এই পৃষ্ঠাটি Cloud Translation API অনুবাদ করেছে।

শৈলী তথ্য বৈশিষ্ট্য

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

ডেটাসেট ফিচার লেয়ারের style প্রোপার্টিটি google.maps.FeatureStyleFunction এ সেট করে ডেটা ফিচারে স্টাইল প্রয়োগ করুন, যাতে স্টাইলিং লজিক থাকতে পারে, অথবা google.maps.FeatureStyleOptions থাকতে পারে, যাতে লেয়ারের জন্য সমস্ত ফিচার একইভাবে স্টাইল করা যায়। আপনি ফিল (রঙ, অস্বচ্ছতা), স্ট্রোক (রঙ, অস্বচ্ছতা, স্ট্রোকের ওজন) এবং ব্যাস (পয়েন্ট) এর জন্য ডেটা ফিচারে স্টাইল প্রয়োগ করতে পারেন। এই পৃষ্ঠাটি দেখায় কিভাবে প্রোগ্রাম্যাটিকভাবে একটি ডেটাসেট অ্যাক্সেস করতে হয় এবং এর ফিচারগুলি স্টাইল করতে হয়, এবং পয়েন্ট, বহুভুজ এবং পলিলাইন জ্যামিতির উপর ভিত্তি করে ডেটা ফিচারের স্টাইলিং উদাহরণগুলি নিয়ে আলোচনা করা হয়।

ডেটাসেটের জন্য ডেটা-চালিত স্টাইলিং ডেটাসেট তৈরি করতে ব্যবহৃত ভূ-স্থানিক ডেটা ফাইল থেকে প্রদত্ত অক্ষাংশ এবং দ্রাঘিমাংশ স্থানাঙ্কের উপর ভিত্তি করে ডেটা বৈশিষ্ট্যগুলি রেন্ডার করে।

ডেটা বৈশিষ্ট্য বৈশিষ্ট্য

একটি ডেটাসেটের সমস্ত ডেটা ফিচার স্টাইল ফাংশনে অ্যাক্সেস করা যেতে পারে। ডেটা ফিচার অ্যাট্রিবিউট পেতে, প্রথমে ডেটাসেট বৈশিষ্ট্যটি পান, যাতে ডেটাসেটের মধ্যে সমস্ত ডেটা থাকে, তারপর আপনার পছন্দসই নির্দিষ্ট ডেটা অ্যাট্রিবিউটটি পান, যেমনটি এখানে দেখানো হয়েছে:

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

// Get the dataset feature, so we can work with all of its attributes.
const datasetFeature = params.feature;
// Get all of the needed dataset attributes.
const furColors = datasetFeature.datasetAttributes['CombinationofPrimaryandHighlightColor'];index.ts

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

// Get the dataset feature, so we can work with all of its attributes.
const datasetFeature = params.feature;
// Get all of the needed dataset attributes.
const furColors =
  datasetFeature.datasetAttributes["CombinationofPrimaryandHighlightColor"];
index.js

বৈশিষ্ট্য শৈলী বিকল্পগুলি

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

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

// Apply style to all features.
datasetLayer.style = { strokeColor: 'green', strokeWeight: 4, };index.ts

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

// Apply style to all features.
datasetLayer.style = { strokeColor: "green", strokeWeight: 4 };
index.js

বৈশিষ্ট্য শৈলী ফাংশন

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

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

const styleDefault = {
  strokeColor: 'green',
  strokeWeight: 2.0,
  strokeOpacity: 1.0,
  fillColor: 'green',
  fillOpacity: 0.3,
};

const styleClicked = {
  ...styleDefault,
  strokeColor: 'blue',
  fillColor: 'blue',
  fillOpacity: 0.5,
};

const styleMouseMove = {
   ...styleDefault,
  strokeWeight: 4.0
};

function applyStyle(/* FeatureStyleFunctionOptions */ params) {
  const datasetFeature = params.feature;
  // Note, 'globalid' is an attribute in this dataset.
  //@ts-ignore
  if (lastClickedFeatureIds.includes(datasetFeature.datasetAttributes['globalid'])) {
    return styleClicked;
  }
  //@ts-ignore
  if (lastInteractedFeatureIds.includes(datasetFeature.datasetAttributes['globalid'])) {
    return styleMouseMove;
  }
  return styleDefault;
}index.ts

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

const styleDefault = {
  strokeColor: "green",
  strokeWeight: 2.0,
  strokeOpacity: 1.0,
  fillColor: "green",
  fillOpacity: 0.3,
};
const styleClicked = {
  ...styleDefault,
  strokeColor: "blue",
  fillColor: "blue",
  fillOpacity: 0.5,
};
const styleMouseMove = {
  ...styleDefault,
  strokeWeight: 4.0,
};

function applyStyle(/* FeatureStyleFunctionOptions */ params) {
  const datasetFeature = params.feature;

  // Note, 'globalid' is an attribute in this dataset.
  //@ts-ignore
  if (
    lastClickedFeatureIds.includes(datasetFeature.datasetAttributes["globalid"])
  ) {
    return styleClicked;
  }

  //@ts-ignore
  if (
    lastInteractedFeatureIds.includes(
      datasetFeature.datasetAttributes["globalid"],
    )
  ) {
    return styleMouseMove;
  }
  return styleDefault;
}
index.js

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

পয়েন্ট ডেটা স্টাইলিং উদাহরণ

এই উদাহরণটি স্টাইলিং পয়েন্ট জ্যামিতি ভিত্তিক ডেটা বৈশিষ্ট্যগুলির একটি পদ্ধতি দেখায়।

ডেটাসেট সম্পর্কে

এই উদাহরণে ব্যবহৃত ডেটাসেটটি নিউ ইয়র্ক সিটির সেন্ট্রাল পার্কে কাঠবিড়ালির উপর ২০১৮ সালের জরিপের ফলাফল। CSV ডেটা ফাইলের নিম্নলিখিত অংশে, আমরা দেখতে পাচ্ছি যে x এবং y কলামগুলি ভূগোলের জন্য ব্যবহৃত হয়েছে; একটি LatLng কলাম অন্তর্ভুক্ত করা হয়েছে, কিন্তু এই উদাহরণে এটি ব্যবহার করা হয়নি কারণ ভৌগলিক অবস্থান দুটি কলাম দ্বারা প্রতিনিধিত্ব করা আবশ্যক। কাঠবিড়ালি আদমশুমারি ডেটাসেটে কাঠবিড়ালির পর্যবেক্ষণ করা পশমের রঙ এবং আচরণ সম্পর্কিত বিভিন্ন ডেটা পয়েন্টের একটি চমৎকার বৈচিত্র্য রয়েছে (সবকিছু দেখতে অনুভূমিকভাবে স্ক্রোল করতে ভুলবেন না)।

এক্স	স	ইউনিক কাঠবিড়ালি আইডি	হেক্টর	স্থানান্তর	তারিখ	হেক্টর কাঠবিড়ালিসংখ্যা	বয়স	প্রাথমিকপশমের রঙ	হাইলাইট করুনপশমের রঙ	প্রাথমিক এবং হাইলাইট রঙের সমন্বয়	কালারনোটস	স্থান	AboveGroundSighter পরিমাপ	নির্দিষ্ট অবস্থান	দৌড়	তাড়া করা	আরোহণ	খাওয়া	খাদ্য সংগ্রহ	কুকস	কোয়াস	হাহাকার	টেইলফ্ল্যাগ	টেইল্টউইচ	পদ্ধতি	উদাসীন	রানসফ্রম	অক্ষাংশ
-৭৩.৯৫৬১৩৪৪৯৩৭৮৬১	৪০.৭৯৪০৮২৩৮৮৪০৮৬	37F-PM-1014-03 এর কীওয়ার্ড	৩৭ফ	বিকেল	১০১৪২০১৮	৩				+					মিথ্যা	মিথ্যা	মিথ্যা	মিথ্যা	মিথ্যা	মিথ্যা	মিথ্যা	মিথ্যা	মিথ্যা	মিথ্যা	মিথ্যা	মিথ্যা	মিথ্যা	পয়েন্ট (-৭৩.৯৫৬১৩৪৪৯৩৭৮৬১ ৪০.৭৯৪০৮২৩৮৮৪০৮৬)
-৭৩.৯৬৮৮৫৭৪৬৯১১০২	৪০.৭৮৩৭৮২৫২০৮৪৪৪	২১বি-এএম-১০১৯-০৪	২১খ	সকাল	১০১৯২০১৮	৪				+					মিথ্যা	মিথ্যা	মিথ্যা	মিথ্যা	মিথ্যা	মিথ্যা	মিথ্যা	মিথ্যা	মিথ্যা	মিথ্যা	মিথ্যা	মিথ্যা	মিথ্যা	পয়েন্ট (-৭৩.৯৬৮৮৫৭৪৬৯১১০২ ৪০.৭৮৩৭৮২৫২০৮৪৪৪)
-৭৩.৯৭৪২৮১১৪৮৪৮৫২	৪০.৭৭৫৫৩৩৬১৯০৮৩	১১বি-পিএম-১০১৪-০৮	১১খ	বিকেল	১০১৪২০১৮	৮		ধূসর		ধূসর+		মাটির উপরে	১০		মিথ্যা	সত্য	মিথ্যা	মিথ্যা	মিথ্যা	মিথ্যা	মিথ্যা	মিথ্যা	মিথ্যা	মিথ্যা	মিথ্যা	মিথ্যা	মিথ্যা	পয়েন্ট (-৭৩.৯৭৪২৮১১৪৮৪৮৫২২ ৪০.৭৭৫৫৩৩৬১৯০৮৩)
-৭৩.৯৫৯৬৪১৩৯০৩৯৪৮	৪০.৭৯০৩১২৮৮৮৯০২৯	32E-PM-1017-14 এর জন্য কীওয়ার্ড	৩২ই	বিকেল	১০১৭২০১৮	১৪	প্রাপ্তবয়স্ক	ধূসর		ধূসর+	প্রাইমারি হিসেবে কিছুই নির্বাচন করা হয়নি। হাইলাইট হিসেবে ধূসর নির্বাচন করা হয়েছে। এক্সিকিউটিভ সমন্বয় করা হয়েছে।				মিথ্যা	মিথ্যা	মিথ্যা	সত্য	সত্য	মিথ্যা	মিথ্যা	মিথ্যা	মিথ্যা	মিথ্যা	মিথ্যা	মিথ্যা	সত্য	পয়েন্ট (-৭৩.৯৫৯৬৪১৩৯০৩৯৪৮ ৪০.৭৯০৩১২৮৮৮৯০২৯)
-৭৩.৯৭০২৬৭৬৪৭২৬১৩	৪০.৭৭৬২১২৬৮৫৪৮৯৪	১৩ই-এএম-১০১৭-০৫	১৩ই	সকাল	১০১৭২০১৮	৫	প্রাপ্তবয়স্ক	ধূসর	দারুচিনি	ধূসর+দারুচিনি		মাটির উপরে		গাছের গুঁড়িতে	মিথ্যা	মিথ্যা	মিথ্যা	মিথ্যা	সত্য	মিথ্যা	মিথ্যা	মিথ্যা	মিথ্যা	মিথ্যা	মিথ্যা	মিথ্যা	মিথ্যা	পয়েন্ট (-৭৩.৯৭০২৬৭৬৪৭২৬১৩ ৪০.৭৭৬২১২৬৮৫৪৮৯৪)
-৭৩.৯৬৮৩৬১৩৫১৬২২৫	৪০.৭৭২৫৯০৮৮৪৭৪৯৯	১১এইচ-এএম-১০১০-০৩	১১ ঘন্টা	সকাল	১০১০২০১৮	৩	প্রাপ্তবয়স্ক	দারুচিনি	সাদা	দারুচিনি+সাদা					মিথ্যা	মিথ্যা	মিথ্যা	মিথ্যা	সত্য	মিথ্যা	মিথ্যা	মিথ্যা	মিথ্যা	সত্য	মিথ্যা	সত্য	মিথ্যা	পয়েন্ট (-৭৩.৯৬৮৩৬১৩৫১৬২২৫ ৪০.৭৭২৫৯০৮৮৪৭৪৯৯)
-৭৩.৯৫৪১২০১৭৮৯৭৯৫	৪০.৭৯৩১৮১১৭০১০৮২	36H-AM-1010-02 এর বিবরণ	৩৬ ঘন্টা	সকাল	১০১০২০১৮	২	প্রাপ্তবয়স্ক	ধূসর		ধূসর+	হেক্টরের ঠিক বাইরে	স্থল সমতল	মিথ্যা		মিথ্যা	মিথ্যা	মিথ্যা	মিথ্যা	সত্য	মিথ্যা	মিথ্যা	মিথ্যা	মিথ্যা	মিথ্যা	মিথ্যা	মিথ্যা	মিথ্যা	পয়েন্ট (-৭৩.৯৫৪১২০১৭৮৯৭৯৫ ৪০.৭৯৩১৮১১৭০১০৮২)

স্টাইল পয়েন্ট ডেটা বৈশিষ্ট্য

এই উদাহরণের কোডটি CombinationofPrimaryandHighlightColor অ্যাট্রিবিউটের উপর ভিত্তি করে প্রতিটি পয়েন্টের জন্য ফিল কালার এবং স্ট্রোক কালার স্টাইল করার সহজ পদ্ধতি গ্রহণ করে, যা প্রতিটি কাঠবিড়ালির জন্য প্রাথমিক এবং গৌণ পশমের রঙগুলিকে একত্রিত করে।

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

function setStyle(/* FeatureStyleFunctionOptions */ params) { // Get the dataset feature, so we can work with all of its attributes. const datasetFeature = params.feature; // Get all of the needed dataset attributes. const furColors = datasetFeature.datasetAttributes['CombinationofPrimaryandHighlightColor']; // Apply styles. Fill is primary fur color, stroke is secondary fur color. switch (furColors) { case 'Black+': return /* FeatureStyleOptions */ { fillColor: 'black', pointRadius: 8 }; break; case 'Cinnamon+': return /* FeatureStyleOptions */ { fillColor: '#8b0000', pointRadius: 8 }; break; case 'Cinnamon+Gray': return /* FeatureStyleOptions */ { fillColor: '#8b0000', strokeColor: 'gray', pointRadius: 6 }; break; case 'Cinnamon+White': return /* FeatureStyleOptions */ { fillColor: '#8b0000', strokeColor: 'white', pointRadius: 6 }; break; case 'Gray+': return /* FeatureStyleOptions */ { fillColor: 'gray', pointRadius: 8 }; break; case 'Gray+Cinnamon': return /* FeatureStyleOptions */ { fillColor: 'gray', strokeColor: '#8b0000', pointRadius: 6 }; break; case 'Gray+Cinnamon, White': return /* FeatureStyleOptions */ { fillColor: 'silver', strokeColor: '#8b0000', pointRadius: 6 }; break; case 'Gray+White': return /* FeatureStyleOptions */ { fillColor: 'gray', strokeColor: 'white', pointRadius: 6 }; break; default: // Color not defined. return /* FeatureStyleOptions */ { fillColor: 'yellow', pointRadius: 8 }; break;  } class="devsite-github-link nocode no-select">index.ts

ডেটা বৈশিষ্ট্য বৈশিষ্ট্য

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

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

বৈশিষ্ট্য শৈলী বিকল্পগুলি

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

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

বৈশিষ্ট্য শৈলী ফাংশন

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

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

পয়েন্ট ডেটা স্টাইলিং উদাহরণ

ডেটাসেট সম্পর্কে

স্টাইল পয়েন্ট ডেটা বৈশিষ্ট্য

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

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

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

সম্পূর্ণ উদাহরণ সোর্স কোডটি দেখুন

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

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

সিএসএস

এইচটিএমএল

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

বহুভুজ ডেটা স্টাইলিং উদাহরণ

ডেটাসেট সম্পর্কে

স্টাইল বহুভুজ ডেটা বৈশিষ্ট্য

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

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

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

সম্পূর্ণ উদাহরণ সোর্স কোডটি দেখুন

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

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

সিএসএস

এইচটিএমএল

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

পলিলাইন ডেটা স্টাইলিং উদাহরণ

ডেটাসেট সম্পর্কে

স্টাইল পলিলাইন ডেটা বৈশিষ্ট্য

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

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

সম্পূর্ণ উদাহরণ সোর্স কোডটি দেখুন

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

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

সিএসএস

এইচটিএমএল

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

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