מאמר עזרה על עיצוב מפות מבוסס-ענן בפורמט JSON

בחירת פלטפורמה: Android Android 3D iOS iOS 3D JavaScript Web Service

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

הורדת סכימת ה-JSON

במאמר שימוש ב-JSON לעיצוב מפות מבוסס-ענן מוסבר איך לערוך סגנון המפה באמצעות JSON בכלי לעריכת סגנונות, או איך לייבא ולייצא סגנון המפה.

דוגמה להצהרת סגנון JSON

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

{
  "variant": "light",
  "styles": [
    {
      "id": "natural.land",
      "geometry": {
        "fillColor": "#f7e3f7"
      }
    },
    {
      "id": "natural.water",
      "geometry": {
        "fillColor": "#d4b2ff"
      },
      "label": {
        "textFillColor": "#3d2163",
        "textStrokeColor": "#f0e1ff"
      }
    },
    {
      "id": "pointOfInterest",
      "label": {
        "pinFillColor": "#e0349a",
        "textFillColor": "#a11e6e",
        "textStrokeColor": "#ffd9f0"
      }
    },
    {
      "id": "pointOfInterest.emergency.hospital",
      "geometry": {
        "fillColor": "#ffe3e3"
      }
    },
    {
      "id": "pointOfInterest.foodAndDrink",
      "label": {
        "visible": false
      }
    },
    {
      "id": "pointOfInterest.recreation.park",
      "geometry": {
        "fillColor": "#f9b9d2"
      }
    }
  ]
}

אובייקט ה-JSON

הצהרה בסגנון JSON מורכבת מאובייקט ברמה העליונה וממערך של כללי סגנון.

• מאפיינים ברמה העליונה (אופציונלי) – הגדרות סגנון גלובליות כמו backgroundColor ו-variant.
• ‫styles – מערך של אובייקטים של כללי סגנון, שיכולים לכלול את האפשרויות הבאות:
  • ‫id – מאפיין המפה שבוחרים לשינוי הסגנון (למשל, pointOfInterest.recreation.park).
  • ‫geometry (אופציונלי) – הרכיבים הגיאומטריים של מאפיין המפה וכללי הסגנון שרוצים להחיל (למשל, fillColor).
  • label (אופציונלי) – הטקסט או תווית הסיכה של רכיב במפה וכללי הסגנון להחלה (לדוגמה, textStrokeColor).

נכסים ברמה העליונה

המאפיינים בטבלה הבאה חלים על כל סגנון המפה.

נכס	סוג	תיאור	דוגמה
backgroundColor	מחרוזת	התאמה אישית של צבע הרקע של אפליקציית המפות באמצעות מחרוזת הקסדצימלית ‎ #RRGGBB. אי אפשר לשנות את השקיפות בהגדרה הזו.	"#002211"
variant	‫"light"‏|"dark"	מציינים מצב בהיר או מצב כהה. אם לא מציינים ערך, ברירת המחדל היא 'בהיר'.	"light"
monochrome	בוליאני	כדי להפעיל את האפשרות 'שחור-לבן', משתמשים ב-true כדי להציג גרסה אפורה של המפה.	true
metadata	אובייקט	נתוני מפתח-ערך שרירותיים שכלולים בהגדרת הסגנון. אפשר להשתמש בשדה הזה כדי לכלול תוכן שלא קשור לסגנון. הנתונים האלה לא נשלחים ללקוחות של מפות, כמו Maps JavaScript SDK.	{"author": "me", "date": "2026-04-27"}

אובייקטים של כללי סגנון

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

• נכס id.
• רכיב geometry או label עם מאפייני הסגנון המשויכים שמוגדרים.

‫id (רכיב במפה)

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

התכונות במפה יוצרות עץ קטגוריות. אם מציינים סוג של תכונת אב, כמו pointOfInterest, הסגנונות שמציינים עבור תכונת האב חלים על כל תכונות הצאצא שלה, כמו pointOfInterest.retail ו-pointOfInterest.lodging. פרטים נוספים זמינים במאמר בנושא היררכיית הרכיבים במפה.

רשימה של מאפייני id זמינים

אלה המאפיינים הזמינים של id:

