Schemat JSON definiowania stylów map w Google Cloud umożliwia dostosowywanie map za pomocą JSON tak samo jak w interfejsie edytora stylów. W tym dokumencie opisujemy schemat JSON oraz sposób tworzenia deklaracji stylów JSON.
Aby dowiedzieć się, jak edytować styl mapy za pomocą JSON w edytorze stylów lub jak importować i eksportować styl mapy, przeczytaj artykuł Używanie 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 dla ciekawych miejsc, parków i zbiorników wodnych oraz ukrywa etykiety lokalizacji, w których można zjeść i 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 (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 modyfikacji stylu (np.pointOfInterest.recreation.park).geometry(opcjonalne) – elementy geometryczne elementu mapy i reguły stylu, które mają zostać zastosowane (np.fillColor).label(opcjonalne) – 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 tabeli poniżej dotyczą całego stylu mapy.
| Właściwość | Typ | Opis | Przykład |
|---|---|---|---|
|
Ciąg znaków | Dostosuj kolor tła aplikacji mapy za pomocą 6-cyfrowego szesnastkowego ciągu znaków w formacie #RRGGBB. To ustawienie nie obsługuje zmian przezroczystości. | "#002211" |
|
"light"|"dark" | Określ tryb jasny lub ciemny. Jeśli nie określisz żadnego trybu, domyślnie zostanie użyty tryb „jasny”. | "light" |
|
Wartość logiczna | Aby włączyć tryb monochromatyczny, użyj wartości true w przypadku szarej wersji mapy. |
|
|
Obiekt | Dowolne dane w formacie klucz-wartość zawarte w definicji stylu. Za pomocą tego pola możesz umieścić treści dotyczące stylu, które nie są związane ze stylem. Te dane nie są wysyłane do klientów mapy, 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 służące do dostosowywania elementów mapy. Każdy obiekt reguły stylu musi zawierać te elementy:
- właściwość
id - element
geometrylublabelze zdefiniowanymi powiązanymi właściwościami stylizatora.
id (element mapy)
Właściwość id określa element mapy, który ma zostać stylizowany. Nazwy właściwości to wersje nazw elementów mapy w edytorze stylów zapisane w formacie camelcase.
Elementy mapy tworzą drzewo kategorii. Jeśli określisz typ elementu nadrzędnego,
takich jak pointOfInterest, style określone dla elementu nadrzędnego będą stosowane do wszystkich
jego elementó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 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 konkretny element mapy może obsługiwać niektóre, wszystkie lub żadne z nich:
geometry: wybiera wszystkie elementy geometryczne (np. wielokąt, polilinia) określonego elementu mapy.label: wybiera wszystkie elementy etykiety (np. tekst, pinezka) określonego elementu mapy.
Stylizatory
Stylizatory służą do definiowania reguł stylu dla każdego elementu mapy.
Na przykład w przypadku obrysu budynku możesz stylizować każdy element w ten sposób:
Przykładowe stylizatory geometry dla budynku |
Przykładowe stylizatory label dla budynku |
|---|---|
| Określa, czy na mapie ma być widoczny obrys budynku. | Określa, czy ma być widoczna etykieta budynku. |
| Kolor wypełnienia i przezroczystość wielokąta. | Kolor wypełnienia i przezroczystość 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.
Stylizatory geometry
W tabeli poniżej znajdziesz wszystkie dostępne stylizatory geometryczne.
| Stylizator | Typ | Opis |
|---|---|---|
|
Wartość logiczna | Aby ukryć wielokąt lub polilinię elementu mapy, ustaw wartość false. |
|
Ciąg znaków | Dostosuj kolor wielokąta lub polilinii za pomocą szesnastkowego ciągu znaków RGB. |
|
Liczba zmiennoprzecinkowa | Dostosuj przezroczystość wielokąta lub linii łamanej, gdzie 0 oznacza przezroczystość, a 1 – nieprzezroczystość. |
|
Ciąg znaków | Dostosuj kolor konturu za pomocą szesnastkowego ciągu znaków RGB. |
|
Liczba zmiennoprzecinkowa | Dostosuj przezroczystość 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 polilinie.
Stylizatory label
W tabeli poniżej znajdziesz wszystkie dostępne stylizatory etykiet.
| Stylizator | Typ | Opis |
|---|---|---|
|
Wartość logiczna | Aby ukryć etykietę elementu mapy, ustaw wartość false. |
|
Ciąg znaków | Dostosuj kolor etykiety tekstowej za pomocą szesnastkowego ciągu znaków RGB. |
|
Liczba zmiennoprzecinkowa | Dostosuj przezroczystość etykiety tekstowej, gdzie 0 oznacza przezroczystość, a 1 – nieprzezroczystość. |
|
Ciąg znaków | Dostosuj kolor konturu za pomocą szesnastkowego ciągu znaków RGB. |
|
Liczba zmiennoprzecinkowa | Dostosuj przezroczystość konturu, gdzie 0 oznacza przezroczystość, a 1 – nieprzezroczystość. |
|
Liczba zmiennoprzecinkowa | Dostosuj grubość konturu w zakresie od 0 do 8. |
|
Ciąg znaków | Dostosuj kolor pinezki za pomocą szesnastkowego ciągu znaków RGB. |
|
Ciąg znaków | Dostosuj kolor glifu (ikony) w pinezce za pomocą szesnastkowego ciągu znaków RGB. |
|
Ciąg znaków | Dostosuj kolor konturu pinezki za pomocą szesnastkowego ciągu znaków 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 1 styl, będzie on używany na wszystkich poziomach powiększenia 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 powiększenia dla stylu, we właściwości stylizatora zdefiniuj poziom powiększenia od z0 do z22, a następnie dostosowanie stylizatora.
W tym przykładzie kolor wody jest czarny na poziomach zoomu początkowego 0–5, ciemnoszary na poziomach 6–11 i jasnoszary od poziomu zoomu początkowego 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ą JSON możesz stylizować prawie wszystko w konsoli Google Cloud, z wyjątkiem tych opcji w menu Ustawienia mapy:
- Kontrolowanie gęstości ciekawych miejsc.
- Zmienianie wyświetlania budynków (obrysy lub 3D).
- Zmienianie wyświetlania punktów orientacyjnych (ilustrowane lub standardowe).
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ć preferencje w menu ustawień Ustawienia mapy.
Ponieważ te opcje nie są uwzględniane w eksportowanych stylach, podczas importowania stylu należy je ponownie wybrać w konsoli Google Cloud.