การอ้างอิงรูปแบบสำหรับ API แบบคงที่ของแผนที่

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

ตัวอย่าง

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

[
  {
    "featureType": "all",
    "stylers": [
      { "color": "#C0C0C0" }
    ]
  },{
    "featureType": "road.arterial",
    "elementType": "geometry",
    "stylers": [
      { "color": "#CCFFFF" }
    ]
  },{
    "featureType": "landscape",
    "elementType": "labels",
    "stylers": [
      { "visibility": "off" }
    ]
  }
]

ออบเจ็กต์ JSON

การประกาศรูปแบบ JSON ประกอบด้วยองค์ประกอบต่อไปนี้

  • featureType (ไม่บังคับ) - ฟีเจอร์ที่จะเลือกสําหรับการแก้ไขสไตล์นี้ จุดสนใจต่างๆ คือลักษณะทางภูมิศาสตร์บนแผนที่ ซึ่งรวมถึงถนน สวนสาธารณะ แหล่งน้ำ และอื่นๆ หากคุณไม่ได้ระบุฟีเจอร์ ระบบจะเลือกฟีเจอร์ทั้งหมด
  • elementType (ไม่บังคับ) - พร็อพเพอร์ตี้ของฟีเจอร์ที่ระบุเพื่อเลือก องค์ประกอบคือส่วนย่อยของฟีเจอร์ รวมถึงป้ายกำกับและเรขาคณิต หากไม่ได้ระบุองค์ประกอบ ระบบจะเลือกองค์ประกอบทั้งหมดของฟีเจอร์
  • stylers - กฎที่จะใช้กับฟีเจอร์และองค์ประกอบที่เลือก เครื่องมือจัดแต่งทรงผมจะระบุสี ระดับการมองเห็น และน้ำหนักของจุดสนใจ คุณสามารถใช้เครื่องมือจัดแต่งทรงผมตั้งแต่ 1 ตัวขึ้นไปกับสถานที่ได้

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

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

featureType

ข้อมูลโค้ด JSON ต่อไปนี้เลือกถนนทั้งหมดบนแผนที่

{
  "featureType": "road"
}

สถานที่หรือประเภทของฟีเจอร์เป็นลักษณะทางภูมิศาสตร์บนแผนที่ ซึ่งรวมถึงถนน สวนสาธารณะ แหล่งน้ำ ธุรกิจ และอื่นๆ

ฟีเจอร์จะสร้างแผนผังหมวดหมู่โดยมี all เป็นรูท หากคุณไม่ระบุฟีเจอร์ ระบบจะเลือกฟีเจอร์ทั้งหมด การระบุฟีเจอร์ของ all จะให้ผลเหมือนกัน

บางฟีเจอร์มีฟีเจอร์ย่อยที่คุณระบุโดยใช้เครื่องหมายจุด เช่น landscape.natural หรือ road.local หากคุณระบุเฉพาะฟีเจอร์หลัก เช่น road รูปแบบที่คุณระบุสำหรับระดับบนสุดจะมีผลกับรายการย่อยทั้งหมด เช่น road.local และ road.highway

โปรดทราบว่าฟีเจอร์หลักอาจมีองค์ประกอบบางอย่างที่ไม่รวมอยู่ในฟีเจอร์ย่อยทั้งหมด

