שכבת נתונים

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

שכבת הנתונים של מפות Google מספקת קונטיינר לנתונים גיאו-מרחביים שרירותיים. אפשר להשתמש בשכבת הנתונים כדי לאחסן את הנתונים המותאמים אישית, או להציג GeoJSON במפת Google.

סקירה כללית

כדאי לצפות בסרטון הזה של DevBytes כדי לקבל מידע נוסף על שכבת הנתונים.

בעזרת JavaScript API של מפות Google אפשר לסמן מפה באמצעות שכבות-על שונות, כגון סמנים, קווים פוליגוניים, מצולעים וכו'. כל אחת מהשכבות הערות משלבות פרטי עיצוב עם נתוני מיקום. המחלקה google.maps.Data היא קונטיינר של נתונים גיאו-מרחביים שרירותיים. במקום זאת אפשר להשתמש בשכבת הנתונים כדי להוסיף שכבות-על נתונים גיאוגרפיים במפה. אם הנתונים מכילים צורות גיאומטריות, כמו נקודות, קווים או פוליגונים, ה-API יציג אותם כברירת מחדל כסמנים, קווים פוליגוניים ופוליגונים. אפשר לעצב את התכונות האלה כמו שעושים בשכבת-על רגילה, או להחיל כללי עיצוב שמבוססים על נכסים אחרים שנכללים בקבוצת הנתונים.

הכיתה google.maps.Data מאפשרת לכם:

  • משרטטים פוליגונים במפה.
  • הוספת נתוני GeoJSON למפה.
    GeoJSON הוא תקן לנתונים גיאו-מרחביים באינטרנט. המחלקה Data פועלת לפי המבנה של GeoJSON בייצוג הנתונים שלה מאפשר להציג בקלות נתוני GeoJSON. אפשר להשתמש בשיטה loadGeoJson() כדי לייבא בקלות נתוני GeoJSON ולהציג נקודות, מחרוזות קווים ופוליגונים.
  • שימוש ב-google.maps.Data כדי ליצור מודל של נתונים שרירותיים.
    לרוב הישויות בעולם האמיתי יש נכסים אחרים שמשויכים אליהן. עבור לדוגמה, לחנויות יש שעות פתיחה, לכבישים יש מהירות תנועה, בקבוצת המדריכים יש דשא למכירת עוגיות. באמצעות google.maps.Data אפשר ליצור מודלים את המאפיינים האלה, ומעצבים את הנתונים בהתאם.
  • לבחור את אופן ייצוג הנתונים ולשנות להפעיל את הראש.
    שכבת הנתונים מאפשרת לקבל החלטות לגבי התצוגה החזותית על האינטראקציה של הנתונים שלכם. לדוגמה, כשמסתכלים על מפת נוחות חנויות שאולי ברצונך להציג רק את החנויות שמוכרות תחבורה ציבורית כרטיסים.

שרטטו מצולע

Data.Polygon הכיתה מטפלת בפוליגונים שמתפתלים עבורכם. אפשר להעביר מערך של ערך אחד או יותר טבעות ליניאריות, מוגדרות כקואורדינטות של קו אורך/רוחב. הטבעת הלינארית הראשונה מגדיר את הגבול החיצוני של הפוליגון. אם מעבירים יותר מליניארי אחד הטבעות הלינאריות השנייה וההמשך ליניאריות משמשות להגדרת נתיבים פנימיים (חורים) במצולע.

בדוגמה הבאה נוצר מצולע מלבני עם שני חורים:

TypeScript

// This example uses the Google Maps JavaScript API's Data layer
// to create a rectangular polygon with 2 holes in it.

function initMap(): void {
  const map = new google.maps.Map(
    document.getElementById("map") as HTMLElement,
    {
      zoom: 6,
      center: { lat: -33.872, lng: 151.252 },
    }
  );

  // Define the LatLng coordinates for the outer path.
  const outerCoords = [
    { lat: -32.364, lng: 153.207 }, // north west
    { lat: -35.364, lng: 153.207 }, // south west
    { lat: -35.364, lng: 158.207 }, // south east
    { lat: -32.364, lng: 158.207 }, // north east
  ];

  // Define the LatLng coordinates for an inner path.
  const innerCoords1 = [
    { lat: -33.364, lng: 154.207 },
    { lat: -34.364, lng: 154.207 },
    { lat: -34.364, lng: 155.207 },
    { lat: -33.364, lng: 155.207 },
  ];

  // Define the LatLng coordinates for another inner path.
  const innerCoords2 = [
    { lat: -33.364, lng: 156.207 },
    { lat: -34.364, lng: 156.207 },
    { lat: -34.364, lng: 157.207 },
    { lat: -33.364, lng: 157.207 },
  ];

  map.data.add({
    geometry: new google.maps.Data.Polygon([
      outerCoords,
      innerCoords1,
      innerCoords2,
    ]),
  });
}

