FeatureView की स्टाइल

FeatureView एसेट में मौजूद सुविधाओं की स्टाइल, JavaScript ऑब्जेक्ट में तय किए गए नियमों का इस्तेमाल करके तय की जाती है. स्टाइल को FeatureViewLayer की शुरुआती परिभाषा के दौरान या उसके बाद किसी भी समय सेट किया जा सकता है. स्टाइलिंग सिस्टम की मदद से, स्टाइल के ऐसे सामान्य नियम सेट किए जा सकते हैं जो सुविधाओं के बड़े ग्रुप पर लागू होते हैं. साथ ही, कुछ खास सुविधाओं के लिए ज़्यादा खास नियम भी सेट किए जा सकते हैं. सुविधा की स्टाइल को, सुविधा की विशेषताओं के आधार पर, एक जैसी वैल्यू या डेटा के हिसाब से तय किया जा सकता है.

स्टाइल ऑब्जेक्ट

स्टाइल ऑब्जेक्ट का बुनियादी स्ट्रक्चर नीचे दिखाया गया है. नियम दो तरह के होते हैं: सामान्य नियम और खास नियम. सामान्य नियमों का असर, FeatureView एसेट की सभी सुविधाओं पर पड़ता है. वहीं, खास नियमों का असर सुविधाओं के सबसेट पर पड़ता है.

{
  // Broad style rules.
  opacity: …,
  polygonFillColor: …,

  // Specific style rules.
  rules: [
    { … },
    { … }
  ]
};

सामान्य नियम

सभी फ़ीचर या किसी खास तरह की ज्यामिति पर स्टाइल प्रॉपर्टी लागू करने के लिए, स्टाइल ऑब्जेक्ट में सबसे ऊपर मौजूद स्टाइल प्रॉपर्टी तय करें.

{
  opacity: 0.5,
  pointShape: 'triangle',
  lineWidth: 10,
  polygonFillColor: 'green'
};

खास नियम

सुविधाओं के सबसेट पर स्टाइल प्रॉपर्टी लागू करने के लिए, rules फ़ील्ड का इस्तेमाल करें. rules फ़ील्ड, JavaScript ऑब्जेक्ट की सूची स्वीकार करता है. हर ऑब्जेक्ट में एक filter होता है, जो ee.Filter ऑब्जेक्ट की तय की गई शर्तों के हिसाब से सुविधाओं को चुनता है. इसके बाद, स्टाइल प्रॉपर्टी की एक सीरीज़ होती है. नीचे दिए गए उदाहरण में, एक नियम दिया गया है. यह नियम सिर्फ़ तब polygonStrokeWidth और polygonFillColor को सेट करता है, जब "REP_AREA" प्रॉपर्टी की वैल्यू 100 से कम हो. खास नियम, सामान्य नियमों की स्टाइल प्रॉपर्टी को बदल देते हैं. साथ ही, rules सूची के आखिर में मौजूद नियम, शुरुआत में मौजूद नियमों को बदल देते हैं. खास नियमों का आकलन, पहले से आखिर तक किया जाता है.

{
  rules: [
    {
      filter: ee.Filter.lt('REP_AREA', 100),
      polygonStrokeWidth: 0.5,
      polygonFillColor: 'blue'
    },
    { … }  // Optionally include additional rules.
  ]
};

सेटिंग स्टाइल

FeatureViewLayer का एलान करने के बाद या किसी भी समय, सुविधा का स्टाइल सेट किया जा सकता है.

FeatureViewLayer एलान

FeatureViewLayer का एलान करते समय विज़ुअलाइज़ेशन पैरामीटर सेट करने के लिए, visParams पैरामीटर का इस्तेमाल करें.

var visParams = {
  opacity: 0.5,
  lineWidth: 10,
  polygonFillColor: 'purple'
};

var layer = ui.Map.FeatureViewLayer({
  assetId: 'WCMC/WDPA/current/polygons_FeatureView',
  visParams: visParams
});

Map.add(layer);

मौजूदा FeatureViewLayer

किसी मौजूदा FeatureViewLayer के लिए विज़ुअलाइज़ेशन पैरामीटर सेट करने के लिए, setVisParams फ़ंक्शन का इस्तेमाल करें. यह पहले से तय किए गए स्टाइल नियमों की जगह ले लेता है. साथ ही, जिन प्रॉपर्टी के लिए स्टाइल नहीं तय की गई है उन्हें डिफ़ॉल्ट स्टाइल पर सेट कर दिया जाता है.

