חומר עזר בנושא סגנון עבור Maps JavaScript API

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

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

דוגמאות

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

[
  {
    "featureType": "all",
    "stylers": [
      { "color": "#C0C0C0" }
    ]
  },{
    "featureType": "road.arterial",
    "elementType": "geometry",
    "stylers": [
      { "color": "#CCFFFF" }
    ]
  },{
    "featureType": "landscape",
    "elementType": "labels",
    "stylers": [
      { "visibility": "off" }
    ]
  }
]

אובייקט ה-JSON

הצהרה של סגנון JSON מורכבת מהרכיבים הבאים:

  • featureType (אופציונלי) – התכונות לבחירה לשינוי הסגנון הזה. התכונות הן מאפיינים גיאוגרפיים כולל כבישים, פארקים, גופי מים ועוד. אם לא מציינים פיצ'ר מסוים, כל התכונות נבחרו.
  • elementType (אופציונלי) - המאפיין של תכונה שנבחרה לבחירה. רכיבים הם חלקי משנה של תכונה, כולל תוויות וגיאומטריה. אם לא תציינו רכיב, כל הרכיבים של נבחרו תכונות.
  • stylers – הכללים שיש להחיל על התכונות שנבחרו רכיבים. מעצבים מציינים את הצבע, החשיפה והמשקל של הפריט. אפשר להחיל אחד או יותר מעיצובי העיצוב על תכונה.

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

שאר הדף כולל מידע נוסף על תכונות, רכיבים של פריטי סטייליסט.

featureType

קטע הקוד הבא בפורמט JSON בוחר את כל הדרכים במפה:

{
  "featureType": "road"
}

פיצ'רים או סוגי פיצ'רים הם מאפיינים גיאוגרפיים במפה, כולל כבישים, פארקים, גופי מים, עסקים ועוד.

התכונות יוצרות עץ קטגוריות, עם all בתור השורש. אם לא תציינו תכונה, כל התכונות ייבחרו. לציון תכונה של all יש את אותו ההשפעה.

חלק מהתכונות כוללות תכונות צאצא שציינתם באמצעות נקודה . לדוגמה, landscape.natural או road.local. אם מציינים רק את תכונת ההורה, כמו road, הסגנונות שבחרת לתבנית ההורה חלים עליהם את כל הצאצאים, כמו road.local road.highway.

הערה: תכונות ההורה עשויות לכלול חלק מהרכיבים שלא כלולים בכל תכונות הצאצא שלהם.

אלה התכונות הזמינות:

  • all (ברירת מחדל) בוחר את כל התכונות.
  • כל האזורים מנהליים נבחרו על ידי administrative. עיצוב משפיעה רק על התוויות של אזורים מנהליים, ולא על המיקומים הגיאוגרפיים גבולות או מילוי.
    • administrative.country בוחר מדינות.
    • administrative.land_parcel בוחר חלקות קרקע.
    • administrative.locality בוחר רשויות מוניציפאליות.
    • administrative.neighborhood בוחר שכונות.
    • administrative.province בוחר מחוזות.
  • landscape בוחר את כל תצוגות הנוף.
    • landscape.man_made בחירת ישויות מעשה ידי אדם, כמו בניינים ועוד מבנים.
    • השדה landscape.natural בוחר אלמנטים טבעיים, כמו הרים, נהרות, מדבריות וקרחונים.
    • landscape.natural.landcover בוחר תכונות של כיסוי פני השטח, החומר הפיזי שמכסה את פני כדור הארץ, כגון יערות, ערבות, ביצות וקרקע חשופה.
    • landscape.natural.terrain בוחר תכונות פני שטח של פני קרקע, כמו גובה, שיפוע וכיוון.
  • poi בוחר את כל נקודות העניין.
    • poi.attraction בוחרת אטרקציות תיירותיות.
    • הבחירה של עסקים מתבצעת על ידי poi.business.
    • האפשרות poi.government בוחרת בניינים ממשלתיים.
    • שירותי החירום נבחרים על ידי poi.medical, כולל בתי חולים, בתי מרקחת, משטרה, רופאים ועוד.
    • בחרת פארקים ב-poi.park.
    • בחירת בתי תפילה על ידי poi.place_of_worship, כולל כנסיות, מקדשים, מסגדים ועוד.
    • poi.school בוחר בתי ספר.
    • בpoi.sports_complex נבחרים מתחמי ספורט.
  • כל הכבישים נבחרו על ידי road.
    • ב-road.arterial נבחרים עורקי תחבורה.
    • road.highway בוחר כבישים מהירים.
    • road.highway.controlled_access בוחר כבישים מהירים עם מבוקרת.
    • road.local בוחרים כבישים מקומיים.
  • transit בוחר את כל התחנות והקווים של התחבורה הציבורית.
    • transit.line בוחר קווים של תחבורה ציבורית.
    • האפשרות transit.station בוחרת את כל התחנות של תחבורה ציבורית.
    • transit.station.airport בוחר נמלי תעופה.
    • transit.station.bus בוחר תחנות אוטובוס.
    • האפשרות transit.station.rail בוחרת תחנות רכבת.
  • water בוחר גופי מים.

