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

בחירת פלטפורמה: Android iOS JavaScript

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

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

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

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

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

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

1. במסוף Google Cloud, נכנסים לדף Datasets.
2. לוחצים על השם של מערך הנתונים. יופיע הדף Dataset details.
3. לוחצים על הכרטיסייה Preview (תצוגה מקדימה).
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