ฟีเจอร์ที่พร้อมใช้งานมีดังต่อไปนี้

  • all (ค่าเริ่มต้น) เลือกฟีเจอร์ทั้งหมด
  • administrative เลือกเขตบริหารทั้งหมด การจัดรูปแบบจะมีผลเฉพาะกับป้ายกำกับของเขตบริหาร ไม่ใช่ขอบเขตทางภูมิศาสตร์หรือการเติมสี
    • administrative.country เลือกประเทศ
    • administrative.land_parcel เลือกที่ดิน
    • administrative.locality เลือกย่าน
    • administrative.neighborhood เลือกย่านใกล้เคียง
    • administrative.province เลือกจังหวัด
  • landscape เลือกภาพทิวทัศน์ทั้งหมด
    • landscape.man_made เลือกฟีเจอร์ที่มนุษย์สร้างขึ้น เช่น อาคารและโครงสร้างอื่นๆ
    • landscape.natural เลือกสถานที่ทางธรรมชาติ เช่น ภูเขา แม่น้ำ ทะเลทราย และธารน้ำแข็ง
    • landscape.natural.landcover เลือกลักษณะสิ่งปกคลุมที่ดิน ซึ่งเป็นวัสดุทางกายภาพที่ปกคลุมพื้นผิวโลก เช่น ป่า ทุ่งหญ้า พื้นที่ชุ่มน้ำ และพื้นดินเปล่า
    • landscape.natural.terrain เลือกลักษณะภูมิประเทศของพื้นดิน เช่น ระดับความสูง ความชัน และการวางแนว
  • poi เลือกจุดสนใจทั้งหมด
    • poi.attraction เลือกสถานที่ท่องเที่ยว
    • poi.business เลือกธุรกิจ
    • poi.government เลือกอาคารของหน่วยงานราชการ
    • poi.medical เลือกบริการช่วยเหลือฉุกเฉิน เช่น โรงพยาบาล ร้านขายยา ตำรวจ แพทย์ และอื่นๆ
    • poi.park เลือกสวนสาธารณะ
    • poi.place_of_worship เลือกสถานที่สักการะ ซึ่งรวมถึงโบสถ์ วัด มัสยิด และอื่นๆ
    • poi.school เลือกโรงเรียน
    • poi.sports_complex เลือกศูนย์กีฬา
  • road เลือกถนนทั้งหมด
    • road.arterial เลือกถนนหลัก
    • road.highway เลือกทางหลวง
    • road.highway.controlled_access เลือกทางหลวงที่มีการควบคุม
    • road.local เลือกถนนท้องถิ่น
  • transit เลือกสถานีและสายทั้งหมด
    • transit.line เลือกเส้นทางขนส่งสาธารณะ
    • transit.station เลือกสถานีขนส่งทั้งหมด
    • transit.station.airport เลือกสนามบิน
    • transit.station.bus เลือกป้ายรถประจำทาง
    • transit.station.rail เลือกสถานีรถไฟ
  • water เลือกแหล่งน้ำ

elementType

ข้อมูลโค้ด JSON ต่อไปนี้จะเลือกป้ายกำกับสำหรับโลคัลโร้ดทั้งหมด

{
  "featureType": "road.local",
  "elementType": "labels"
}

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

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

  • all (ค่าเริ่มต้น) เลือกองค์ประกอบทั้งหมดของฟีเจอร์ที่ระบุ
  • geometry เลือกองค์ประกอบทางเรขาคณิตทั้งหมดของฟีเจอร์ที่ระบุ
    • geometry.fill เลือกเฉพาะการเติมรูปเรขาคณิตของฟีเจอร์
    • geometry.stroke เลือกเฉพาะเส้นโครงร่างของเรขาคณิตของฟีเจอร์
  • labels เลือกป้ายกำกับข้อความที่เกี่ยวข้องกับฟีเจอร์ที่ระบุ
    • labels.icon เลือกเฉพาะไอคอนที่แสดงในป้ายกำกับของฟีเจอร์
    • labels.text เลือกเฉพาะข้อความของป้ายกำกับ
    • labels.text.fill เลือกสีเติมของป้ายกำกับเท่านั้น โดยปกติแล้ว สีเติมของป้ายกำกับจะแสดงเป็นเส้นกรอบสีที่ล้อมรอบข้อความในป้ายกำกับ
    • labels.text.stroke เลือกเฉพาะเส้นโครงร่างของข้อความของป้ายกำกับ

stylers

เครื่องมือจัดแต่งทรงผมเป็นตัวเลือกการจัดรูปแบบที่คุณสามารถใช้กับฟีเจอร์และองค์ประกอบของแผนที่ได้

ข้อมูลโค้ด JSON ต่อไปนี้แสดงฟีเจอร์เป็นสีเขียวสดโดยใช้ค่า RGB

"stylers": [
  { "color": "#99FF33" }
]

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

"stylers": [
  { "saturation": -100 }
]

ข้อมูลโค้ดนี้จะซ่อนฟีเจอร์โดยสิ้นเชิง:

    "stylers": [
      { "visibility": "off" }
    ]

