Dokumentacja JSON definiowania stylów map w Google Cloud

Schemat JSON stylów map w Google Cloud umożliwia dostosowywanie map za pomocą JSON-a w taki sam sposób jak w interfejsie edytora stylów. Ten dokument opisuje schemat JSON i sposób tworzenia deklaracji w stylu JSON.

Pobierz schemat JSON

Aby dowiedzieć się, jak edytować styl mapy za pomocą formatu JSON w edytorze stylów lub jak importować i eksportować styl mapy, zapoznaj się z artykułem Korzystanie z formatu JSON w stylach map w chmurze.

Zobacz przykładową deklarację stylu JSON

Poniższa deklaracja stylu JSON ustawia kolor tła, a następnie definiuje style dla punktów orientacyjnych, parków i obiektów wodnych oraz ukrywa etykiety miejsc, w których można kupić jedzenie i napoje.


{
  "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"
      }
    }
  ]
}

Obiekt JSON

Deklaracja stylu JSON składa się z obiektu najwyższego poziomu i tablicy reguł stylu.

  • Ustawienia najwyższego poziomu (opcjonalne) – globalne ustawienia stylu, np. backgroundColorvariant.
  • styles – tablica obiektów reguł stylu, która może zawierać te elementy:
    • id – element mapy, który ma zostać wybrany do zmodyfikowania stylu (np. pointOfInterest.recreation.park).
    • geometry (opcjonalnie) – elementy geometryczne obiektu na mapie i reguły stylu do zastosowania (np. fillColor).
    • label (opcjonalnie) – tekst lub etykieta pinezki elementu mapy oraz reguły stylu, które mają być zastosowane (np. textStrokeColor).

Ustawienia najwyższego poziomu

Właściwości w tej tabeli dotyczą całego stylu mapy.

Właściwość Typ Opis Przykład

backgroundColor

Ciąg znaków Dostosuj kolor tła aplikacji Mapy za pomocą ciągu szesnastkowego #RRGGBB. To ustawienie nie obsługuje zmian krycia. „#002211”

variant

„light”|„dark” Określ tryb jasny lub ciemny. Jeśli nie określisz tu żadnej wartości, zostanie użyte ustawienie domyślne „light”. „light”

monochrome

Wartość logiczna Aby włączyć tryb monochromatyczny, użyj ikony true, aby wyświetlić mapę w odcieniach szarości.

true

Obiekty reguł dotyczących stylu

W tej sekcji opisano właściwości, które definiują obiekty reguł stylu w tablicy styles, aby dostosować elementy mapy. Każdy obiekt reguły stylu musi składać się z tych elementów:

  • id usługi.
  • geometry lub label z określonymi właściwościami stylizatora.

id (element mapy)

Właściwość id określa element mapy, do którego ma zostać zastosowany styl. Nazwy właściwości są wersjami nazw obiektów mapy w edytorze stylów (wielbłądowe).

Elementy mapy tworzą drzewo kategorii. Jeśli określisz typ obiektu nadrzędnego, taki jak pointOfInterest, style określone dla obiektu nadrzędnego zostaną zastosowane do wszystkich jego obiektów podrzędnych, takich jak pointOfInterest.retail i pointOfInterest.lodging. Więcej informacji znajdziesz w artykule Hierarchia funkcji mapy.

Lista dostępnych usług id

Dostępne właściwości id są następujące:

  • 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

Elementy

Elementy to podziały elementu mapy. Na przykład droga składa się z linii graficznej (geometry) na mapie oraz tekstu oznaczającego jej nazwę (label).

Dostępne są te elementy, ale pamiętaj, że konkretna funkcja mapy może obsługiwać niektóre z nich, wszystkie lub żadne:

  • geometry: wybiera wszystkie elementy geometryczne (np. wielokąt, polilinia) określonego elementu mapy.
  • label: wybiera wszystkie elementy etykiety (np. tekst, pinezkę) określonego elementu mapy.

Parownice

Stylisty to sposób definiowania reguł stylu dla każdego elementu funkcji mapy.

