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 stylu 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 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 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) – etykieta tekstowa lub pinezka 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ą ciągu szesnastkowego #RRGGBB string. 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 postaci par klucz-wartość zawarte w definicji stylu. Za pomocą tego pola możesz umieścić treści niezwiązane ze stylem. 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 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 notacji camel case.
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 dany 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 wielokąt obrysu budynku ma być widoczny na mapie. | Określa, czy etykieta budynku ma być widoczna. |
| 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 linii łamanej za pomocą ciągu szesnastkowego 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ą ciągu szesnastkowego 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ą ciągu szesnastkowego RGB. |
|
Liczba zmiennoprzecinkowa | Dostosuj przezroczystość etykiety tekstowej, gdzie 0 oznacza przezroczystość, a 1 – nieprzezroczystość. |
|
Ciąg znaków | Dostosuj kolor konturu za pomocą ciągu szesnastkowego 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ą ciągu szesnastkowego RGB. |
|
Ciąg znaków | Dostosuj kolor glifu (ikony) w pinezce za pomocą ciągu szesnastkowego RGB. |
|
Ciąg znaków | 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 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ć zoom początkowy dla stylu, we właściwości stylizatora zdefiniuj zoom początkowy od z0 do z22, a następnie dostosowanie stylizatora.
W tym przykładzie kolor wody jest czarny na poziomach zoomu początkowego od 0 do 5, ciemnoszary na poziomach zoomu początkowego od 6 do 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.