var layer = ui.Map.FeatureViewLayer('WCMC/WDPA/current/polygons_FeatureView');
Map.add(layer);

layer.setVisParams({
  opacity: 0.5,
  lineWidth: 10,
  polygonFillColor: 'purple'
});

सिंबोलोजी

हर स्टाइल प्रॉपर्टी के लिए, स्टाइल का कोई एक नियम या डेटा से चलने वाला स्टाइल नियम तय किया जा सकता है. डेटा-ड्रिवन विकल्प, सिंबलाइज़ेशन तय करने के लिए, फ़ीचर प्रॉपर्टी की वैल्यू का इस्तेमाल करता है. यह कैटगरी के हिसाब से या इंटरपोलेशन के हिसाब से हो सकता है. स्टाइल प्रॉपर्टी की पूरी सूची के लिए, स्टाइल प्रॉपर्टी टेबल देखें.

स्थिर

कॉन्स्टेंट स्टाइल नियम में, सेट की जाने वाली स्टाइल प्रॉपर्टी और उसकी वैल्यू शामिल होती है. यहां दिए गए उदाहरण में, पॉलीगॉन के लिए भरने का रंग नीला सेट किया गया है.

var visParams = {
  polygonFillColor: 'blue'
};

Categorical

कैटगरी के हिसाब से स्टाइल का नियम, सेट की जाने वाली स्टाइल प्रॉपर्टी और तीन प्रॉपर्टी वाले JavaScript ऑब्जेक्ट से बना होता है:

• property — किसी सुविधा की प्रॉपर्टी का नाम, जिसकी वैल्यू से स्टाइल पर असर पड़ेगा.
• categories — सूचियों की सूची, जो स्टाइल प्रॉपर्टी के सिंबोलोजी के लिए, सुविधा प्रॉपर्टी की वैल्यू को मैप करती है. हर कैटगरी में एक प्रॉपर्टी वैल्यू होती है. इसके बाद, लागू करने के लिए सिंबल वाली वैल्यू होती है. कैटगरी तय करने वाली प्रॉपर्टी की वैल्यू, स्ट्रिंग होनी चाहिए.
• defaultValue — उन सुविधाओं पर लागू करने के लिए डिफ़ॉल्ट सिंबोलॉजी जिनकी प्रॉपर्टी वैल्यू categories में तय नहीं की गई है. अगर यह शून्य/अनिर्धारित है, तो डिफ़ॉल्ट स्टाइल सेटिंग लागू हो जाएंगी.

उदाहरण के लिए, यहां दिया गया ऑब्जेक्ट, "MARINE" फ़ीचर प्रॉपर्टी के आधार पर color स्टाइल प्रॉपर्टी सेट करता है. "MARINE" कैटगरी "0" की सुविधाओं को बैंगनी, "1" को हरे, "2" को नीले, और किसी भी अन्य कैटगरी को सफ़ेद रंग के तौर पर सेट किया गया है.

var visParams = {
  color: {
    property: 'MARINE',
    categories: [
      ['0', 'purple'],
      ['1', 'green'],
      ['2', 'blue']
    ],
    defaultValue: 'white'
  }
};

इंटरपोलेट की गई

इंटरपोलेशन वाले स्टाइल नियम में, सेट करने के लिए एक स्टाइल प्रॉपर्टी और ज़्यादा से ज़्यादा पांच प्रॉपर्टी वाला JavaScript ऑब्जेक्ट होता है:

• property — किसी सुविधा की प्रॉपर्टी का नाम, जिसकी वैल्यू से स्टाइल पर असर पड़ेगा.
• mode — इंटरपोलेशन मोड, 'linear' या 'interval'.
• palette — इनपुट प्रॉपर्टी की वैल्यू के बीच इंटरपोलेशन करने के लिए, रंगों, ओपैसिटी या चौड़ाई की सूची. फ़ॉर्मैट, mode के हिसाब से तय होता है. ज़्यादा जानकारी के लिए, लीनियर और इंटरवल सेक्शन देखें.

सिर्फ़ 'linear' मोड पर लागू होता है

• min — palette सूची में पहले एलिमेंट पर मैप करने के लिए प्रॉपर्टी वैल्यू.
• max — palette सूची के आखिरी एलिमेंट पर मैप करने के लिए प्रॉपर्टी वैल्यू.

