שכבת הנתונים של מפות 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;
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;
טעינת 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;
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;
רוצה לנסות דוגמה?
קובץ 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(); });