Halaman ini diterjemahkan oleh Cloud Translation API.

Referensi JSON untuk gaya visual peta berbasis cloud

Pilih platform: Android iOS JavaScript Layanan Web

Skema JSON untuk gaya visual peta berbasis cloud memungkinkan Anda menggunakan JSON untuk menyesuaikan peta seperti yang Anda lakukan melalui antarmuka editor gaya visual. Dokumen ini menjelaskan skema JSON dan cara membuat deklarasi gaya JSON.

Download skema JSON

Untuk mempelajari cara mengedit gaya peta menggunakan JSON dalam editor gaya, atau untuk mengimpor dan mengekspor gaya peta, lihat Menggunakan JSON dengan gaya visual peta berbasis cloud.

Lihat contoh deklarasi gaya JSON

Deklarasi gaya JSON berikut menetapkan warna latar belakang, lalu menentukan gaya untuk lokasi menarik, taman, fitur air, dan menyembunyikan label untuk lokasi makanan dan minuman.


{
  "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"
      }
    }
  ]
}

Objek JSON

Deklarasi gaya JSON terdiri dari objek tingkat teratas dan array aturan gaya.

Setelan tingkat teratas (opsional) - Setelan gaya global seperti backgroundColor dan variant.
styles - Array objek aturan gaya, yang dapat terdiri dari berikut ini:
- id - Fitur peta yang akan dipilih untuk modifikasi gaya ini (misalnya, pointOfInterest.recreation.park).
- geometry (opsional) - Elemen geometris fitur peta dan aturan gaya yang akan diterapkan (misalnya, fillColor).
- label (opsional) - Teks atau label pin fitur peta dan aturan gaya yang akan diterapkan (misalnya, textStrokeColor).

Setelan tingkat teratas

Properti dalam tabel berikut berlaku untuk seluruh gaya peta.

Properti	Jenis	Deskripsi	Contoh
`backgroundColor`	String	Sesuaikan warna latar belakang aplikasi peta menggunakan string hex #RRGGBB. Setelan ini tidak mendukung perubahan pada keburaman.	"#002211"
`variant`	"light"\|"dark"	Tentukan mode terang atau gelap. Jika tidak ditentukan, defaultnya adalah "light".	"light" (ringan)
`monochrome`	boolean	Untuk mengaktifkan monokrom, gunakan `true` untuk peta versi abu-abu.	`true`

Objek aturan gaya

Bagian ini menjelaskan properti yang menentukan objek aturan gaya dalam array styles untuk menyesuaikan fitur peta. Setiap objek aturan gaya harus terdiri dari berikut ini:

properti id.
Elemen geometry atau label dengan properti penata gaya terkait yang ditentukan.

`id` (fitur peta)

Properti id menentukan fitur peta yang akan diberi gaya. Nama properti adalah versi camelcase dari nama fitur peta di editor gaya.

Fitur peta membentuk hierarki kategori. Jika Anda menentukan jenis fitur induk, seperti pointOfInterest, gaya yang Anda tentukan untuk induk akan diterapkan ke semua turunannya, seperti pointOfInterest.retail dan pointOfInterest.lodging. Untuk mengetahui detailnya, lihat Hierarki fitur peta.

Daftar properti `id` yang tersedia

Properti id yang tersedia adalah sebagai berikut:

pointOfInterest
pointOfInterest.emergency
pointOfInterest.emergency.fire
pointOfInterest.emergency.hospital
pointOfInterest.emergency.pharmacy
pointOfInterest.emergency.police
pointOfInterest.entertainment
pointOfInterest.entertainment.arts
pointOfInterest.entertainment.casino
pointOfInterest.entertainment.cinema
pointOfInterest.entertainment.historic
pointOfInterest.entertainment.museum
pointOfInterest.entertainment.themePark
pointOfInterest.entertainment.touristAttraction
pointOfInterest.foodAndDrink
pointOfInterest.foodAndDrink.bar
pointOfInterest.foodAndDrink.cafe
pointOfInterest.foodAndDrink.restaurant
pointOfInterest.foodAndDrink.winery
pointOfInterest.landmark
pointOfInterest.lodging
pointOfInterest.recreation
pointOfInterest.recreation.beach
pointOfInterest.recreation.boating
pointOfInterest.recreation.fishing
pointOfInterest.recreation.golfCourse
pointOfInterest.recreation.hotSpring
pointOfInterest.recreation.natureReserve
pointOfInterest.recreation.park
pointOfInterest.recreation.peak
pointOfInterest.recreation.sportsComplex
pointOfInterest.recreation.sportsField
pointOfInterest.recreation.trailhead
pointOfInterest.recreation.zoo
pointOfInterest.retail
pointOfInterest.retail.grocery
pointOfInterest.retail.shopping
pointOfInterest.service
pointOfInterest.service.atm
pointOfInterest.service.bank
pointOfInterest.service.carRental
pointOfInterest.service.evCharging
pointOfInterest.service.gasStation
pointOfInterest.service.parkingLot
pointOfInterest.service.postOffice
pointOfInterest.service.restStop
pointOfInterest.service.restroom
pointOfInterest.transit
pointOfInterest.transit.airport
pointOfInterest.other
pointOfInterest.other.bridge
pointOfInterest.other.cemetery
pointOfInterest.other.government
pointOfInterest.other.library
pointOfInterest.other.military
pointOfInterest.other.placeOfWorship
pointOfInterest.other.school
pointOfInterest.other.townSquare
political
political.countryOrRegion
political.border
political.reservation
political.stateOrProvince
political.city
political.sublocality
political.neighborhood
political.landParcel
infrastructure
infrastructure.building
infrastructure.building.commercial
infrastructure.businessCorridor
infrastructure.roadNetwork
infrastructure.roadNetwork.noTraffic
infrastructure.roadNetwork.noTraffic.pedestrianMall
infrastructure.roadNetwork.noTraffic.trail
infrastructure.roadNetwork.noTraffic.trail.paved
infrastructure.roadNetwork.noTraffic.trail.unpaved
infrastructure.roadNetwork.parkingAisle
infrastructure.roadNetwork.ramp
infrastructure.roadNetwork.road
infrastructure.roadNetwork.road.arterial
infrastructure.roadNetwork.road.highway
infrastructure.roadNetwork.road.local
infrastructure.roadNetwork.road.noOutlet
infrastructure.roadNetwork.roadShield
infrastructure.roadNetwork.roadSign
infrastructure.roadNetwork.roadDetail
infrastructure.roadNetwork.roadDetail.surface
infrastructure.roadNetwork.roadDetail.crosswalk
infrastructure.roadNetwork.roadDetail.sidewalk
infrastructure.roadNetwork.roadDetail.intersection
infrastructure.railwayTrack
infrastructure.railwayTrack.commercial
infrastructure.railwayTrack.commuter
infrastructure.transitStation
infrastructure.transitStation.bicycleShare
infrastructure.transitStation.busStation
infrastructure.transitStation.ferryTerminal
infrastructure.transitStation.funicularStation
infrastructure.transitStation.gondolaStation
infrastructure.transitStation.monorail
infrastructure.transitStation.railStation
infrastructure.transitStation.railStation.subwayStation
infrastructure.transitStation.railStation.tramStation
infrastructure.urbanArea
natural
natural.continent
natural.archipelago
natural.island
natural.land
natural.land.landCover
natural.land.landCover.crops
natural.land.landCover.dryCrops
natural.land.landCover.forest
natural.land.landCover.ice
natural.land.landCover.sand
natural.land.landCover.shrub
natural.land.landCover.tundra
natural.water
natural.water.ocean
natural.water.lake
natural.water.river
natural.water.other
natural.base

Elemen

Elemen adalah subdivisi fitur peta. Misalnya, jalan terdiri dari garis grafik (geometry) pada peta, dan juga teks yang menunjukkan namanya (label).

Elemen berikut tersedia, tetapi perhatikan bahwa fitur peta tertentu mungkin tidak mendukung, mendukung sebagian, atau mendukung semua, elemen:

