Schemat JSON definiowania 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. W tym dokumencie opisano schemat JSON i sposób tworzenia deklaracji stylu JSON.
Aby dowiedzieć się, jak edytować styl mapy za pomocą kodu JSON w edytorze stylów lub jak importować i eksportować styl mapy, przeczytaj artykuł Korzystanie z JSON w definiowaniu stylów map w Google Cloud.
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.
- Właściwości najwyższego poziomu (opcjonalne) – globalne ustawienia stylu, takie jak
backgroundColorivariant. styles– tablica obiektów reguł stylu, która może zawierać te elementy:id– element mapy, który chcesz wybrać do modyfikacji stylu (np.pointOfInterest.recreation.park).geometry(opcjonalnie) – elementy geometryczne obiektu na mapie i reguły stylu, które mają być zastosowane (np.fillColor).label(opcjonalnie) – tekst lub etykieta pinezki elementu mapy oraz reguły stylu, które mają zostać zastosowane (np.textStrokeColor).
Właściwości najwyższego poziomu
Właściwości w tej tabeli dotyczą całego stylu mapy.
| Właściwość | Typ | Opis | Przykład |
|---|---|---|---|
|
Ciąg znaków | Dostosuj kolor tła aplikacji Mapy za pomocą ciągu szesnastkowego #RRGGBB. To ustawienie nie obsługuje zmian przezroczystości. | "#002211" |
|
„light”|„dark” | Określ tryb jasny lub ciemny. Jeśli nie zostanie podany, domyślnie przyjmuje wartość „light”. | „light” |
|
wartość logiczna | Aby włączyć tryb monochromatyczny, użyj true, aby wyświetlić szarą wersję mapy. |
|
|
obiekt | Dowolne dane w formacie klucz-wartość uwzględnione w definicji stylu. Możesz użyć tego pola, aby podać informacje o stylu, które nie są związane ze stylizacją. Te dane nie są wysyłane do klientów Map, takich jak pakiet JavaScript SDK Map. |
|
Obiekty reguł stylu
W tej sekcji opisujemy 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.- Element
geometrylublabelze zdefiniowanymi powiązanymi właściwościami stylizatora.
id (element mapy)
Właściwość id określa element mapy, którego styl chcesz zmienić. Nazwy właściwości to wersje nazw funkcji mapy w edytorze stylów zapisane w formacie camel case.
Elementy mapy tworzą drzewo kategorii. Jeśli określisz typ funkcji nadrzędnej, np. pointOfInterest, style określone dla funkcji nadrzędnej będą stosowane do wszystkich jej funkcji podrzędnych, np. pointOfInterest.retail i pointOfInterest.lodging.
Więcej informacji znajdziesz w artykule Hierarchia elementów mapy.
Lista dostępnych usług id
Dostępne właściwości id:
pointOfInterestpointOfInterest.emergencypointOfInterest.emergency.firepointOfInterest.emergency.hospitalpointOfInterest.emergency.pharmacypointOfInterest.emergency.policepointOfInterest.entertainmentpointOfInterest.entertainment.artspointOfInterest.entertainment.casinopointOfInterest.entertainment.cinemapointOfInterest.entertainment.historicpointOfInterest.entertainment.museumpointOfInterest.entertainment.themeParkpointOfInterest.entertainment.touristAttractionpointOfInterest.foodAndDrinkpointOfInterest.foodAndDrink.barpointOfInterest.foodAndDrink.cafepointOfInterest.foodAndDrink.restaurantpointOfInterest.foodAndDrink.winerypointOfInterest.landmarkpointOfInterest.lodgingpointOfInterest.recreationpointOfInterest.recreation.beachpointOfInterest.recreation.boatingpointOfInterest.recreation.fishingpointOfInterest.recreation.golfCoursepointOfInterest.recreation.hotSpringpointOfInterest.recreation.natureReservepointOfInterest.recreation.parkpointOfInterest.recreation.peakpointOfInterest.recreation.sportsComplexpointOfInterest.recreation.sportsFieldpointOfInterest.recreation.trailheadpointOfInterest.recreation.zoopointOfInterest.retailpointOfInterest.retail.grocerypointOfInterest.retail.shoppingpointOfInterest.servicepointOfInterest.service.atmpointOfInterest.service.bankpointOfInterest.service.carRentalpointOfInterest.service.evChargingpointOfInterest.service.gasStationpointOfInterest.service.parkingLotpointOfInterest.service.postOfficepointOfInterest.service.restStoppointOfInterest.service.restroompointOfInterest.transitpointOfInterest.transit.airportpointOfInterest.otherpointOfInterest.other.bridgepointOfInterest.other.cemeterypointOfInterest.other.governmentpointOfInterest.other.librarypointOfInterest.other.militarypointOfInterest.other.placeOfWorshippointOfInterest.other.schoolpointOfInterest.other.townSquarepoliticalpolitical.countryOrRegionpolitical.borderpolitical.reservationpolitical.stateOrProvincepolitical.citypolitical.sublocalitypolitical.neighborhoodpolitical.landParcelinfrastructureinfrastructure.buildinginfrastructure.building.commercialinfrastructure.businessCorridorinfrastructure.roadNetworkinfrastructure.roadNetwork.noTrafficinfrastructure.roadNetwork.noTraffic.pedestrianMallinfrastructure.roadNetwork.noTraffic.trailinfrastructure.roadNetwork.noTraffic.trail.pavedinfrastructure.roadNetwork.noTraffic.trail.unpavedinfrastructure.roadNetwork.parkingAisleinfrastructure.roadNetwork.rampinfrastructure.roadNetwork.roadinfrastructure.roadNetwork.road.arterialinfrastructure.roadNetwork.road.highwayinfrastructure.roadNetwork.road.localinfrastructure.roadNetwork.road.noOutletinfrastructure.roadNetwork.roadShieldinfrastructure.roadNetwork.roadSigninfrastructure.roadNetwork.roadDetailinfrastructure.roadNetwork.roadDetail.surfaceinfrastructure.roadNetwork.roadDetail.crosswalkinfrastructure.roadNetwork.roadDetail.sidewalkinfrastructure.roadNetwork.roadDetail.intersectioninfrastructure.railwayTrackinfrastructure.railwayTrack.commercialinfrastructure.railwayTrack.commuterinfrastructure.transitStationinfrastructure.transitStation.bicycleShareinfrastructure.transitStation.busStationinfrastructure.transitStation.ferryTerminalinfrastructure.transitStation.funicularStationinfrastructure.transitStation.gondolaStationinfrastructure.transitStation.monorailinfrastructure.transitStation.railStationinfrastructure.transitStation.railStation.subwayStationinfrastructure.transitStation.railStation.tramStationinfrastructure.urbanAreanaturalnatural.continentnatural.archipelagonatural.islandnatural.landnatural.land.landCovernatural.land.landCover.cropsnatural.land.landCover.dryCropsnatural.land.landCover.forestnatural.land.landCover.icenatural.land.landCover.sandnatural.land.landCover.shrubnatural.land.landCover.tundranatural.waternatural.water.oceannatural.water.lakenatural.water.rivernatural.water.othernatural.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ć żaden, niektóre lub wszystkie z nich:
geometry: wybiera wszystkie elementy geometryczne (np. wielokąt, linię łamaną) określonego elementu mapy.label: wybiera wszystkie elementy etykiety (np. tekst, pinezkę) określonej funkcji mapy.
Parownice
Stylisty to sposób definiowania reguł stylu dla każdego elementu funkcji mapy.
Na przykład w przypadku obrysu budynku możesz nadać styl każdemu elementowi w ten sposób:
Przykładowe style geometry dla budynku |
Przykładowe style label dla budynku |
|---|---|
| Określa, czy wielokąt konturu budynku ma być ukryty czy widoczny na mapie. | czy etykieta budynku ma być ukryta czy widoczna. |
| kolor i przezroczystość wypełnienia wielokąta; | kolor wypełnienia tekstu i przezroczystość; |
| kolor, przezroczystość i szerokość obramowania; | kolor i przezroczystość konturu tekstu; |
W tej sekcji opisujemy różne opcje stylu dostępne w przypadku elementów geometry i label.
geometry stylery
W tabeli poniżej znajdziesz wszystkie dostępne style geometryczne.
| Styler | Typ | Opis |
|---|---|---|
|
wartość logiczna | Aby ukryć wielokąt lub polilinię elementu mapy, ustaw wartość false. |
|
tekst | Dostosuj kolor wielokąta lub linii łamanej za pomocą ciągu szesnastkowego RGB. |
|
liczba zmiennoprzecinkowa | Dostosuj nieprzezroczystość wielokąta lub linii łamanej, gdzie 0 oznacza przezroczystość, a 1 – nieprzezroczystość. |
|
tekst | Dostosuj kolor konturu za pomocą ciągu szesnastkowego RGB. |
|
liczba zmiennoprzecinkowa | Dostosuj nieprzezroczystość konturu, gdzie 0 oznacza przezroczystość, a 1 – nieprzezroczystość. |
|
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 |
|---|---|---|
|
wartość logiczna | Aby ukryć etykietę elementu mapy, ustaw wartość false. |
|
tekst | Dostosuj kolor etykiety tekstowej za pomocą ciągu szesnastkowego RGB. |
|
liczba zmiennoprzecinkowa | Dostosuj nieprzezroczystość etykiety tekstowej, gdzie 0 oznacza przezroczystość, a 1 – nieprzezroczystość. |
|
tekst | Dostosuj kolor konturu za pomocą ciągu szesnastkowego RGB. |
|
liczba zmiennoprzecinkowa | Dostosuj nieprzezroczystość konturu, gdzie 0 oznacza przezroczystość, a 1 – nieprzezroczystość. |
|
liczba zmiennoprzecinkowa | Dostosuj grubość konturu w zakresie od 0 do 8. |
|
tekst | Dostosuj kolor pinezki za pomocą ciągu szesnastkowego RGB. |
|
tekst | Dostosuj kolor glifu (ikony) w pinezce za pomocą ciągu szesnastkowego RGB. |
|
tekst | Dostosuj kolor konturu pinezki za pomocą ciągu szesnastkowego RGB. |
Więcej informacji znajdziesz w artykule Ikony i etykiety tekstowe.
Klawisze powiększenia
Możesz ustawić jeden styl dla funkcji na wszystkich poziomach zoomu początkowego lub określić różne style dla różnych poziomów zoomu początkowego. Jeśli podasz tylko 1 styl, będzie on używany na wszystkich poziomach zoomu początkowego od z0. Jeśli podasz style dla różnych poziomów zoomu 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 artykule Style poziomów powiększenia.
Ograniczenia
Za pomocą kodu JSON możesz określić styl niemal wszystkich elementów w konsoli Google Cloud, z wyjątkiem tych opcji w menu Ustawienia mapy:
- Kontrolowanie gęstości ciekawych miejsc
- Zmień sposób wyświetlania budynków (obrysy lub 3D).
- Zmień sposób wyświetlania punktów orientacyjnych (ilustrowany lub standardowy).
Te opcje na poziomie mapy wymagają ponownego pobrania danych kafelków, aby mogły być prawidłowo renderowane, co w niektórych przypadkach może być niepożądane.
W przypadku tych opcji musisz wybrać preferowane ustawienie w menu Ustawienia mapy.
Te opcje nie są uwzględniane w wyeksportowanych stylach, dlatego podczas importowania stylu musisz je ponownie wybrać w konsoli Google Cloud.