Schemat JSON do definiowania stylów map w Google Cloud umożliwia dostosowywanie map za pomocą formatu JSON 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ł Używanie kodu JSON w przypadku definiowania 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 ciekawych miejsc, parków i obiektów wodnych oraz ukrywa etykiety miejsc, w których można coś zjeść lub wypić.
{
"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 (opcjonalnie) – 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(opcjonalny) – elementy geometryczne funkcji mapy i reguły stylu, które mają zostać 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 poniższej tabeli dotyczą całego stylu mapy.
| Właściwość | Typ | Opis | Przykład |
|---|---|---|---|
|
Ciąg znaków | Dostosuj kolor tła aplikacji mapowej, używając 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 określony, domyślnie używany jest motyw „light”. | „light” |
|
wartość logiczna | Aby włączyć tryb monochromatyczny, użyj true, aby wyświetlić szarą wersję mapy. |
|
|
obiekt | Dowolne dane w postaci par klucz-wartość zawarte 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 Maps JavaScript SDK. |
|
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 stylera.
id (element mapy)
Właściwość id określa element mapy, którego styl chcesz zmienić. Nazwy właściwości to wersje nazw cech mapy w edytorze stylów zapisane w notacji wielbłądziej.
Elementy mapy tworzą drzewo kategorii. Jeśli określisz nadrzędny typ obiektu, np. pointOfInterest, style określone dla obiektu nadrzędnego będą stosowane do wszystkich obiektów podrzędnych, takich jak pointOfInterest.retail i pointOfInterest.lodging.
Więcej informacji znajdziesz w artykule Hierarchia elementów mapy.
Lista dostępnych właściwości 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 podkategorie elementów 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ślonej funkcji mapy.label: wybiera wszystkie elementy etykiety (np. tekst, pinezkę) określonej funkcji mapy.
Parownice
Stylery to sposób definiowania reguł stylu dla każdego elementu obiektu 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. | Określa, 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 dla elementów geometry i label.
geometry stylizatorów
W tabeli poniżej znajdziesz wszystkie dostępne stylizatory geometryczne.
| Styler | Typ | Opis |
|---|---|---|
|
wartość logiczna | Aby ukryć wielokąt lub linię łamaną 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 przezroczystość konturu, gdzie 0 oznacza przezroczysty, a 1 – nieprzezroczysty. |
|
liczba zmiennoprzecinkowa | Dostosuj grubość konturu w zakresie od 0 do 8. |
Więcej informacji znajdziesz w artykule na temat wielokątów i linii łamanych.
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 przezroczystość etykiety tekstowej, gdzie 0 oznacza przezroczystość, a 1 – nieprzezroczystość. |
|
tekst | Dostosuj kolor konturu za pomocą ciągu szesnastkowego RGB. |
|
liczba zmiennoprzecinkowa | Dostosuj przezroczystość konturu, gdzie 0 oznacza przezroczysty, a 1 – nieprzezroczysty. |
|
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 elementu na wszystkich poziomach zoomu początkowego lub określić różne style dla różnych poziomów zoomu początkowego. Jeśli podasz tylko jeden styl, będzie on używany na wszystkich poziomach zoomu początkowego, zaczynając od z0. Jeśli podasz style dla różnych poziomów zoomu początkowego, styl będzie stosowany od danego poziomu powiększenia do następnego zdefiniowanego poziomu.
Aby ustawić poziom zoomu początkowego dla stylu, we właściwości stylera określ poziom zoomu początkowego od z0 do z22, a następnie dostosuj styler.
W tym przykładzie kolor wody jest czarny na poziomach zoomu początkowego 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 Poziomy powiększenia stylu.
Ograniczenia
Za pomocą formatu JSON możesz określić styl prawie 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ć preferencje 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.