מאמר עזרה על עיצוב מפות מבוסס-ענן בפורמט 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.

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

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

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

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

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

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

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

מגבלות

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

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

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