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

בחירת פלטפורמה: 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