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

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

ניסיוני: הפניה ל-JSON הזו היא תכונה ניסיונית.

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

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

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

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

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

label stylers

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

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

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

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

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

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

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

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

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

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