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

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

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

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

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

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

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

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

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

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

הדרך הפשוטה ביותר לעצב תכונות היא להעביר 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 מהפונקציה של סגנון התכונה, לדוגמה, אם רוצים שקבוצת משנה של תכונות תישאר בלתי נראית.

הוספת טקסט ייחוס (Attribution)

כשמציגים את מערכי הנתונים שהועלו במפות 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