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

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

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

הסכימה של 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

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

בקטע הזה מפורטים המאפיינים שמגדירים את אובייקטים של כללי סגנון במערך 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.

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

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

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

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

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

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

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

מגבלות

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

• שליטה בצפיפות של נקודות העניין
• שינוי הסגנון של מבנים
• שינוי הסגנון של נקודות ציון.

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