declare global {
  interface Window {
    initMap: () => void;
  }
}
window.initMap = initMap;
index.ts

JavaScript

// This example uses the Google Maps JavaScript API's Data layer
// to create a rectangular polygon with 2 holes in it.
function initMap() {
  const map = new google.maps.Map(document.getElementById("map"), {
    zoom: 6,
    center: { lat: -33.872, lng: 151.252 },
  });
  // Define the LatLng coordinates for the outer path.
  const outerCoords = [
    { lat: -32.364, lng: 153.207 }, // north west
    { lat: -35.364, lng: 153.207 }, // south west
    { lat: -35.364, lng: 158.207 }, // south east
    { lat: -32.364, lng: 158.207 }, // north east
  ];
  // Define the LatLng coordinates for an inner path.
  const innerCoords1 = [
    { lat: -33.364, lng: 154.207 },
    { lat: -34.364, lng: 154.207 },
    { lat: -34.364, lng: 155.207 },
    { lat: -33.364, lng: 155.207 },
  ];
  // Define the LatLng coordinates for another inner path.
  const innerCoords2 = [
    { lat: -33.364, lng: 156.207 },
    { lat: -34.364, lng: 156.207 },
    { lat: -34.364, lng: 157.207 },
    { lat: -33.364, lng: 157.207 },
  ];

  map.data.add({
    geometry: new google.maps.Data.Polygon([
      outerCoords,
      innerCoords1,
      innerCoords2,
    ]),
  });
}

window.initMap = initMap;
index.js

טעינת GeoJSON

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

map.data.loadGeoJson('google.json');

בכל מפה יש map.data שמשמשת כשכבת נתונים של נתונים גיאו-מרחביים שרירותיים, GeoJSON. אפשר לטעון ולהציג קובץ GeoJSON באמצעות קריאה ל-loadGeoJSON() של האובייקט data. הדוגמה הבאה מראה איך להוסיף מפה ולטעון אותה נתוני GeoJSON חיצוניים.

TypeScript

let map: google.maps.Map;

function initMap(): void {
  map = new google.maps.Map(document.getElementById("map") as HTMLElement, {
    zoom: 4,
    center: { lat: -28, lng: 137 },
  });

  // NOTE: This uses cross-domain XHR, and may not work on older browsers.
  map.data.loadGeoJson(
    "https://storage.googleapis.com/mapsdevsite/json/google.json"
  );
}

declare global {
  interface Window {
    initMap: () => void;
  }
}
window.initMap = initMap;
index.ts

JavaScript

let map;

function initMap() {
  map = new google.maps.Map(document.getElementById("map"), {
    zoom: 4,
    center: { lat: -28, lng: 137 },
  });
  // NOTE: This uses cross-domain XHR, and may not work on older browsers.
  map.data.loadGeoJson(
    "https://storage.googleapis.com/mapsdevsite/json/google.json",
  );
}

window.initMap = initMap;
index.js
להצגת דוגמה

כדאי לנסות דוגמה

קובץ GeoJSON לדוגמה

רוב הדוגמאות בדף הזה משתמשות בקובץ GeoJSON נפוץ. הקובץ הזה מגדיר את ששת התווים הבאים ב-Google כפוליגונים מעל אוסטרליה. אפשר להעתיק או לשנות את הקובץ הזה במהלך הבדיקה של שכבת הנתונים.

הערה: כדי לטעון קובץ json מדומיין אחר, הדומיין חייב להיות הופעלה שיתוף משאבים בין מקורות.

ניתן לראות את הטקסט המלא של הקובץ למטה על ידי הרחבת החץ הקטן למילים google.json.

google.json

