การอ้างอิง JSON สำหรับการจัดรูปแบบแผนที่ในระบบคลาวด์

เลือกแพลตฟอร์ม: Android iOS JavaScript Web Service

สคีมา JSON สำหรับการจัดรูปแบบแผนที่บนระบบคลาวด์ช่วยให้คุณใช้ JSON เพื่อ ปรับแต่งแผนที่ได้เช่นเดียวกับการใช้ผ่านอินเทอร์เฟซของเครื่องมือแก้ไขสไตล์ เอกสารนี้อธิบายสคีมา JSON และวิธีประกาศสไตล์ JSON

ดาวน์โหลดสคีมา JSON

ดูวิธีแก้ไขรูปแบบแผนที่โดยใช้ JSON ภายในเครื่องมือแก้ไขรูปแบบ หรือวิธี นำเข้าและส่งออกรูปแบบแผนที่ได้ที่ ใช้ JSON กับการจัดรูปแบบแผนที่บนระบบคลาวด์

ดูตัวอย่างการประกาศรูปแบบ JSON

การประกาศรูปแบบ JSON ต่อไปนี้จะกำหนดสีพื้นหลัง แล้วกำหนด รูปแบบสำหรับจุดที่น่าสนใจ สวนสาธารณะ แหล่งน้ำ และซ่อนป้ายกำกับสำหรับสถานที่ตั้งของอาหาร และเครื่องดื่ม

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

ออบเจ็กต์ JSON

การประกาศรูปแบบ JSON ประกอบด้วยออบเจ็กต์ระดับบนสุดและอาร์เรย์ของกฎรูปแบบ

  • การตั้งค่าระดับบนสุด (ไม่บังคับ) - การตั้งค่ารูปแบบส่วนกลาง เช่น backgroundColor และ variant
  • styles - อาร์เรย์ของออบเจ็กต์กฎของรูปแบบ ซึ่งอาจประกอบด้วยรายการต่อไปนี้
    • id - ฟีเจอร์แผนที่ที่จะเลือกสำหรับการแก้ไขรูปแบบนี้ (เช่น pointOfInterest.recreation.park)
    • geometry (ไม่บังคับ) - องค์ประกอบทางเรขาคณิตของฟีเจอร์แผนที่ และกฎรูปแบบที่จะใช้ (เช่น fillColor)
    • label (ไม่บังคับ) - ข้อความหรือป้ายกำกับหมุดของฟีเจอร์แผนที่และ กฎสไตล์ที่จะใช้ (เช่น textStrokeColor)

การตั้งค่าระดับบนสุด

พร็อพเพอร์ตี้ในตารางต่อไปนี้ใช้กับรูปแบบแผนที่ทั้งหมด

พร็อพเพอร์ตี้ ประเภท คำอธิบาย ตัวอย่าง

backgroundColor

 สตริง ปรับแต่งสีพื้นหลังของแอปแผนที่โดยใช้สตริงเลขฐานสิบหก #RRGGBB การตั้งค่านี้ไม่รองรับการเปลี่ยนแปลงความทึบแสง "#002211"

variant

"light"|"dark" ระบุโหมดสว่างหรือโหมดมืด หากไม่ได้ระบุ ค่าเริ่มต้นจะเป็น "สว่าง" "สว่าง"

monochrome

บูลีน หากต้องการเปิดใช้ขาวดำ ให้ใช้ true สำหรับแผนที่เวอร์ชันสีเทา

true

ออบเจ็กต์กฎรูปแบบ

ส่วนนี้อธิบายพร็อพเพอร์ตี้ที่กำหนดออบเจ็กต์กฎสไตล์ในอาร์เรย์ styles เพื่อปรับแต่งฟีเจอร์แผนที่ ออบเจ็กต์กฎสไตล์แต่ละรายการต้องประกอบด้วยข้อมูลต่อไปนี้

  • id พร็อพเพอร์ตี้
  • geometry หรือองค์ประกอบ label ที่กำหนดพร็อพเพอร์ตี้ของ Stylers ที่เชื่อมโยง

id (ฟีเจอร์แผนที่)

พร็อพเพอร์ตี้ id ระบุฟีเจอร์แผนที่ที่จะจัดรูปแบบ ชื่อพร็อพเพอร์ตี้คือ ชื่อฟีเจอร์แผนที่ในเครื่องมือแก้ไขรูปแบบที่เขียนในรูปแบบ Camel Case

ฟีเจอร์แผนที่จะสร้างโครงสร้างหมวดหมู่ หากคุณระบุประเภทฟีเจอร์หลัก เช่น pointOfInterest รูปแบบที่คุณระบุสำหรับฟีเจอร์หลักจะมีผลกับฟีเจอร์ย่อยทั้งหมด เช่น pointOfInterest.retail และ pointOfInterest.lodging ดูรายละเอียดได้ที่ลำดับชั้นของฟีเจอร์แผนที่

รายการพร็อพเพอร์ตี้ id ที่พร้อมใช้งาน

พร็อพเพอร์ตี้ id ที่ใช้ได้มีดังนี้

  • 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

องค์ประกอบ

องค์ประกอบคือส่วนย่อยของฟีเจอร์แผนที่ ตัวอย่างเช่น ถนน ประกอบด้วยเส้นกราฟิก (geometry) บนแผนที่ และข้อความ ที่ระบุชื่อ (label)

