Tài liệu tham khảo JSON để định kiểu bản đồ dựa trên đám mây

Chọn nền tảng: Android iOS JavaScript Dịch vụ web

Giản đồ JSON để định kiểu bản đồ dựa trên đám mây cho phép bạn sử dụng JSON để tuỳ chỉnh bản đồ giống như khi bạn thực hiện thông qua giao diện trình chỉnh sửa kiểu. Tài liệu này mô tả giản đồ JSON và cách đưa ra các khai báo kiểu JSON.

Tải giản đồ JSON xuống

Để tìm hiểu cách chỉnh sửa kiểu bản đồ bằng JSON trong trình chỉnh sửa kiểu hoặc cách nhập và xuất kiểu bản đồ, hãy xem phần Sử dụng JSON với tính năng tạo kiểu bản đồ dựa trên đám mây.

Xem ví dụ về khai báo kiểu JSON

Khai báo kiểu JSON sau đây đặt màu nền, sau đó xác định kiểu cho các địa điểm yêu thích, công viên, vùng nước và ẩn nhãn cho các vị trí đồ ăn và thức uống.

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

Đối tượng JSON

Khai báo kiểu JSON bao gồm một đối tượng cấp cao nhất và một mảng các quy tắc kiểu.

  • Chế độ cài đặt cấp cao nhất (không bắt buộc) – Chế độ cài đặt kiểu chung như backgroundColor và variant.
  • styles – Một mảng các đối tượng quy tắc kiểu, có thể bao gồm những đối tượng sau:
    • id – Đối tượng bản đồ cần chọn để sửa đổi kiểu này (ví dụ: pointOfInterest.recreation.park).
    • geometry (không bắt buộc) – Các phần tử hình học của đối tượng trên bản đồ và các quy tắc về kiểu cần áp dụng (ví dụ: fillColor).
    • label (không bắt buộc) – Nhãn văn bản hoặc nhãn ghim của đối tượng trên bản đồ và các quy tắc về kiểu cần áp dụng (ví dụ: textStrokeColor).

Chế độ cài đặt cấp cao nhất

Các thuộc tính trong bảng sau đây áp dụng cho toàn bộ kiểu bản đồ.

Thuộc tính Loại Nội dung mô tả Ví dụ

backgroundColor

 Chuỗi Tuỳ chỉnh màu nền của ứng dụng bản đồ bằng chuỗi hex #RRGGBB. Chế độ cài đặt này không hỗ trợ việc thay đổi độ mờ. "#002211"

variant

"light"|"dark" Chỉ định chế độ sáng hoặc tối. Nếu bạn không chỉ định, giá trị mặc định là "light". "light"

monochrome

boolean Để bật chế độ đơn sắc, hãy dùng true cho phiên bản màu xám của bản đồ.

true

Đối tượng quy tắc về kiểu

Phần này mô tả các thuộc tính xác định các đối tượng quy tắc kiểu trong mảng styles để tuỳ chỉnh các đối tượng trên bản đồ. Mỗi đối tượng quy tắc kiểu phải bao gồm những nội dung sau:

  • id tài sản.
  • Phần tử geometry hoặc label có các thuộc tính về kiểu dáng được xác định.

id (đối tượng trên bản đồ)

Thuộc tính id chỉ định đối tượng trên bản đồ cần tạo kiểu. Tên thuộc tính là phiên bản viết theo quy tắc lạc đà của tên đối tượng trên bản đồ trong trình chỉnh sửa kiểu.

Các đối tượng trên bản đồ tạo thành một cây danh mục. Nếu bạn chỉ định một kiểu đối tượng gốc, chẳng hạn như pointOfInterest, thì các kiểu bạn chỉ định cho đối tượng gốc sẽ áp dụng cho tất cả các đối tượng con của đối tượng đó, chẳng hạn như pointOfInterest.retail và pointOfInterest.lodging. Để biết thông tin chi tiết, hãy xem phần Hệ thống phân cấp đối tượng trên bản đồ.

Danh sách các thuộc tính id hiện có

Sau đây là các thuộc tính id hiện có:

  • 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

Thành phần

Phần tử là các phân mục của một đối tượng trên bản đồ. Ví dụ: một con đường bao gồm đường kẻ đồ hoạ (geometry) trên bản đồ, cũng như văn bản biểu thị tên của con đường đó (label).

Các phần tử sau đây có sẵn, nhưng lưu ý rằng một tính năng cụ thể trên bản đồ có thể không hỗ trợ, hỗ trợ một số hoặc hỗ trợ tất cả các phần tử:

  • geometry: Chọn tất cả các phần tử hình học (ví dụ: đa giác, đường đa tuyến) của đối tượng bản đồ được chỉ định.
  • label: Chọn tất cả các phần tử nhãn (ví dụ: văn bản, ghim) của đối tượng bản đồ được chỉ định.

