שכבת נתונים

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

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

סקירה כללית

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

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

באמצעות הכיתה google.maps.Data אפשר:

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

ציור פוליגון

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

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

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 של סגנון

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

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

הדרך הפשוטה ביותר להוסיף סגנון לתכונות היא להעביר ל-setStyle() אובייקט StyleOptions לינרי. כך תוכלו להגדיר סגנון אחד לכל תכונה באוסף. חשוב לזכור שכל סוג תכונה יכול להציג רק קבוצת משנה של האפשרויות הזמינות. כלומר, אפשר לשלב סגנונות של סוגי תכונות שונים בתוך ליטרל אובייקט אחד. לדוגמה, קטע הקוד הבא מגדיר גם 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
    };
});

הסרת סגנונות

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

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

הפעולה הזו תסיר את כל הסגנונות המותאמים אישית שציינתם, והתכונות ייrenderו באמצעות סגנונות ברירת המחדל. אם רוצים להפסיק את העיבוד של המאפיינים, מגדירים את המאפיין 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');
});

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

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

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

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

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

כדי להגדיר את הסגנון של שכבת הנתונים, מעבירים לשיטה 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();
});