geometry: Memilih semua elemen geometris (misalnya, poligon, polyline) dari fitur peta yang ditentukan.
label: Memilih semua elemen label (misalnya, teks, pin) dari fitur peta yang ditentukan.

Styler

Styler adalah cara Anda menentukan aturan gaya untuk setiap elemen fitur peta.

Misalnya, untuk jejak bangunan, Anda dapat menata gaya setiap elemen sebagai berikut:

Contoh penata gaya `geometry` untuk bangunan	Contoh penata gaya `label` untuk bangunan
Apakah akan menyembunyikan atau menampilkan poligon jejak bangunan di peta.	Apakah akan menyembunyikan atau menampilkan label bangunan.
Warna dan opasitas pengisi poligon.	Warna dan opasitas pengisi teks.
Warna, opasitas, dan lebar batas.	Warna dan opasitas goresan teks.

Bagian ini menjelaskan berbagai opsi gaya yang tersedia untuk elemen geometry dan label.

`geometry` styler

Tabel berikut mencantumkan semua penata gaya geometris yang tersedia.

Styler	Jenis	Deskripsi
`visible`	boolean	Untuk menyembunyikan poligon atau polyline fitur peta, tetapkan ke `false`.
`fillColor`	string	Sesuaikan warna poligon atau polyline dengan string hex RGB.
`fillOpacity`	float	Sesuaikan opasitas poligon atau polyline, dengan 0 transparan dan 1 buram.
`strokeColor`	string	Sesuaikan warna garis luar dengan string heksadesimal RGB.
`strokeOpacity`	float	Sesuaikan opasitas garis tepi, dengan 0 transparan dan 1 buram.
`strokeWeight`	float	Sesuaikan ketebalan garis batas dari rentang 0 hingga 8.

Untuk mengetahui informasi selengkapnya, lihat Poligon dan Polyline.

`label` styler

Tabel berikut mencantumkan semua penata gaya label yang tersedia.

Styler	Jenis	Deskripsi
`visible`	boolean	Untuk menyembunyikan label fitur peta, tetapkan ke `false`.
`textFillColor`	string	Sesuaikan warna label teks dengan string hex RGB.
`textFillOpacity`	float	Sesuaikan opasitas label teks, dengan 0 transparan dan 1 buram.
`textStrokeColor`	string	Sesuaikan warna garis luar dengan string heksadesimal RGB.
`textStrokeOpacity`	float	Sesuaikan opasitas garis tepi, dengan 0 transparan dan 1 buram.
`textStrokeWeight`	float	Sesuaikan ketebalan garis batas dari rentang 0 hingga 8.
`pinFillColor`	string	Sesuaikan warna pin dengan string hex RGB.

Untuk mengetahui informasi selengkapnya, lihat Ikon dan label teks.

Zoom kunci

Anda dapat menetapkan satu gaya untuk fitur di semua tingkat keyzoom atau menentukan gaya yang berbeda untuk tingkat keyzoom yang berbeda. Jika Anda hanya memberikan satu gaya, gaya tersebut akan digunakan untuk semua tingkat keyzoom yang dimulai dari z0. Jika Anda memberikan gaya untuk tingkat zoom utama yang berbeda, gaya akan diterapkan dari tingkat zoom tersebut hingga tingkat zoom berikutnya yang telah Anda tentukan.

Untuk menetapkan tingkat keyzoom gaya, di properti penata gaya, tentukan tingkat keyzoom dari z0 hingga z22, lalu penyesuaian penata gaya.

Dalam contoh berikut, warna air adalah hitam dari tingkat keyzoom 0-5, abu-abu gelap dari tingkat keyzoom 6-11, dan abu-abu terang mulai dari tingkat keyzoom 12.

{
  "id": "natural.water",
  "geometry": {
    "fillColor": {
      "z0": "#000000",
      "z6": "#666666",
      "z12": "#cccccc"
    }
  }
}

Untuk mengetahui informasi selengkapnya, lihat bagian Mengatur gaya tingkat zoom.