ตัวเลือกรูปแบบช่วยให้คุณสามารถปรับแต่งการนำเสนอรูปแบบแผนที่ 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
ที่มีอยู่