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

בחירת פלטפורמה: Android iOS 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`

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

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

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

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

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

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

מגבלות

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

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

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

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

אובייקט ה-JSON

הגדרות ברמה העליונה

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

id (רכיב במפה)

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

רכיבים

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

geometry מעצבים

label מעצבים

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

מגבלות

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

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

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

`geometry` מעצבים

`label` מעצבים