שכבת נתונים

בחירת פלטפורמה: 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 מטפלת עבורכם בפוליגון מפותל. אפשר להעביר לו מערך של טבעת לינארית אחת או יותר, שמוגדרות כקואורדינטות של קו רוחב/אורך. הטבעת הלינארית הראשונה מגדירה את הגבול החיצוני של הפוליגון. אם מעבירים יותר מטבעת לינארית אחת, הטבעת הלינארית השנייה והעוקבת משמשת להגדרת נתיבים פנימיים (חורים) בפוליגון.

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

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 },
    { lat: -35.364, lng: 153.207 },
    { lat: -35.364, lng: 158.207 },
    { 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 על ידי קריאה ל-method 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
    };
});

הסרת הסגנונות

כדי להסיר סגנונות שהוחלו, צריך להעביר ליטרל של אובייקט ריק ל-method 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'});
});

קרא לשיטה 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: רוחב הקו בפיקסלים.

הוספת גורמי handler לאירועים

התכונות מגיבות לאירועים כמו 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.

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

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

בדוגמה הבאה אנחנו מוסיפים event listener לאירוע 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();
});