{
  "type": "FeatureCollection",
  "features": [
    {
      "type": "Feature",
      "properties": {
        "letter": "G",
        "color": "blue",
        "rank": "7",
        "ascii": "71"
      },
      "geometry": {
        "type": "Polygon",
        "coordinates": [
          [
            [123.61, -22.14], [122.38, -21.73], [121.06, -21.69], [119.66, -22.22], [119.00, -23.40],
            [118.65, -24.76], [118.43, -26.07], [118.78, -27.56], [119.22, -28.57], [120.23, -29.49],
            [121.77, -29.87], [123.57, -29.64], [124.45, -29.03], [124.71, -27.95], [124.80, -26.70],
            [124.80, -25.60], [123.61, -25.64], [122.56, -25.64], [121.72, -25.72], [121.81, -26.62],
            [121.86, -26.98], [122.60, -26.90], [123.57, -27.05], [123.57, -27.68], [123.35, -28.18],
            [122.51, -28.38], [121.77, -28.26], [121.02, -27.91], [120.49, -27.21], [120.14, -26.50],
            [120.10, -25.64], [120.27, -24.52], [120.67, -23.68], [121.72, -23.32], [122.43, -23.48],
            [123.04, -24.04], [124.54, -24.28], [124.58, -23.20], [123.61, -22.14]
          ]
        ]
      }
    },
    {
      "type": "Feature",
      "properties": {
        "letter": "o",
        "color": "red",
        "rank": "15",
        "ascii": "111"
      },
      "geometry": {
        "type": "Polygon",
        "coordinates": [
          [
            [128.84, -25.76], [128.18, -25.60], [127.96, -25.52], [127.88, -25.52], [127.70, -25.60],
            [127.26, -25.79], [126.60, -26.11], [126.16, -26.78], [126.12, -27.68], [126.21, -28.42],
            [126.69, -29.49], [127.74, -29.80], [128.80, -29.72], [129.41, -29.03], [129.72, -27.95],
            [129.68, -27.21], [129.33, -26.23], [128.84, -25.76]
          ],
          [
            [128.45, -27.44], [128.32, -26.94], [127.70, -26.82], [127.35, -27.05], [127.17, -27.80],
            [127.57, -28.22], [128.10, -28.42], [128.49, -27.80], [128.45, -27.44]
          ]
        ]
      }
    },
    {
      "type": "Feature",
      "properties": {
        "letter": "o",
        "color": "yellow",
        "rank": "15",
        "ascii": "111"
      },
      "geometry": {
        "type": "Polygon",
        "coordinates": [
          [
            [131.87, -25.76], [131.35, -26.07], [130.95, -26.78], [130.82, -27.64], [130.86, -28.53],
            [131.26, -29.22], [131.92, -29.76], [132.45, -29.87], [133.06, -29.76], [133.72, -29.34],
            [134.07, -28.80], [134.20, -27.91], [134.07, -27.21], [133.81, -26.31], [133.37, -25.83],
            [132.71, -25.64], [131.87, -25.76]
          ],
          [
            [133.15, -27.17], [132.71, -26.86], [132.09, -26.90], [131.74, -27.56], [131.79, -28.26],
            [132.36, -28.45], [132.93, -28.34], [133.15, -27.76], [133.15, -27.17]
          ]
        ]
      }
    },
    {
      "type": "Feature",
      "properties": {
        "letter": "g",
        "color": "blue",
        "rank": "7",
        "ascii": "103"
      },
      "geometry": {
        "type": "Polygon",
        "coordinates": [
          [
            [138.12, -25.04], [136.84, -25.16], [135.96, -25.36], [135.26, -25.99], [135, -26.90],
            [135.04, -27.91], [135.26, -28.88], [136.05, -29.45], [137.02, -29.49], [137.81, -29.49],
            [137.94, -29.99], [137.90, -31.20], [137.85, -32.24], [136.88, -32.69], [136.45, -32.36],
            [136.27, -31.80], [134.95, -31.84], [135.17, -32.99], [135.52, -33.43], [136.14, -33.76],
            [137.06, -33.83], [138.12, -33.65], [138.86, -33.21], [139.30, -32.28], [139.30, -31.24],
            [139.30, -30.14], [139.21, -28.96], [139.17, -28.22], [139.08, -27.41], [139.08, -26.47],
            [138.99, -25.40], [138.73, -25.00 ], [138.12, -25.04]
          ],
          [
            [137.50, -26.54], [136.97, -26.47], [136.49, -26.58], [136.31, -27.13], [136.31, -27.72],
            [136.58, -27.99], [137.50, -28.03], [137.68, -27.68], [137.59, -26.78], [137.50, -26.54]
          ]
        ]
      }
    },
    {
      "type": "Feature",
      "properties": {
        "letter": "l",
        "color": "green",
        "rank": "12",
        "ascii": "108"
      },
      "geometry": {
        "type": "Polygon",
        "coordinates": [
          [
            [140.14,-21.04], [140.31,-29.42], [141.67,-29.49], [141.59,-20.92], [140.14,-21.04]
          ]
        ]
      }
    },
    {
      "type": "Feature",
      "properties": {
        "letter": "e",
        "color": "red",
        "rank": "5",
        "ascii": "101"
      },
      "geometry": {
        "type": "Polygon",
        "coordinates": [
          [
            [144.14, -27.41], [145.67, -27.52], [146.86, -27.09], [146.82, -25.64], [146.25, -25.04],
            [145.45, -24.68], [144.66, -24.60], [144.09, -24.76], [143.43, -25.08], [142.99, -25.40],
            [142.64, -26.03], [142.64, -27.05], [142.64, -28.26], [143.30, -29.11], [144.18, -29.57],
            [145.41, -29.64], [146.46, -29.19], [146.64, -28.72], [146.82, -28.14], [144.84, -28.42],
            [144.31, -28.26], [144.14, -27.41]
          ],
          [
            [144.18, -26.39], [144.53, -26.58], [145.19, -26.62], [145.72, -26.35], [145.81, -25.91],
            [145.41, -25.68], [144.97, -25.68], [144.49, -25.64], [144, -25.99], [144.18, -26.39]
          ]
        ]
      }
    }
  ]
}