elementType

קטע הקוד הבא בפורמט JSON בוחר את התוויות של כל הדרכים המקומיות:

{
  "featureType": "road.local",
  "elementType": "labels"
}

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

הרכיבים הבאים זמינים, אבל שימו לב שתכונה ספציפית לא יכול לתמוך באף אחד מהאלמנטים, בחלק מהם או בכולם:

  • all (ברירת מחדל) בוחר את כל הרכיבים של התכונה שצוינה.
  • geometry בוחר את כל הרכיבים הגאומטריים של הערך שצוין .
    • geometry.fill בוחר רק את המילוי של הישות גיאומטריה.
    • geometry.stroke בוחר רק את הקו של הישות גיאומטריה.
  • labels בוחר את תוויות הטקסט המשויכות לפיצ'ר מסוים.
    • labels.icon בוחר רק את הסמל שמוצג בתוך תווית של התכונה.
    • labels.text בוחר רק את הטקסט של התווית.
    • labels.text.fill בוחר רק את המילוי של התווית. של תווית מעובד בדרך כלל כמתאר צבעוני שמקיף את טקסט התווית.
    • labels.text.stroke בוחר רק את הקו של התווית טקסט.

stylers

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

קטע קוד ה-JSON הבא מציג תכונה בירוק בהיר, באמצעות ערך RGB:

"stylers": [
  { "color": "#99FF33" }
]

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

"stylers": [
  { "saturation": -100 }
]

קטע הקוד הזה מסתיר תכונה לחלוטין:

    "stylers": [
      { "visibility": "off" }
    ]