लीनियर

लीनियर इंटरपोलेशन मोड, palette प्रॉपर्टी में तय की गई सिंबोलॉजी वैल्यू की सूची के बीच, min से max की रेंज में इनपुट वैल्यू को लीनियर तरीके से मैप करके, फ़ीचर स्टाइल प्रॉपर्टी सेट करता है. इनपुट वैल्यू को min और max से सेट की गई रेंज में रखा जाता है.

उदाहरण के लिए, यह ऑब्जेक्ट, "REP_AREA" फ़ीचर प्रॉपर्टी के आधार पर color स्टाइल प्रॉपर्टी को सेट करता है. palette प्रॉपर्टी, रंगों की सूची है. इससे पता चलता है कि min से max के बीच की इनपुट वैल्यू, पीले से लाल और फिर नीले रंग में रैंक होनी चाहिए. 1 से 500 के बीच की वैल्यू को पीले और लाल रंग के बीच इंटरपोल किया जाता है. वहीं, 500 से 1,000 के बीच की वैल्यू को लाल और नीले रंग के बीच इंटरपोल किया जाता है.

var visParams = {
  color: {
    property: 'REP_AREA',
    mode: 'linear',
    palette: ['yellow', 'red', 'blue'],
    min: 1,
    max: 1000
  }
};

इंटरवल

इंटरवल इंटरपोलेशन मोड, इनपुट वैल्यू को क्लास ब्रेक पर मैप करके, किसी फ़ीचर की स्टाइल प्रॉपर्टी सेट करता है. इसके बाद, क्लास के हिसाब से सिंबल लागू करता है. चुनी गई फ़ीचर प्रॉपर्टी की इनपुट वैल्यू को, क्लास ब्रेक की सबसे नज़दीकी वैल्यू को असाइन किया जाता है. इसके लिए, वैल्यू को छोटा किया जाता है. palette प्रॉपर्टी को सूचियों की सूची के तौर पर फ़ॉर्मैट किया जाता है. इसमें हर अंदरूनी सूची में क्लास ब्रेक वैल्यू होती है, जिसके बाद स्टाइल प्रॉपर्टी की वैल्यू होती है. जिन सुविधाओं की प्रॉपर्टी वैल्यू, क्लास ब्रेक की तय की गई कम से कम वैल्यू से कम होती है उनकी डिफ़ॉल्ट स्टाइल प्रॉपर्टी सेटिंग बनी रहती है.

इस उदाहरण में, "REP_AREA" प्रॉपर्टी की ग्रेड वाली क्लास के हिसाब से, फीचर की ऑपैसिटी सेट की गई है. क्लास की परिभाषा और स्टाइल के सिंबल, palette प्रॉपर्टी में सूचियों की सूची के तौर पर दिए जाते हैं. इससे पता चलता है कि 0, 80, 2,000, और 5,000 वैल्यू पर ब्रेक के साथ चार क्लास होनी चाहिए. साथ ही, इनकी फ़ीचर ओपैसिटी क्रमशः 0.5, 0.35, 0.22, और 0.15 होनी चाहिए. दूसरे शब्दों में, "REP_AREA" वैल्यू के इंटरवल $ 0 \le x < 80 $ वाली सुविधाओं का भरने का ऑपैसिटी 0.5 होगा. साथ ही, $ 80 \le x < 2000 $ वाले इंटरवल की वैल्यू का भरने का ऑपैसिटी 0.35 होगा.

var visParams = {
  fillOpacity: {
    property: 'REP_AREA',
    mode: 'interval',
    palette: [
      [0, 0.5],
      [80, 0.35],
      [2000, 0.22],
      [5000, 0.15]
    ]
  }
};

सभी स्टाइल प्रॉपर्टी

यहां स्टाइल ऑब्जेक्ट में बताई जा सकने वाली सभी स्टाइल प्रॉपर्टी दी गई हैं. खास तरह की ज्यामिति के लिए स्टाइल प्रॉपर्टी सेट करने पर, "सभी ज्यामितियां" के लिए सेट की गई स्टाइल प्रॉपर्टी बदल जाती हैं. उदाहरण के लिए, polygonFillColor सेट करने पर, fillColor में सेट की गई वैल्यू बदल जाती है.

