मैप में डेटासेट जोड़ें

प्लैटफ़ॉर्म चुनें: Android iOS JavaScript

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

ज़रूरी शर्तें

आगे बढ़ने से पहले, आपके पास मैप आईडी, मैप स्टाइल, और डेटासेट आईडी होना चाहिए.

डेटासेट आईडी को मैप स्टाइल से जोड़ना

अपने डेटासेट को इस्तेमाल की जा रही मैप स्टाइल से जोड़ने के लिए, यह तरीका अपनाएं:

  1. Google Cloud Console में, डेटासेट पेज पर जाएं.
  2. डेटासेट के नाम पर क्लिक करें. डेटासेट की जानकारी वाला पेज दिखेगा.
  3. झलक देखें टैब पर क्लिक करें.
  4. स्क्रोल करके मैप स्टाइल जोड़ें पर जाएं और क्लिक करें.
    'मैप स्टाइल जोड़ें' बटन का स्क्रीनशॉट.
  5. मैप की शैली असोसिएट करने के लिए चेकबॉक्स पर क्लिक करें और फिर क्लिक करें सेव करें पर टैप करें.

स्टाइल के लिए आसान नियमों का इस्तेमाल करना

सुविधाओं को शैली देने का सबसे आसान तरीका एक FeatureStyleOptions को पास करना है स्टाइल एट्रिब्यूट, जैसे कि रंग, अपारदर्शिता, और लाइन की मोटाई. सुविधा शैली लागू करें विकल्पों को सीधे डेटासेट की सुविधा की लेयर में ले जा सकता है या FeatureStyleFunction.

TypeScript

const styleOptions = {
    strokeColor: 'green',
    strokeWeight: 2,
    strokeOpacity: 1,
    fillColor: 'green',
    fillOpacity: 0.3,
};
index.ts
अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है

JavaScript

const styleOptions = {
  strokeColor: "green",
  strokeWeight: 2,
  strokeOpacity: 1,
  fillColor: "green",
  fillOpacity: 0.3,
};

index.js

डिक्लेरेटिव स्टाइल के नियमों का इस्तेमाल करना

स्टाइल के नियमों को एलान के तौर पर सेट करने और उन्हें लागू करने के लिए, 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; 
    }
}
index.ts

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;
  }
}

index.js

डेटासेट की सुविधा की लेयर में स्टाइल लागू करें

सुविधा शैली फ़ंक्शन में शैलियां लागू करने के लिए:

  1. डेटासेट आईडी को पास करके, map.getDatasetFeatureLayer() को कॉल करके डेटासेट की फ़ीचर लेयर पाएं.
  2. डेटासेट लेयर पर, सुविधा की स्टाइल के विकल्प (जैसे, styleOptions) या फ़ंक्शन (जैसे, setStyle) सेट करके स्टाइल लागू करें.

TypeScript

const datasetLayer = map.getDatasetFeatureLayer(datasetId);
datasetLayer.style = styleOptions;
index.ts

JavaScript

const datasetLayer = map.getDatasetFeatureLayer(datasetId);

datasetLayer.style = styleOptions;

index.js

परत से शैली हटाएं

किसी लेयर से स्टाइल हटाने के लिए, style को null पर सेट करें:

featureLayer.style = null;

सुविधा के स्टाइल फ़ंक्शन से null भी दिखाया जा सकता है. उदाहरण के लिए, अगर आपको सुविधाओं के किसी सबसेट को छिपाना है.

एट्रिब्यूशन टेक्स्ट जोड़ना

Google Maps पर अपलोड किए गए डेटासेट दिखाते समय, आपके मैप में ज़रूरी एट्रिब्यूशन दिखने चाहिए. एट्रिब्यूशन टेक्स्ट धुंधला नहीं होना चाहिए या 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;
}
index.ts

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;
}

index.js

कंट्रोल तय करने के बाद, इसे मैप के शुरू होने के समय जोड़ा जा सकता है, जैसा कि यहां दिखाया गया है:

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);
index.ts
अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है

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);
index.js