FeatureStyleFunction
,
वह जगह है जहां किसी डेटासेट में चुनिंदा स्टाइल वाली सुविधाओं के लिए लॉजिक तय किया जाता है. यह
FeatureStyleOptions
लौटाया गया
पर आधारित होता है. अगर स्टाइलिंग लॉजिक की ज़रूरत नहीं है, तो FeatureStyleOptions
का इस्तेमाल किया जा सकता है
का इस्तेमाल करें. इस पेज में, मैप में डेटासेट जोड़ने का तरीका बताया गया है.
स्टाइलिंग लागू करें.
ज़रूरी शर्तें
आगे बढ़ने से पहले, आपके पास एक मैप आईडी, मैप स्टाइल, और एक डेटासेट आईडी होना चाहिए.
डेटासेट आईडी को मैप की स्टाइल से जोड़ना
अपने डेटासेट को मैप की स्टाइल से जोड़ने के लिए, यह तरीका अपनाएं इसका इस्तेमाल करके:
- Google Cloud Console में, डेटासेट पेज पर जाएं.
- डेटासेट के नाम पर क्लिक करें. डेटासेट की जानकारी वाला पेज दिखेगा.
- झलक देखें टैब पर क्लिक करें.
- स्क्रोल करके मैप स्टाइल जोड़ें पर जाएं और क्लिक करें.
- मैप की शैली असोसिएट करने के लिए चेकबॉक्स पर क्लिक करें और फिर क्लिक करें सेव करें पर टैप करें.
स्टाइल के आसान नियमों का इस्तेमाल करें
सुविधाओं को शैली देने का सबसे आसान तरीका एक FeatureStyleOptions
को पास करना है
स्टाइल एट्रिब्यूट, जैसे कि रंग, अपारदर्शिता, और लाइन की मोटाई. सुविधा शैली लागू करें
या तो डेटासेट की सुविधा की लेयर के लिए विकल्प चुनें या
FeatureStyleFunction
.
TypeScript
const styleOptions = { strokeColor: 'green', strokeWeight: 2, strokeOpacity: 1, fillColor: 'green', fillOpacity: 0.3, };
JavaScript
const styleOptions = { strokeColor: "green", strokeWeight: 2, strokeOpacity: 1, fillColor: "green", fillOpacity: 0.3, };
डिक्लेरेटिव स्टाइल के नियमों का इस्तेमाल करना
स्टाइल के नियमों को एलान के तौर पर सेट करने और उन्हें लागू करने के लिए, FeatureStyleFunction
का इस्तेमाल करें
डेटासेट में जोड़ दिया जाएगा. इन चीज़ों के आधार पर, किसी सुविधा पर FeatureStyleOptions
लागू करें
डेटासेट के एट्रिब्यूट की वैल्यू. फ़ीचर स्टाइल से भी null
लौटाया जा सकता है
फ़ंक्शन का इस्तेमाल किया जा सकता है. यह
उदाहरण में एक स्टाइल फ़ंक्शन दिखाया गया है, जो डेटा के आधार पर पॉइंट के सेट को कलर करता है
विशेषताएं:
TypeScript
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; } }
JavaScript
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; } }
डेटासेट की सुविधा की लेयर में स्टाइल लागू करें
सुविधा शैली फ़ंक्शन में शैलियां लागू करने के लिए:
- डेटासेट की सुविधा लेयर पाने के लिए,
map.getDatasetFeatureLayer()
को कॉल करें. डेटासेट आईडी पास करना. - सुविधा की स्टाइल के विकल्प सेट करके, स्टाइल लागू करें (जैसे,
styleOptions
) या फ़ंक्शन (जैसे किsetStyle
) का इस्तेमाल करें.
TypeScript
const datasetLayer = map.getDatasetFeatureLayer(datasetId); datasetLayer.style = styleOptions;
JavaScript
const datasetLayer = map.getDatasetFeatureLayer(datasetId); datasetLayer.style = styleOptions;
परत से शैली निकालें
किसी परत से स्टाइल हटाने के लिए, style
को null
पर सेट करें:
featureLayer.style = null;
आप अपने फ़ीचर शैली फ़ंक्शन से null
भी लौटा सकते हैं, उदाहरण के लिए अगर आप
सुविधाओं का एक सबसेट छुपे रहना चाहते हैं.
एट्रिब्यूशन टेक्स्ट जोड़ें
अपलोड किया गया डेटा दिखाते समय, आपके मैप में सभी ज़रूरी एट्रिब्यूशन दिखने चाहिए डेटासेट को इकट्ठा किया है. एट्रिब्यूशन टेक्स्ट धुंधला नहीं होना चाहिए या Google का लोगो.
एट्रिब्यूशन टेक्स्ट जोड़ने का एक तरीका, कस्टम कंट्रोल का इस्तेमाल करना है का इस्तेमाल करें. यह कोड उदाहरण में ऐसे फ़ंक्शन को दिखाया गया है जो प्रोग्राम के हिसाब से, एक ऐसा कस्टम कंट्रोल बनाता है:
TypeScript
function createAttribution(map) { const attributionLabel = document.createElement('div'); // Define CSS styles. attributionLabel.style.backgroundColor = '#fff'; attributionLabel.style.opacity = '0.7'; attributionLabel.style.fontFamily = 'Roboto,Arial,sans-serif'; attributionLabel.style.fontSize = '10px'; attributionLabel.style.padding = '2px'; attributionLabel.style.margin = '2px'; attributionLabel.textContent = 'Data source: NYC Open Data'; return attributionLabel; }
JavaScript
function createAttribution(map) { const attributionLabel = document.createElement("div"); // Define CSS styles. attributionLabel.style.backgroundColor = "#fff"; attributionLabel.style.opacity = "0.7"; attributionLabel.style.fontFamily = "Roboto,Arial,sans-serif"; attributionLabel.style.fontSize = "10px"; attributionLabel.style.padding = "2px"; attributionLabel.style.margin = "2px"; attributionLabel.textContent = "Data source: NYC Open Data"; return attributionLabel; }
एक बार कंट्रोल तय हो जाने पर, शुरू करते समय उसे मैप में जोड़ा जा सकता है, जैसा कि यहां दिखाया गया है:
TypeScript
// Create an attribution DIV and add the attribution to the map. const attributionDiv = document.createElement('div'); const attributionControl = createAttribution(map); attributionDiv.appendChild(attributionControl); map.controls[google.maps.ControlPosition.LEFT_BOTTOM].push(attributionDiv);
JavaScript
// Create an attribution DIV and add the attribution to the map. const attributionDiv = document.createElement("div"); const attributionControl = createAttribution(map); attributionDiv.appendChild(attributionControl); map.controls[google.maps.ControlPosition.LEFT_BOTTOM].push(attributionDiv);