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

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

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

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

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

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

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

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

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

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

אחת הדרכים להוסיף טקסט שיוך (Attribution) היא באמצעות אמצעי בקרה בהתאמה אישית כדי להציב קוד 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