סגנון נתוני GeoJSON

משתמשים בשיטה Data.setStyle() כדי לציין איך הנתונים צריכים להיראות. השיטה setStyle() מקבלת StyleOptions ליטרל של אובייקט, או פונקציה שמחשבת את הסגנון של כל עצם.

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

הדרך הפשוטה ביותר לעצב תכונות היא להעביר את המילה 'ליטרל' של האובייקט StyleOptions אל setStyle(). הפעולה הזו תגדיר סגנון אחד לכל תכונה ב- האוסף 'עדכונים'. שימו לב שכל סוג תכונה יכול לעבד רק קבוצת משנה של האפשרויות הזמינות. כלומר, ניתן לשלב סגנונות עבור בליטרל של אובייקט יחיד. לדוגמה, קטעי הקוד שבהמשך גם icon בהתאמה אישית, שמשפיע רק על הגיאומטריה של נקודות וגם fillColor, שמשפיעה רק על פוליגונים.

map.data.setStyle({
  icon: '//example.com/path/to/image.png',
  fillColor: 'green'
});

ניתן למצוא מידע נוסף על שילובים חוקיים של סגנון/תכונות בקטע סגנון אפשרויות.

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

// Set the stroke width, and fill color for each polygon
map.data.setStyle({
  fillColor: 'green',
  strokeWeight: 1
});

כללים בסגנון הצהרתי

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

לדוגמה, הקוד הבא קובע את הצבע של כל תו google.json על ידי בחינת המיקום שלו במערכת התווים של ASCII. במקרה הזה קודדנו את מיקום התווים יחד עם הנתונים שלנו.

// Color Capital letters blue, and lower case letters red.
// Capital letters are represented in ascii by values less than 91
map.data.setStyle(function(feature) {
    var ascii = feature.getProperty('ascii');
    var color = ascii > 91 ? 'red' : 'blue';
    return {
      fillColor: color,
      strokeWeight: 1
    };
});

הסרת סגנונות

אם רוצים להסיר סגנונות שהוחלו, צריך להעביר ליטרל של אובייקט ריק אל אמצעי תשלום אחד (setStyles()).

// Remove custom styles.
map.data.setStyle({});

הפעולה הזו תסיר את כל הסגנונות המותאמים אישית שציינת, והתכונות יוסרו לעבד באמצעות סגנונות ברירת המחדל. אם במקום זאת תרצו להפסיק לעבד את תכונות, צריך להגדיר את המאפיין visible של StyleOptions כ-false.

// Hide the Data layer.
map.data.setStyle({visible: false});

שינוי סגנונות ברירת המחדל

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

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

