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 Web Service

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ư cách 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 tạo 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 để nhập và xuất kiểu bản đồ, hãy xem bài viết Sử dụng JSON để định 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, các đặc điểm về nước và ẩn nhãn cho các địa điểm bán đồ ă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 quy tắc về 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 về kiểu có thể bao gồm những nội dung sau:
- id – Đối tượng trên 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ợ thay đổi độ mờ.	"#002211"
`variant`	"light"\|"dark"	Chỉ định chế độ sáng hoặc tối. Nếu không chỉ định, giá trị mặc định là "light".	"light"
`monochrome`	boolean	Để bật chế độ đơn sắc, hãy sử 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 đối tượng quy tắc về kiểu trong mảng styles để tuỳ chỉnh các đối tượng bản đồ. Mỗi đối tượng quy tắc về kiểu phải bao gồm những nội dung sau:

Thuộc tính id.
Phần tử geometry hoặc label có các thuộc tính định kiểu được xác định liên kết.

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

Thuộc tính id chỉ định đối tượng trên bản đồ cần định kiểu. Tên thuộc tính là các phiên bản camelcase 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 loại đố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ó

Các thuộc tính id hiện có như sau:

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

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

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

geometry: Chọn tất cả các thành phần hình học (ví dụ: đa giác, đường nhiều đoạn) của đối tượng trên bản đồ đã chỉ định.
label: Chọn tất cả các thành phần nhãn (ví dụ: văn bản, ghim) của đối tượng trên bản đồ đã chỉ định.

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

Bộ định 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 dấu chân toà nhà, bạn có thể định kiểu cho từng thành phần như sau:

Ví dụ về máy sấy tóc tạo kiểu `geometry` cho một toà nhà	Ví dụ về máy sấy tóc tạo kiểu `label` cho một toà nhà
Có ẩn hay hiện đa giác dấu chân toà nhà trên bản đồ hay không.	Có ẩn hay hiện nhãn toà nhà hay không.
Màu nền và độ mờ của đa giác.	Màu nền và độ mờ của 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 kiểu khác nhau hiện có cho các thành phần geometry và label.

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

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

Bộ định kiểu	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 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 phạm vi 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.

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

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

Bộ định kiểu	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 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 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 phạm vi từ 0 đến 8.
`pinFillColor`	chuỗi	Tuỳ chỉnh màu ghim bằng 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.

Keyzoom

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

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

Trong ví dụ sau đây, màu của nước là màu đen từ cấp keyzoom 0-5, màu xám đậm từ cấp keyzoom 6-11 và màu xám nhạt bắt đầu từ cấp keyzoom 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ấp thu phóng kiểu.

Các điểm hạn chế

Bạn có thể sử dụng JSON để định kiểu cho hầu hết mọi thứ trong bảng điều khiển Cloud, ngoại trừ các tính năng sau đây trong trình đơn Cài đặt bản đồ:

Đối với các tính năng này, bạn phải chọn tuỳ chọn ưu tiên trong trình đơn Cài đặt bản đồ.

Tài liệu tham khảo JSON để định kiểu bản đồ dựa trên đám mây Sử dụng bộ sưu tập để sắp xếp ngăn nắp các trang Lưu và phân loại nội dung dựa trên lựa chọn ưu tiên của bạn.

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

Đối tượng JSON

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

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

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

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

Thành phần

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

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

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

Keyzoom

Các điểm hạn chế

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

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

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

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

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