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

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

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

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

একটি google.maps.FeatureStyleFunction এ ডেটাসেট বৈশিষ্ট্য স্তরে style বৈশিষ্ট্য সেট করে ডেটা বৈশিষ্ট্যগুলিতে শৈলী প্রয়োগ করুন, যেটিতে স্টাইলিং লজিক থাকতে পারে, বা একটি 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

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

স্টাইলিং ডেটাসেট বৈশিষ্ট্যগুলির জন্য যুক্তি সংজ্ঞায়িত করতে একটি বৈশিষ্ট্য শৈলী ফাংশন ব্যবহার করুন। একটি বৈশিষ্ট্য শৈলী করতে, একটি google.maps.FeatureStyleFunction এ style বৈশিষ্ট্য সেট করুন। শৈলী ফাংশন যেখানে আপনি একটি বৈশিষ্ট্য স্তরে পৃথক বৈশিষ্ট্য শৈলী করার জন্য যুক্তি সংজ্ঞায়িত করেন। যখন 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 সেট করুন।

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

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

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

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

এক্স	Y	UniqueSquirrelID	হেক্টর	শিফট	তারিখ	হেক্টর কাঠবিড়ালি সংখ্যা	বয়স	প্রাইমারি ফার কালার	হাইলাইট ফার কালার	প্রাইমারি এবং হাইলাইট রঙের সংমিশ্রণ	কালারনোট	অবস্থান	AboveGroundSighter পরিমাপ	নির্দিষ্ট অবস্থান	চলছে	ধাওয়া	আরোহণ	খাওয়া	ফরেজিং	কুকস	কোয়াস	হাহাকার	টেলফ্ল্যাগ	টেলটুইচ	পন্থা	উদাসীন	থেকে দৌড়াচ্ছে	LatLng
-73.9561344937861	40.7940823884086	37F-PM-1014-03	37F	পিএম	10142018	3				+					মিথ্যা	মিথ্যা	মিথ্যা	মিথ্যা	মিথ্যা	মিথ্যা	মিথ্যা	মিথ্যা	মিথ্যা	মিথ্যা	মিথ্যা	মিথ্যা	মিথ্যা	পয়েন্ট (-73.9561344937861 40.7940823884086)
-73.9688574691102	40.7837825208444	21B-AM-1019-04	21B	এএম	10192018	4				+					মিথ্যা	মিথ্যা	মিথ্যা	মিথ্যা	মিথ্যা	মিথ্যা	মিথ্যা	মিথ্যা	মিথ্যা	মিথ্যা	মিথ্যা	মিথ্যা	মিথ্যা	পয়েন্ট (-73.9688574691102 40.7837825208444)
-73.9742811484852	40.775533619083	11B-PM-1014-08	11B	পিএম	10142018	8		ধূসর		ধূসর+		মাটির উপরে	10		মিথ্যা	সত্য	মিথ্যা	মিথ্যা	মিথ্যা	মিথ্যা	মিথ্যা	মিথ্যা	মিথ্যা	মিথ্যা	মিথ্যা	মিথ্যা	মিথ্যা	পয়েন্ট (-73.97428114848522 40.775533619083)
-73.9596413903948	40.7903128889029	32E-PM-1017-14	32ই	পিএম	10172018	14	প্রাপ্তবয়স্ক	ধূসর		ধূসর+	প্রাথমিক হিসাবে কিছুই নির্বাচন করা হয়নি৷ ধূসর হাইলাইট হিসাবে নির্বাচিত। কার্যনির্বাহী সমন্বয় করেছেন।				মিথ্যা	মিথ্যা	মিথ্যা	সত্য	সত্য	মিথ্যা	মিথ্যা	মিথ্যা	মিথ্যা	মিথ্যা	মিথ্যা	মিথ্যা	সত্য	পয়েন্ট (-73.9596413903948 40.7903128889029)
-73.9702676472613	40.7762126854894	13E-AM-1017-05	13ই	এএম	10172018	5	প্রাপ্তবয়স্ক	ধূসর	দারুচিনি	ধূসর + দারুচিনি		মাটির উপরে		গাছের ডালে	মিথ্যা	মিথ্যা	মিথ্যা	মিথ্যা	সত্য	মিথ্যা	মিথ্যা	মিথ্যা	মিথ্যা	মিথ্যা	মিথ্যা	মিথ্যা	মিথ্যা	পয়েন্ট (-73.9702676472613 40.7762126854894)
-73.9683613516225	40.7725908847499	11H-AM-1010-03	11H	এএম	10102018	3	প্রাপ্তবয়স্ক	দারুচিনি	সাদা	দারুচিনি+সাদা					মিথ্যা	মিথ্যা	মিথ্যা	মিথ্যা	সত্য	মিথ্যা	মিথ্যা	মিথ্যা	মিথ্যা	সত্য	মিথ্যা	সত্য	মিথ্যা	পয়েন্ট (-73.9683613516225 40.7725908847499)
-73.9541201789795	40.7931811701082	36H-AM-1010-02	36H	এএম	10102018	2	প্রাপ্তবয়স্ক	ধূসর		ধূসর+	হেক্টরের বাইরে	গ্রাউন্ড প্লেন	মিথ্যা		মিথ্যা	মিথ্যা	মিথ্যা	মিথ্যা	সত্য	মিথ্যা	মিথ্যা	মিথ্যা	মিথ্যা	মিথ্যা	মিথ্যা	মিথ্যা	মিথ্যা	পয়েন্ট (-73.9541201789795 40.7931811701082)

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

এই উদাহরণের কোডটি 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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

সিএসএস

এইচটিএমএল

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

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

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

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

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

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

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

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

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

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

সিএসএস

এইচটিএমএল

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

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

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

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

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

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

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

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

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

সিএসএস

এইচটিএমএল

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

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