• pointOfInterest
• pointOfInterest.emergency
• pointOfInterest.emergency.fire
• pointOfInterest.emergency.hospital
• pointOfInterest.emergency.pharmacy
• pointOfInterest.emergency.police
• pointOfInterest.entertainment
• pointOfInterest.entertainment.arts
• pointOfInterest.entertainment.casino
• pointOfInterest.entertainment.cinema
• pointOfInterest.entertainment.historic
• pointOfInterest.entertainment.museum
• pointOfInterest.entertainment.themePark
• pointOfInterest.entertainment.touristAttraction
• pointOfInterest.foodAndDrink
• pointOfInterest.foodAndDrink.bar
• pointOfInterest.foodAndDrink.cafe
• pointOfInterest.foodAndDrink.restaurant
• pointOfInterest.foodAndDrink.winery
• pointOfInterest.landmark
• pointOfInterest.lodging
• pointOfInterest.recreation
• pointOfInterest.recreation.beach
• pointOfInterest.recreation.boating
• pointOfInterest.recreation.fishing
• pointOfInterest.recreation.golfCourse
• pointOfInterest.recreation.hotSpring
• pointOfInterest.recreation.natureReserve
• pointOfInterest.recreation.park
• pointOfInterest.recreation.peak
• pointOfInterest.recreation.sportsComplex
• pointOfInterest.recreation.sportsField
• pointOfInterest.recreation.trailhead
• pointOfInterest.recreation.zoo
• pointOfInterest.retail
• pointOfInterest.retail.grocery
• pointOfInterest.retail.shopping
• pointOfInterest.service
• pointOfInterest.service.atm
• pointOfInterest.service.bank
• pointOfInterest.service.carRental
• pointOfInterest.service.evCharging
• pointOfInterest.service.gasStation
• pointOfInterest.service.parkingLot
• pointOfInterest.service.postOffice
• pointOfInterest.service.restStop
• pointOfInterest.service.restroom
• pointOfInterest.transit
• pointOfInterest.transit.airport
• pointOfInterest.other
• pointOfInterest.other.bridge
• pointOfInterest.other.cemetery
• pointOfInterest.other.government
• pointOfInterest.other.library
• pointOfInterest.other.military
• pointOfInterest.other.placeOfWorship
• pointOfInterest.other.school
• pointOfInterest.other.townSquare
• political
• political.countryOrRegion
• political.border
• political.reservation
• political.stateOrProvince
• political.city
• political.sublocality
• political.neighborhood
• political.landParcel
• infrastructure
• infrastructure.building
• infrastructure.building.commercial
• infrastructure.businessCorridor
• infrastructure.roadNetwork
• infrastructure.roadNetwork.noTraffic
• infrastructure.roadNetwork.noTraffic.pedestrianMall
• infrastructure.roadNetwork.noTraffic.trail
• infrastructure.roadNetwork.noTraffic.trail.paved
• infrastructure.roadNetwork.noTraffic.trail.unpaved
• infrastructure.roadNetwork.parkingAisle
• infrastructure.roadNetwork.ramp
• infrastructure.roadNetwork.road
• infrastructure.roadNetwork.road.arterial
• infrastructure.roadNetwork.road.highway
• infrastructure.roadNetwork.road.local
• infrastructure.roadNetwork.road.noOutlet
• infrastructure.roadNetwork.roadShield
• infrastructure.roadNetwork.roadSign
• infrastructure.roadNetwork.roadDetail
• infrastructure.roadNetwork.roadDetail.surface
• infrastructure.roadNetwork.roadDetail.crosswalk
• infrastructure.roadNetwork.roadDetail.sidewalk
• infrastructure.roadNetwork.roadDetail.intersection
• infrastructure.railwayTrack
• infrastructure.railwayTrack.commercial
• infrastructure.railwayTrack.commuter
• infrastructure.transitStation
• infrastructure.transitStation.bicycleShare
• infrastructure.transitStation.busStation
• infrastructure.transitStation.ferryTerminal
• infrastructure.transitStation.funicularStation
• infrastructure.transitStation.gondolaStation
• infrastructure.transitStation.monorail
• infrastructure.transitStation.railStation
• infrastructure.transitStation.railStation.subwayStation
• infrastructure.transitStation.railStation.tramStation
• infrastructure.urbanArea
• natural
• natural.continent
• natural.archipelago
• natural.island
• natural.land
• natural.land.landCover
• natural.land.landCover.crops
• natural.land.landCover.dryCrops
• natural.land.landCover.forest
• natural.land.landCover.ice
• natural.land.landCover.sand
• natural.land.landCover.shrub
• natural.land.landCover.tundra
• natural.water
• natural.water.ocean
• natural.water.lake
• natural.water.river
• natural.water.other
• natural.base

