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

המוצר או התכונה הזו נמצאים בגרסת טרום-GA (גרסת טרום-GA). התמיכה במוצרים ובתכונות טרום-GA עשויה להיות מוגבלת, ויכול להיות ששינויים במוצרים ובתכונות טרום-GA לא יתאימו לגרסאות אחרות של טרום-GA. מוצרים במצב טרום-GA מכוסים על ידי התנאים הספציפיים לשירות בפלטפורמה של מפות Google. למידע נוסף, עיינו בתיאורים של שלבי ההשקה.

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

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

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

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

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

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

1. במסוף Google Cloud, נכנסים לדף מערכי נתונים.
2. לוחצים על השם של מערך הנתונים. יופיע הדף פרטי מערך הנתונים.
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