הוספת מערך נתונים למפה

הפלטפורמה: Android iOS JavaScript

ב-FeatureStyleFunction מגדירים לוגיקה לעיצוב סלקטיבי של תכונות במערך נתונים. הפונקציה מחזירה FeatureStyleOptions על סמך הלוגיקה הזו. אם לא נדרשת לוגיקה של סגנון, אפשר להשתמש ב-FeatureStyleOptions כדי להגדיר סגנונות ישירות. בדף הזה מוסבר איך להוסיף מערך נתונים למפה ולהחיל עליו סגנון.

דרישות מוקדמות

לפני שממשיכים, צריך לוודא שיש לכם מזהה מפה, סגנון מפה ומזהה מערך נתונים.

• יצירת מזהה מפה וסגנון מפה
• יצירה והעלאה של מערך נתונים

שיוך מזהה של מערך נתונים לסגנון מפה

ניסיוני: אפשר להגדיר את התכונה הזו רק לסגנונות מפה בהירים. כשמקשרים סגנון מפה בהיר שבו התכונה הזו מופעלת למזהה מפה, השכבות המופעלות זמינות גם בסגנון המפה הכהה.

כדי לשייך את מערך הנתונים לסגנון המפה שבה אתם משתמשים, פועלים לפי השלבים הבאים:

1. במסוף Google Cloud, עוברים לדף Datasets.
2. לוחצים על השם של מערך הנתונים. יופיע הדף Dataset details (פרטי קבוצת הנתונים).
3. לוחצים על הכרטיסייה תצוגה מקדימה.
4. גוללים אל הוספת סגנון מפה ולוחצים.
   
5. מסמנים את תיבות הסימון של סגנונות המפה שרוצים לשייך ולוחצים על שמירה.

זהירות: הצגת כמה מערכי נתונים במפה יכולה להשפיע על הביצועים, בהתאם לגודל ולמספר של מערכי הנתונים.

שימוש בכללי סגנון פשוטים

הדרך הכי פשוטה להגדיר סגנון לתכונות היא להעביר FeatureStyleOptions כדי להגדיר מאפייני סגנון כמו צבע, אטימות ועובי קו. אפשר להחיל אפשרויות של סגנון תכונה ישירות על שכבת תכונות של מערך נתונים, או להשתמש בהן בשילוב עם FeatureStyleFunction.

TypeScript

const styleOptions = {
    strokeColor: 'green',
    strokeWeight: 2,
    strokeOpacity: 1,
    fillColor: 'green',
    fillOpacity: 0.3,
};
index.ts

הערה: כדאי לקרוא את המדריך לשימוש ב-TypeScript ובמפות Google.

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

הערה: כדאי לקרוא את המדריך לשימוש ב-TypeScript ובמפות Google.

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

הערה: כדאי לקרוא את המדריך לשימוש ב-TypeScript ובמפות Google.

JavaScript

const datasetLayer = map.getDatasetFeatureLayer(datasetId);

datasetLayer.style = styleOptions;
index.js

הסרת סגנון משכבה

כדי להסיר סגנון משכבה, מגדירים את style ל-null:

featureLayer.style = null;

אפשר גם להחזיר null מפונקציית הסגנון של התכונה, למשל אם רוצים שקבוצת משנה של תכונות תישאר בלתי נראית.

הוספת טקסט לציון קרדיט

כשמציגים במפות Google מערכי נתונים שהועלו, צריך להציג במפה את כל הקרדיטים הנדרשים. אסור שהטקסט של הקרדיט יסתיר את הלוגו של Google או יפריע לו.

אחת הדרכים להוסיף טקסט של שיוך היא באמצעות אמצעי בקרה בהתאמה אישית כדי למקם HTML שרירותי במיקומים סטנדרטיים במפה. בדוגמה הבאה של קוד מוצגת פונקציה שיוצרת באופן פרוגרמטי אמצעי בקרה מותאם אישית כזה:

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

הערה: כדאי לקרוא את המדריך לשימוש ב-TypeScript ובמפות Google.

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

הערה: כדאי לקרוא את המדריך לשימוש ב-TypeScript ובמפות Google.

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