// Set the global styles.
map.data.setStyle({
  fillColor: 'green',
  strokeWeight: 3
});

// Set the fill color to red when the feature is clicked.
// Stroke weight remains 3.
map.data.addListener('click', function(event) {
   map.data.overrideStyle(event.feature, {fillColor: 'red'});
});

צריך להפעיל את ה-method revertStyle() כדי להסיר את כל שינויי הסגנון.

אפשרויות סגנון

האפשרויות הזמינות לעיצוב של כל תכונה תלויות בסוג התכונה. לדוגמה, הפונקציה fillColor תציג רק תמונות של פוליגונים, ואילו icon יופיעו בגיאומטריה של נקודות בלבד. מידע נוסף זמין מאמרי עזרה עבור StyleOptions

זמין בכל הפריטים הגאומטריים

  • clickable: אם true, התכונה תקבל אירועים של עכבר ומגע
  • visible: אם true, התכונה גלויה.
  • zIndex: כל התכונות מוצגות במפה לפי הסדר של zIndex, כאשר ערכים גבוהים יותר מוצגים לפני תכונות עם ערכים נמוכים יותר. הסמנים תמיד מוצגים לפני מחרוזות קווים ופוליגונים.

זמין ברמות גיאומטריות של נקודות

  • cursor: סמן העכבר יוצג כשמעבירים את העכבר מעליו.
  • icon: סמל להצגה עבור גיאומטריית הנקודות.
  • shape: מגדיר את מפת התמונה המשמשת לזיהוי היטים.
  • title: טקסט בגלילת עכבר.

זמין במכשירים גיאומטריים

  • strokeColor: צבע הקו. כל צבעי CSS3 נתמכים, מלבד צבעים מורחבים בעלי שם.
  • strokeOpacity: שקיפות הקו בין 0.0 ל-1.0.
  • strokeWeight: רוחב הקווים בפיקסלים.

זמין בצורות גיאומטריות של פוליגונים

  • fillColor: צבע המילוי. כל צבעי CSS3 נתמכים, מלבד צבעים מורחבים בעלי שם.
  • fillOpacity: שקיפות המילוי בין 0.0 ל-1.0.
  • strokeColor: צבע הקו. כל צבעי CSS3 נתמכים, מלבד צבעים מורחבים בעלי שם.
  • strokeOpacity: שקיפות הקו בין 0.0 ל-1.0.
  • strokeWeight: רוחב הקווים בפיקסלים.

הוספת מטפלים באירועים

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

// Set mouseover event for each feature.
map.data.addListener('mouseover', function(event) {
  document.getElementById('info-box').textContent =
      event.feature.getProperty('letter');
});

אירועים של שכבת נתונים

האירועים הבאים משותפים לכל התכונות, בלי קשר לגיאומטריה שלהם :type

  • addfeature
  • click
  • dblclick
  • mousedown
  • mouseout
  • mouseover
  • mouseup
  • removefeature
  • removeproperty
  • rightclick
  • setgeometry
  • setproperty

מידע נוסף על האירועים האלה זמין במסמכי העזרה עבור המחלקה google.maps.data.

שינוי המראה באופן דינמי

אפשר להגדיר את הסגנון של שכבת הנתונים על ידי העברת פונקציה שמחשבת את של כל תכונה ל-method google.maps.data.setStyle(). הזה תתבצע קריאה לפונקציה בכל פעם שמאפיינים של תכונה מסוימת יעודכנו.

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

// Color each letter gray. Change the color when the isColorful property
// is set to true.
map.data.setStyle(function(feature) {
  var color = 'gray';
  if (feature.getProperty('isColorful')) {
    color = feature.getProperty('color');
  }
  return /** @type {!google.maps.Data.StyleOptions} */({
    fillColor: color,
    strokeColor: color,
    strokeWeight: 2
  });
});

// When the user clicks, set 'isColorful', changing the color of the letters.
map.data.addListener('click', function(event) {
  event.feature.setProperty('isColorful', true);
});

// When the user hovers, tempt them to click by outlining the letters.
// Call revertStyle() to remove all overrides. This will use the style rules
// defined in the function passed to setStyle()
map.data.addListener('mouseover', function(event) {
  map.data.revertStyle();
  map.data.overrideStyle(event.feature, {strokeWeight: 8});
});

map.data.addListener('mouseout', function(event) {
  map.data.revertStyle();
});