אפשרויות הסגנון הבאות נתמכות:

  • hue (מחרוזת הקסדצימלית של RGB) #RRGGBB) מציין את הצבע הבסיסי.

    הערה: אפשרות זו מגדירה את הגוון תוך שמירה על רוויה ובהירות שצוינו בסגנון ברירת המחדל של Google (או באפשרויות סגנון אחרות הגדרה במפה). הצבע שמתקבל ביחס לסגנון של במפה הבסיסית. אם Google תבצע שינויים בסגנון המפה הבסיסית, השינויים משפיעה על תכונות המפה שמעוצבות באמצעות hue. עדיף אם אפשר, כדאי להשתמש בסטיילר המוחלט color.

  • lightness (ערך של נקודה צפה (floating-point) בין -100 ו-100) מציין את השינוי באחוזים בבהירות של לרכיב מסוים. ערכים שליליים מוחשים יותר (כאשר -100 מציינים שחור) בעוד שערכים חיוביים מגבירים את הבהירות (כאשר +100 מציין לבן).

    הערה: אפשרות זו מגדירה את הבהירות תוך שמירה על הרוויה והגוון שצוינו בסגנון ברירת המחדל של Google (או באפשרויות סגנון אחרות הגדרה במפה). הצבע שמתקבל ביחס לסגנון של במפה הבסיסית. אם Google תבצע שינויים בסגנון המפה הבסיסית, השינויים משפיעה על תכונות המפה שמעוצבות באמצעות lightness. עדיף כדי להשתמש בסטיילר המוחלט color אם אפשר.

  • saturation (ערך של נקודה צפה (floating-point) בין -100 ו-100) מציין את השינוי באחוזים בעוצמה של צבע בסיסי שיחול על הרכיב.

    הערה: אפשרות זו מגדירה את הרוויה תוך שמירה על גוון ובהירות שצוינו בסגנון ברירת המחדל של Google (או באפשרויות סגנון אחרות הגדרה במפה). הצבע שמתקבל יחסי לסגנון של במפה הבסיסית. אם Google תבצע שינויים בסגנון המפה הבסיסית, השינויים משפיעה על תכונות המפה שמעוצבות באמצעות saturation. זו אם אפשר, עדיף להשתמש בסטיילס המוחלט color.

  • gamma (ערך נקודה צפה (floating-point) בין 0.01 לבין 10.0, כאשר 1.0 לא מבצע תיקון) מציין כמות תיקון הגמא שיש להחיל על היסוד. תיקוני גאמה תשנה את בהירות הצבעים באופן לא ליניארי, בלי להשפיע ערכי לבן או שחור. בדרך כלל משתמשים בתיקון גאמה כדי לשנות הניגודיות בין אלמנטים מרובים. לדוגמה, אפשר לשנות את הגמא ל- להגדיל או להקטין את הניגודיות בין הקצוות הפנימיים של התמונה רכיבים.

    הערה: אפשרות זו משנה את הבהירות ביחס לברירת המחדל של Google באמצעות עקומת גאמה. אם Google מבצעת שינויים במפה הבסיסית הסגנון, השינויים משפיעים על התכונות במפה, שמעוצבות באמצעות gamma עדיף להשתמש בערך המוחלט 'color' אם אפשר.

  • invert_lightness (אם true) הופכת את הבהירות הקיימת. פעולה זו שימושית, למשל, עוברים למפה כהה עם טקסט לבן.

    הערה: האפשרות הזו פשוט ממירה את סגנון ברירת המחדל של Google. אם Google מבצע שינויים בסגנון המפה הבסיסית, הם משפיעים על העיצוב של המפה תכונות המעוצבות לפי invert_lightness. זו אם אפשר, עדיף להשתמש בסטיילס המוחלט color.

  • visibility (on, off, או simplified) מציין אם הרכיב מופיע ובאיזה אופן את המפה. חשיפה של simplified מסירה חלק מתכונות הסגנון מהתכונות המושפעות. למשל, דרכים דקות יותר ללא קווי מתאר, בעוד שהפארקים מאבדים את טקסט התווית שלהם אבל משאירים את סמל התווית.
  • color (מחרוזת הקסדצימלית של RGB) #RRGGBB) קובע את הצבע של הישות.
  • weight (ערך של מספר שלם, גדול מ-0 או שווה לו) את משקל התכונה, בפיקסלים. אם מגדירים את המשקל לערך גבוה, התוצאה תהיה חיתוך בקרבת גבולות המשבצות.

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

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

מודל הגוון, הרוויה והבהירות

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

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

גוון, רוויה, מודל בהירות

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

לדוגמה, ניתן להגדיר את הגוון של ירוק טהור בתור hue:0x00ff00 או hue:0x000100. שני הגוונים זהה. שני הערכים מצביעים על ירוק טהור במודל הצבעים HSL.

גלגל צבעים של RGB

ערכי RGB hue שמורכבים מחלקים שווים: אדום, ירוק וכחול לא מציינים גוון, כי אף אחד מהערכים האלה לא מציין כיוון מרחב הקואורדינטות של ה-HSL. לדוגמה: '#000000' (שחור), " #FFFFFF" (לבן), ואת כל הגוונים הטהורים של האפור. כדי לציין שחור, לבן או אפור, עליך מסירים את כל saturation (מגדירים את הערך כ--100) וגם במקום זאת, יש לשנות את lightness.

בנוסף, כשמבצעים שינוי של תכונות קיימות שכבר יש להן צבע סכימה, שינוי ערך כמו hue לא משנה את הערך הקיים saturation או lightness.