ระบบรองรับตัวเลือกรูปแบบต่อไปนี้

  • hue (สตริงฐานสิบหก RGB ของรูปแบบ #RRGGBB) แสดงถึงสีพื้นฐาน

    หมายเหตุ: ตัวเลือกนี้จะตั้งค่าโทนสีโดยคงความอิ่มตัวและความสว่าง ที่ระบุในสไตล์เริ่มต้นของ Google (หรือในตัวเลือกรูปแบบอื่นๆ ที่คุณกำหนดบนแผนที่) สีที่ได้จะสัมพันธ์กับรูปแบบของแผนที่ฐาน หาก Google ทำการเปลี่ยนแปลงใดๆ กับรูปแบบแผนที่ฐาน การเปลี่ยนแปลงดังกล่าวจะส่งผลต่อฟีเจอร์ของแผนที่ในรูปแบบ hue เราขอแนะนำให้ใช้การจัดสไตล์ color แบบสัมบูรณ์ หากทำได้

  • lightness (ค่าจุดลอยตัวระหว่าง -100 ถึง 100) ระบุเปอร์เซ็นต์การเปลี่ยนแปลงความสว่างขององค์ประกอบ ค่าลบจะเพิ่มความมืด (โดยที่ -100 หมายถึงสีดำ) ส่วนค่าบวกจะเพิ่มความสว่าง (โดย +100 หมายถึงสีขาว)

    หมายเหตุ: ตัวเลือกนี้จะตั้งค่าความสว่างโดยที่ยังคงความอิ่มตัวและโทนสีไว้ในรูปแบบเริ่มต้นของ Google (หรือในตัวเลือกรูปแบบอื่นๆ ที่คุณกำหนดบนแผนที่) สีที่ได้จะสัมพันธ์กับรูปแบบของแผนที่ฐาน หาก Google ทำการเปลี่ยนแปลงใดๆ กับรูปแบบแผนที่ฐาน การเปลี่ยนแปลงดังกล่าวจะส่งผลต่อฟีเจอร์ของแผนที่ในรูปแบบ lightness เราขอแนะนำให้ใช้การจัดสไตล์ color แบบสัมบูรณ์ หากทำได้

  • saturation (ค่าจุดลอยตัวระหว่าง -100 ถึง 100) แสดงถึงเปอร์เซ็นต์การเปลี่ยนแปลงความเข้มของสีพื้นฐานที่จะใช้กับองค์ประกอบ

    หมายเหตุ: ตัวเลือกนี้จะตั้งค่าความอิ่มตัวของสีในขณะที่คงโทนสีและความสว่างที่ระบุในสไตล์เริ่มต้นของ Google (หรือในตัวเลือกรูปแบบอื่นๆ ที่คุณกำหนดบนแผนที่) สีที่ได้จะสัมพันธ์กับรูปแบบของแผนที่ฐาน หาก Google ทำการเปลี่ยนแปลงใดๆ กับรูปแบบแผนที่ฐาน การเปลี่ยนแปลงดังกล่าวจะส่งผลต่อฟีเจอร์ของแผนที่ในรูปแบบ saturation เราขอแนะนำให้ใช้การจัดสไตล์ color แบบสัมบูรณ์ หากทำได้

  • gamma (ค่าจุดลอยตัวระหว่าง 0.01 ถึง 10.0 โดยที่ 1.0 ไม่มีการแก้ไข) ระบุจำนวนการแก้ไขแกมมาที่จะใช้กับองค์ประกอบ การแก้ไขแกมมาจะปรับความสว่างของสีในรูปแบบที่ไม่เป็นเชิงเส้น โดยไม่ส่งผลต่อค่าสีขาวหรือสีดำ โดยทั่วไปแล้ว การแก้ไขค่าแกมมาจะใช้เพื่อแก้ไขคอนทราสต์ขององค์ประกอบหลายรายการ เช่น คุณอาจแก้ไขแกมมาเพื่อเพิ่มหรือลดคอนทราสต์ระหว่างขอบและภายในขององค์ประกอบได้

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

  • invert_lightness (หาก true) กลับค่าความสว่างที่มีอยู่ ซึ่งจะเป็นประโยชน์ เช่น ช่วยให้เปลี่ยนไปใช้แผนที่สีเข้มขึ้นที่มีข้อความสีขาวได้อย่างรวดเร็ว

    หมายเหตุ: ตัวเลือกนี้เป็นเพียงการกลับลักษณะเริ่มต้นของ Google หาก Google ทำการเปลี่ยนแปลงใดๆ กับรูปแบบแผนที่ฐาน การเปลี่ยนแปลงนั้นจะส่งผลต่อฟีเจอร์ของแผนที่ในรูปแบบ invert_lightness เราขอแนะนำให้ใช้การจัดสไตล์ color แบบสัมบูรณ์ หากทำได้

  • visibility (on, off หรือ simplified) ระบุว่าองค์ประกอบจะปรากฏในแผนที่หรือไม่และอย่างไร ระดับการเข้าถึง simplified จะนำลักษณะรูปแบบบางอย่างออกจากฟีเจอร์ที่ได้รับผลกระทบ เช่น ถนนจะเรียบง่ายขึ้นเป็นเส้นบางๆ โดยไม่มีโครงร่าง ส่วนสวนสาธารณะจะสูญเสียข้อความป้ายกำกับ แต่ยังคงไอคอนป้ายกำกับไว้
  • color (สตริงฐานสิบหก RGB ของรูปแบบ #RRGGBB) จะกำหนดสีของฟีเจอร์
  • weight (ค่าจำนวนเต็มที่มากกว่าหรือเท่ากับ 0) จะกำหนดน้ำหนักของฟีเจอร์เป็นพิกเซล การตั้งค่าน้ำหนักเป็นค่าสูงอาจทำให้เกิดการตัดใกล้กับขอบของชิ้นส่วนข้อมูล

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

หมายเหตุ: ลำดับเป็นขั้นตอนสำคัญ เนื่องจากการดำเนินการบางอย่างไม่สามารถใช้สลับกันได้ ฟีเจอร์และ/หรือองค์ประกอบที่แก้ไขผ่านการดำเนินการเกี่ยวกับรูปแบบ (โดยปกติ) จะมีสไตล์อยู่แล้ว การดําเนินการจะดําเนินการกับสไตล์ที่มีอยู่เหล่านั้น (หากมี)

โมเดลโทนสี ความอิ่มตัว ความสว่าง

แผนที่ที่มีการจัดสไตล์ใช้โมเดล สี ความอิ่มตัว ความสว่าง (HSL) เพื่อแสดงสีภายในการทำงานของเครื่องมือจัดแต่งทรงผม โทนสีหมายถึงสีพื้นฐาน ความอิ่มตัว แสดงถึงความเข้มของสีนั้น และความสว่างแสดงถึง ปริมาณสัมพัทธ์ของสีขาวหรือสีดำในสีที่เป็นองค์ประกอบ

การแก้ไขค่าแกมมาจะปรับเปลี่ยนความสว่างในพื้นที่สี โดยทั่วไปแล้วเพื่อเพิ่มหรือลดคอนทราสต์ นอกจากนี้ โมเดล HSL ยังระบุสีภายในพื้นที่พิกัดที่ hue แสดงการวางแนวภายในวงล้อสี ส่วนความอิ่มตัวและความสว่างจะระบุแอมพลิจูดตามแกนต่างๆ ระบบจะวัดเฉดสีภายในพื้นที่สี RGB ซึ่งคล้ายกับพื้นที่สี RGB ส่วนใหญ่ แต่จะไม่มีเฉดสีขาวและสีดำ

โมเดลโทนสี ความอิ่มตัว ความสว่าง

แม้ว่า hue จะใช้ค่าสีแบบเลขฐาน 16 สำหรับ HTML แต่จะใช้ค่านี้เพื่อระบุสีพื้นฐานเท่านั้น กล่าวคือ การวางแนวโดยรอบของวงล้อสีไม่ใช่ความอิ่มตัวหรือความสว่าง ซึ่งระบุไว้ต่างหากเป็นเปอร์เซ็นต์การเปลี่ยนแปลง

เช่น คุณกำหนดโทนสีสำหรับสีเขียวบริสุทธิ์เป็น hue:0x00ff00 หรือ hue:0x000100 ได้ เฉดสีทั้ง 2 แบบเหมือนกัน ทั้ง 2 ค่าจะเป็นสีเขียวล้วนในโมเดลสี HSL

วงล้อสี RGB

ค่า RGB hue ซึ่งประกอบด้วยส่วนที่เท่ากันคือสีแดง เขียว และน้ำเงิน ไม่ได้บ่งบอกโทนสี เนื่องจากค่าเหล่านั้นไม่ได้แสดงถึงการวางแนวในพื้นที่พิกัด HSL ตัวอย่างเช่น "#000000" (สีดำ), "#FFFFFF" (สีขาว) และเฉดสีเทาทั้งหมด หากต้องการระบุสีดำ สีขาว หรือสีเทา คุณต้องนำ saturation ทั้งหมดออก (ตั้งค่าเป็น -100) และปรับ lightness แทน

นอกจากนี้ เมื่อแก้ไขฟีเจอร์ที่มีอยู่ซึ่งมีรูปแบบสีอยู่แล้ว การเปลี่ยนค่า เช่น hue จะไม่เปลี่ยน saturation หรือ lightness ที่มีอยู่