Máy sấy tóc tạo kiểu

Trình tạo kiểu là cách bạn xác định các quy tắc về kiểu cho từng phần tử của một đối tượng trên bản đồ.

Ví dụ: đối với một đường viền toà nhà, bạn có thể tạo kiểu cho từng phần tử như sau:

Ví dụ về các kiểu geometry cho một toà nhà Ví dụ về các kiểu label cho một toà nhà
Ẩn hoặc hiện đa giác dấu vết của toà nhà trên bản đồ. Ẩn hay hiện nhãn toà nhà.
Màu và độ mờ của màu nền đa giác. Độ mờ và màu nền văn bản.
Màu, độ mờ và chiều rộng của đường viền. Màu và độ mờ của nét chữ trong văn bản.

Phần này mô tả các lựa chọn về kiểu có sẵn cho các phần tử geometry và label.

geometry styler

Bảng sau đây liệt kê tất cả các kiểu hình học có sẵn.

Styler Loại Nội dung mô tả

visible

boolean Để ẩn đa giác hoặc đường nhiều đoạn của một đối tượng trên bản đồ, hãy đặt thành false.

fillColor

chuỗi Tuỳ chỉnh màu của đa giác hoặc đường nhiều đoạn bằng chuỗi hex RGB.

fillOpacity

số thực dấu phẩy động Tuỳ chỉnh độ mờ của đa giác hoặc đường nhiều đoạn, trong đó 0 là trong suốt và 1 là mờ.

strokeColor

chuỗi Tuỳ chỉnh màu của đường viền bằng một chuỗi hex RGB.

strokeOpacity

số thực dấu phẩy động Tuỳ chỉnh độ mờ của đường viền, trong đó 0 là trong suốt và 1 là mờ.

strokeWeight

số thực dấu phẩy động Tuỳ chỉnh độ dày của đường viền trong khoảng từ 0 đến 8.

Để biết thêm thông tin, hãy xem phần Đa giác và đường nhiều đoạn.

label styler

Bảng sau đây liệt kê tất cả các kiểu nhãn có sẵn.

Styler Loại Nội dung mô tả

visible

boolean Để ẩn nhãn của một đối tượng trên bản đồ, hãy đặt thành false.

textFillColor

chuỗi Tuỳ chỉnh màu của nhãn văn bản bằng một chuỗi hex RGB.

textFillOpacity

số thực dấu phẩy động Tuỳ chỉnh độ mờ của nhãn văn bản, trong đó 0 là trong suốt và 1 là mờ.

textStrokeColor

chuỗi Tuỳ chỉnh màu của đường viền bằng một chuỗi hex RGB.

textStrokeOpacity

số thực dấu phẩy động Tuỳ chỉnh độ mờ của đường viền, trong đó 0 là trong suốt và 1 là mờ.

textStrokeWeight

số thực dấu phẩy động Tuỳ chỉnh độ dày của đường viền trong khoảng từ 0 đến 8.

pinFillColor

chuỗi Tuỳ chỉnh màu của ghim bằng một chuỗi hex RGB.

Để biết thêm thông tin, hãy xem phần Biểu tượng và nhãn văn bản.

mức thu phóng tham chiếu

Bạn có thể đặt một kiểu duy nhất cho một đối tượng ở tất cả các cấp độ thu phóng phím hoặc chỉ định các kiểu khác nhau cho các cấp độ thu phóng phím khác nhau. Nếu bạn chỉ cung cấp một kiểu, thì kiểu đó sẽ được dùng cho tất cả các cấp thu phóng khoá bắt đầu từ z0. Nếu bạn cung cấp kiểu cho các mức thu phóng khoá khác nhau, thì kiểu đó sẽ áp dụng từ mức thu phóng đó cho đến mức thu phóng tiếp theo mà bạn đã xác định.

Để đặt cấp độ thu phóng chính cho một kiểu, trong thuộc tính styler, hãy xác định cấp độ thu phóng chính từ z0 đến z22, sau đó xác định chế độ tuỳ chỉnh styler.

Trong ví dụ sau, màu nước là màu đen ở các mức thu phóng chính từ 0 đến 5, màu xám đậm ở các mức thu phóng chính từ 6 đến 11 và màu xám nhạt bắt đầu từ mức thu phóng chính 12.

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

Để biết thêm thông tin, hãy xem phần Các mức thu phóng kiểu.