רכיבים

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

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

• ‫geometry: בוחר את כל הרכיבים הגיאומטריים (לדוגמה, פוליגון, קו שבור) של ישות המפה שצוינה.
• ‫label: בחירה של כל רכיבי התווית (למשל, טקסט, סיכה) של רכיב המפה שצוין.

מכשירים לאידוי בגדים

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

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

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

בקטע הזה מוסבר על אפשרויות הסגנון השונות שזמינות לרכיבים geometry ו-label.

geometry מעצבים

בטבלה הבאה מפורטים כל סגנוני הצורה הזמינים.

הערה: לא כל סוגי העיצוב זמינים לכל התכונות במפה.

Styler	סוג	תיאור
visible	בוליאני	כדי להסתיר את הפוליגון או הקו הפוליגוני של מאפיין במפה, מגדירים את הערך false.
fillColor	מחרוזת	אפשר להתאים אישית את הצבע של הפוליגון או הקו הפוליגוני באמצעות מחרוזת הקסדצימלית של RGB.
fillOpacity	מספר ממשי (float)	התאמה אישית של האטימות של הפוליגון או הקו הפוליגוני, כאשר 0 הוא שקוף ו-1 הוא אטום.
strokeColor	מחרוזת	אפשר להתאים אישית את צבע המסגרת באמצעות מחרוזת הקסדצימלית של RGB.
strokeOpacity	מספר ממשי (float)	אפשר להתאים אישית את האטימות של קווי המתאר, כאשר 0 הוא שקוף ו-1 הוא אטום.
strokeWeight	מספר ממשי (float)	אפשר להתאים אישית את עובי המתאר בטווח של 0 עד 8.

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

label מעצבים

בטבלה הבאה מפורטים כל הסגנונות הזמינים של תוויות.

הערה: לא כל סוגי העיצוב זמינים לכל התכונות במפה.

Styler	סוג	תיאור
visible	בוליאני	כדי להסתיר את התווית של רכיב במפה, מגדירים את הערך false.
textFillColor	מחרוזת	התאמה אישית של צבע תווית הטקסט באמצעות מחרוזת הקסדצימלית של RGB.
textFillOpacity	מספר ממשי (float)	התאמה אישית של השקיפות של תווית הטקסט, כאשר 0 הוא שקוף ו-1 הוא אטום.
textStrokeColor	מחרוזת	אפשר להתאים אישית את צבע המסגרת באמצעות מחרוזת הקסדצימלית של RGB.
textStrokeOpacity	מספר ממשי (float)	אפשר להתאים אישית את האטימות של קווי המתאר, כאשר 0 הוא שקוף ו-1 הוא אטום.
textStrokeWeight	מספר ממשי (float)	אפשר להתאים אישית את עובי קו המתאר בטווח שבין 0 ל-8.
pinFillColor	מחרוזת	אפשר להתאים אישית את צבע הסיכה באמצעות מחרוזת הקסדצימלית של RGB.
pinGlyphColor	מחרוזת	התאמה אישית של צבע הגליף (הסמל) בתוך סיכה באמצעות מחרוזת הקסדצימלית של RGB.
pinOutlineColor	מחרוזת	אפשר להתאים אישית את הצבע של קו המתאר של הסיכה באמצעות מחרוזת הקסדצימלית של RGB.

מידע נוסף זמין במאמר סמלים ותוויות טקסט.

רמות זום קובעות

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

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

בדוגמה הבאה, צבע המים הוא שחור ברמות הזום הקובעות 0-5, אפור כהה ברמות הזום הקובעות 6-11 ואפור בהיר החל מרמת הזום הקובעת 12.

{
  "id": "natural.water",
  "geometry": {
    "fillColor": {
      "z0": "#000000",
      "z6": "#666666",
      "z12": "#cccccc"
    }
  }
}

מידע נוסף זמין במאמר רמות זום של סגנון.

מגבלות

אתם יכולים להשתמש ב-JSON כדי לעצב כמעט כל דבר במסוף Google Cloud, חוץ מהאפשרויות הבאות בתפריט Map Settings:

• שליטה בצפיפות של נקודות העניין.
• שינוי התצוגה של הבניינים (טביעות רגל לעומת תלת-ממד).
• שינוי התצוגה (מאוירת לעומת רגילה) של ציוני דרך.

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

כדי להשתמש באפשרויות האלה, צריך לבחור את ההעדפה בתפריט הגדרות המפה.

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