प्रॉपर्टी	टाइप	ब्यौरा	इंटरपोलेशन नियम के साथ काम करता है
सभी ज्यामिति
isVisible	Boolean	इससे यह तय होता है कि सुविधा दिखेगी या नहीं.	नहीं
color	String	सभी तरह की ज्यामिति के लिए, भरने/स्ट्रोक का रंग सेट करता है. यह हेक्स वैल्यू या सीएसएस3 कलर होनी चाहिए.	हां
opacity	Double	सभी तरह की ज्यामिति के लिए, भरने/स्ट्रोक की ओपैसिटी सेट करता है. यह वैल्यू 0 और 1 के बीच की डबल वैल्यू होनी चाहिए.	हां
width	Double	सभी तरह की ज्यामिति के लिए स्ट्रोक की चौड़ाई सेट करता है.	हां
fillColor	String	सभी तरह की ज्यामिति के लिए, भरने का रंग सेट करता है. यह हेक्स वैल्यू या सीएसएस3 कलर होनी चाहिए.	हां
पॉइंट की ज्यामिति
pointShape	String	पॉइंट ज्यामिति का आकार सेट करता है. ee.FeatureCollection.style (सर्कल, स्क्वेयर, डायमंड, क्रॉस, प्लस, पेंटाग्राम, हेक्साग्रम, ट्राएंगल, triangle_up, triangle_down, triangle_left, triangle_right, पेंटागॉन, हेक्सागॉन, star5, star6) जैसे ही आकार इस्तेमाल किए जा सकते हैं.	नहीं
pointSize	Double	पॉइंट ज्यामिति की चौड़ाई (पिक्सल में) सेट करता है.	हां
pointFillColor	String	पॉइंट ज्यामिति के लिए, भरने का रंग सेट करता है. यह हेक्स वैल्यू या सीएसएस3 कलर होनी चाहिए.	हां
pointFillOpacity	Double	पॉइंट ज्यामिति के लिए, भरने की ओपैसिटी सेट करता है. यह वैल्यू, 0 और 1 के बीच की कोई डबल वैल्यू होनी चाहिए.	हां
लाइन ज्यामिति
lineType	String	लाइन का टाइप सेट करता है. इनमें वही टाइप इस्तेमाल किए जा सकते हैं जो ee.FeatureCollection.style (सॉलिड, डैश, बिंदु) में इस्तेमाल किए जा सकते हैं.	नहीं
lineWidth	Double	लाइन की चौड़ाई (पिक्सल में) सेट करता है.	हां
lineColor	String	लाइन ज्यामिति के लिए रंग सेट करता है. यह हेक्स वैल्यू या सीएसएस3 कलर होनी चाहिए.	हां
lineOpacity	Double	लाइन ज्यामिति के लिए ओपैसिटी सेट करता है. यह वैल्यू 0 और 1 के बीच की डबल वैल्यू होनी चाहिए.	हां
पॉलीगॉन की ज्यामिति
polygonStrokeWidth	Double	पॉलीगॉन के स्ट्रोक की चौड़ाई (पिक्सल में) सेट करता है.	हां
polygonStrokeType	String	पॉलीगॉन के लिए लाइन टाइप सेट करता है. इनमें वही टाइप इस्तेमाल किए जा सकते हैं जो ee.FeatureCollection.style (सॉलिड, डैश, बिंदु) में इस्तेमाल किए जा सकते हैं.	नहीं
polygonStrokeColor	String	पॉलीगॉन ज्यामिति के लिए स्ट्रोक का रंग सेट करता है. यह हेक्स वैल्यू या सीएसएस3 कलर होनी चाहिए.	हां
polygonStrokeOpacity	Double	पॉलीगॉन ज्यामिति के लिए स्ट्रोक की ओपैसिटी सेट करता है. यह वैल्यू, 0 और 1 के बीच की कोई डबल वैल्यू होनी चाहिए.	हां
polygonFillColor	String	पॉलीगॉन ज्यामिति के लिए, भरने का रंग सेट करता है. यह हेक्स वैल्यू या सीएसएस3 कलर होनी चाहिए.	हां
polygonFillOpacity	Double	पॉलीगॉन ज्यामिति के लिए, भरे हुए हिस्से की ओपैसिटी सेट करता है. यह वैल्यू, 0 और 1 के बीच की कोई डबल वैल्यू होनी चाहिए.	हां