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. Ten dokument opisuje schemat JSON i sposób tworzenia deklaracji w 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 ma zostać wybrany do tej 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 do zastosowania (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 krycia. | „#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 ikony true, aby wyświetlić mapę w odcieniach szarości. |
|
|
obiekt | Dowolne dane w formacie klucz-wartość uwzględnione w definicji stylu. W tym polu możesz umieścić treści niezwiązane ze stylem. 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:
idusługi.- 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ć niektóre z nich, wszystkie lub żadne:
geometry: wybiera wszystkie elementy geometryczne (np. wielokąt, linię łamaną) 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.
Na przykład w przypadku obrysu budynku możesz zastosować te style do poszczególnych elementów:
Przykładowe style geometry dla budynku |
Przykładowe style label dla budynku |
|---|---|
| czy wielokąt konturu budynku ma być 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 stylery
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ń wyświetlanie budynków (odciski a 3D).
- Zmień sposób wyświetlania punktów orientacyjnych (ilustrowany lub standardowy).
Te opcje na poziomie mapy wymagają ponownego pobrania danych kafelków, aby były 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.
Ponieważ te opcje nie są uwzględnione w eksportowanych stylach, podczas importowania stylu należy je ponownie wybrać w konsoli Google Cloud.