องค์ประกอบต่อไปนี้พร้อมใช้งาน แต่โปรดทราบว่าฟีเจอร์แผนที่บางอย่างอาจ ไม่รองรับ รองรับบางส่วน หรือรองรับทั้งหมด

  • geometry: เลือกองค์ประกอบทางเรขาคณิตทั้งหมด (เช่น รูปหลายเหลี่ยม โพลีไลน์) ของ ฟีเจอร์แผนที่ที่ระบุ
  • label: เลือกองค์ประกอบป้ายกำกับทั้งหมด (เช่น ข้อความ หมุด) ของฟีเจอร์แผนที่ที่ระบุ

ตู้ถนอมผ้า

Styler คือวิธีที่คุณกำหนดกฎสไตล์สำหรับองค์ประกอบแต่ละอย่างของฟีเจอร์แผนที่

ตัวอย่างเช่น สำหรับร่องรอยของอาคาร คุณสามารถจัดรูปแบบแต่ละองค์ประกอบได้ดังนี้

ตัวอย่างสไตเลอร์ geometry สำหรับอาคาร ตัวอย่างสไตเลอร์ label สำหรับอาคาร
จะซ่อนหรือแสดงรูปหลายเหลี่ยมร่องรอยของอาคารบนแผนที่ จะซ่อนหรือแสดงป้ายกำกับอาคาร
สีและความทึบแสงของสีเติมรูปหลายเหลี่ยม สีและความทึบแสงของสีเติมข้อความ
สี ความทึบแสง และความกว้างของเส้นขอบ สีและความทึบแสงของเส้นข้อความ

ส่วนนี้จะอธิบายตัวเลือกสไตล์ต่างๆ ที่ใช้ได้สำหรับองค์ประกอบ geometry และ label

geometry สไตลิสต์

ตารางต่อไปนี้แสดงรายการตัวจัดรูปแบบเรขาคณิตทั้งหมดที่ใช้ได้

Styler ประเภท คำอธิบาย

visible

บูลีน หากต้องการซ่อนรูปหลายเหลี่ยมหรือเส้นหลายส่วนของฟีเจอร์แผนที่ ให้ตั้งค่าเป็น false

fillColor

สตริง ปรับแต่งสีของรูปหลายเหลี่ยมหรือเส้นหลายเส้นด้วยสตริงเลขฐานสิบหก RGB

fillOpacity

จำนวนลอยตัว ปรับแต่งความทึบแสงของรูปหลายเหลี่ยมหรือเส้นหลายเส้น โดยที่ 0 คือ โปร่งใสและ 1 คือทึบแสง

strokeColor

สตริง ปรับแต่งสีของเส้นขอบด้วยสตริงเลขฐานสิบหก RGB

strokeOpacity

จำนวนลอยตัว ปรับแต่งความทึบแสงของเส้นขอบ โดย 0 คือโปร่งใสและ 1 คือ ทึบแสง

strokeWeight

จำนวนลอยตัว ปรับแต่งความหนาของเส้นขอบจากช่วง 0 ถึง 8

ดูข้อมูลเพิ่มเติมได้ที่ รูปหลายเหลี่ยมและเส้นหลายส่วน

label สไตลิสต์

ตารางต่อไปนี้แสดงตัวจัดรูปแบบป้ายกำกับทั้งหมดที่ใช้ได้

Styler ประเภท คำอธิบาย

visible

บูลีน หากต้องการซ่อนป้ายกำกับของฟีเจอร์แผนที่ ให้ตั้งค่าเป็น false

textFillColor

สตริง ปรับแต่งสีของป้ายกำกับข้อความด้วยสตริงเลขฐานสิบหก RGB

textFillOpacity

จำนวนลอยตัว ปรับแต่งความทึบแสงของป้ายกำกับข้อความ โดย 0 คือโปร่งใสและ 1 คือทึบแสง

textStrokeColor

สตริง ปรับแต่งสีของเส้นขอบด้วยสตริงเลขฐานสิบหก RGB

textStrokeOpacity

จำนวนลอยตัว ปรับแต่งความทึบแสงของเส้นขอบ โดย 0 คือโปร่งใสและ 1 คือ ทึบแสง

textStrokeWeight

จำนวนลอยตัว ปรับแต่งความหนาของเส้นขอบจากช่วง 0 ถึง 8

pinFillColor

สตริง ปรับแต่งสีหมุดด้วยสตริงเลขฐานสิบหก RGB

ดูข้อมูลเพิ่มเติมได้ที่ ไอคอนและป้ายกำกับข้อความ

คีย์ซูม

คุณสามารถตั้งค่าสไตล์เดียวสำหรับฟีเจอร์ในทุกระดับการซูมคีย์ หรือระบุ สไตล์ที่แตกต่างกันสำหรับระดับการซูมคีย์ที่แตกต่างกัน หากระบุรูปแบบเพียงรูปแบบเดียว ระบบจะใช้รูปแบบนั้นกับระดับการซูมทั้งหมดที่เริ่มต้นจาก z0 หากคุณระบุรูปแบบสำหรับ ระดับการซูมคีย์ที่แตกต่างกัน รูปแบบจะมีผลตั้งแต่ระดับการซูมนั้นจนถึง ระดับถัดไปที่คุณกำหนด

หากต้องการตั้งค่าระดับคีย์ซูมสำหรับสไตล์ ให้กำหนดระดับคีย์ซูม จาก z0 ถึง z22 ในพร็อพเพอร์ตี้ Styler แล้วกำหนดการปรับแต่ง Styler

ในตัวอย่างต่อไปนี้ สีของน้ำจะเป็นสีดำตั้งแต่ระดับคีย์ซูม 0-5 สีเทาเข้มตั้งแต่ระดับคีย์ซูม 6-11 และสีเทาอ่อนตั้งแต่ระดับคีย์ซูม 12

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

ดูข้อมูลเพิ่มเติมได้ที่ระดับการซูมของสไตล์