W przypadku obrysu budynku możesz na przykład zastosować te style:

Przykładowe style geometry dla budynku Przykładowe style label dla budynku
czy wielokąt budynku ma być widoczny na mapie. czy etykieta budynku ma być ukryta czy widoczna.
kolor i przezroczystość wypełnienia wielokąta; kolor i przezroczystość wypełnienia tekstu;
kolor, przezroczystość i szerokość obramowania; kolor i przezroczystość konturu tekstu;

W tej sekcji opisujemy różne opcje stylu dostępne dla elementów geometry i label.

geometry stylizatorów

W tabeli poniżej znajdziesz wszystkie dostępne style geometryczne.

Styler Typ Opis

visible

Wartość logiczna Aby ukryć wielokąt lub polilinię elementu mapy, ustaw wartość false.

fillColor

ciąg znaków Dostosuj kolor wielokąta lub polilinii za pomocą ciągu szesnastkowego RGB.

fillOpacity

liczba zmiennoprzecinkowa Dostosuj przezroczystość wielokąta lub polilinii, gdzie 0 oznacza przezroczystość, a 1 – nieprzezroczystość.

strokeColor

ciąg znaków Dostosuj kolor konturu za pomocą szesnastkowego ciągu RGB.

strokeOpacity

liczba zmiennoprzecinkowa Dostosuj nieprzezroczystość konturu, gdzie 0 oznacza przezroczystość, a 1 – nieprzezroczystość.

strokeWeight

liczba zmiennoprzecinkowa Dostosuj grubość konturu w zakresie od 0 do 8.

Więcej informacji znajdziesz w artykule Wielokąty i linie łamane.

label stylizatorów

W tabeli poniżej znajdziesz wszystkie dostępne style etykiet.

Styler Typ Opis

visible

Wartość logiczna Aby ukryć etykietę obiektu na mapie, ustaw wartość false.

textFillColor

ciąg znaków Dostosuj kolor etykiety tekstowej za pomocą szesnastkowego ciągu znaków RGB.

textFillOpacity

liczba zmiennoprzecinkowa Dostosuj nieprzezroczystość etykiety tekstowej, gdzie 0 oznacza przezroczystość, a 1 – nieprzezroczystość.

textStrokeColor

ciąg znaków Dostosuj kolor konturu za pomocą szesnastkowego ciągu RGB.

textStrokeOpacity

liczba zmiennoprzecinkowa Dostosuj nieprzezroczystość konturu, gdzie 0 oznacza przezroczystość, a 1 – nieprzezroczystość.

textStrokeWeight

liczba zmiennoprzecinkowa Dostosuj grubość konturu w zakresie od 0 do 8.

pinFillColor

ciąg znaków Dostosuj kolor pinezki za pomocą szesnastkowego ciągu znaków RGB.

Więcej informacji znajdziesz w sekcji Ikony i etykiety tekstowe.

Klawisze powiększenia

Możesz ustawić jeden styl dla funkcji na wszystkich poziomach powiększenia lub określić różne style dla różnych poziomów powiększenia. Jeśli podasz tylko jeden styl, będzie on używany na wszystkich poziomach powiększenia początkowego od z0. Jeśli podasz style dla różnych poziomów powiększenia początkowego, styl będzie stosowany od tego poziomu powiększenia do następnego zdefiniowanego poziomu.

Aby ustawić poziom zoomu początkowego dla stylu, w właściwości stylizatora zdefiniuj poziom zoomu początkowego od z0 do z22, a następnie dostosowanie stylizatora.

W tym przykładzie kolor wody jest czarny na poziomach powiększenia 0–5, ciemnoszary na poziomach 6–11 i jasnoszary od poziomu 12.

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

Więcej informacji znajdziesz w sekcji Poziomy powiększenia stylu.

Ograniczenia

Za pomocą JSON-a możesz określać style niemal wszystkich elementów w konsoli Google Cloud, z wyjątkiem tych funkcji z menu Ustawienia mapy:

W przypadku tych funkcji musisz wybrać preferowane ustawienia w menu Ustawienia mapy.