แผนที่ที่มีการปรับลักษณะ

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

ตัวอย่าง

ตัวอย่างต่อไปนี้แสดงแผนที่เมืองบรุกลิน สหรัฐอเมริกา โดยใช้สีของถนนท้องถิ่นเป็นสีเขียวสดใสและพื้นที่พักอาศัยเป็นสีดำ และยังปรับค่าความสว่างของป้ายกํากับเพื่อให้ดูโดดเด่นขึ้นในพื้นหลังสีเข้ม โปรดทราบว่าตัวอย่างที่ใช้งานได้นี้ใช้การเข้ารหัส URL:

https://maps.googleapis.com/maps/api/staticmap?size=512x512&zoom=15&center=Brooklyn&style=feature:road.local%7Celement:geometry%7Ccolor:0x00ff00&style=feature:landscape%7Celement:geometry.fill%7Ccolor:0x000000&style=element:labels%7Cinvert_lightness:true&style=feature:road.arterial%7Celement:labels%7Cinvert_lightness:false&key=YOUR_API_KEY&signature=YOUR_SIGNATURE
แผนที่เมืองบรุกลินที่มีการจัดรูปแบบ

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

https://maps.googleapis.com/maps/api/staticmap?size=512x512&zoom=12&center=Chicago&format=png&style=feature:road.highway%7Celement:geometry%7Cvisibility:simplified%7Ccolor:0xc280e9&style=feature:transit.line%7Cvisibility:simplified%7Ccolor:0xbababa&style=feature:road.highway%7Celement:labels.text.stroke%7Cvisibility:on%7Ccolor:0xb06eba&style=feature:road.highway%7Celement:labels.text.fill%7Cvisibility:on%7Ccolor:0xffffff&key=YOUR_API_KEY&signature=DITIGAL_SIGNATURE
US Road Atlas Map Style

ไวยากรณ์ของรูปแบบ

หากต้องการสร้างแมปที่มีสไตล์ที่กำหนดเอง ให้ใส่พารามิเตอร์ style อย่างน้อย 1 รายการใน URL ของคำขอ

การประกาศ style แต่ละรายการอาจมีอาร์กิวเมนต์ต่อไปนี้ ซึ่งคั่นด้วยอักขระไปป์ ("|")

  • feature (ไม่บังคับ) ระบุฟีเจอร์ให้เลือก สำหรับการแก้ไขสไตล์นี้ ฟีเจอร์ต่างๆ รวมถึงสิ่งต่างๆ บนแผนที่ เช่น ถนน สวนสาธารณะ หรือจุดสนใจอื่นๆ หากไม่มีอาร์กิวเมนต์ feature รูปแบบที่ระบุจะมีผลกับฟีเจอร์ทั้งหมด
  • element (ไม่บังคับ) ระบุองค์ประกอบของฟีเจอร์ที่ระบุเพื่อเลือกการแก้ไขสไตล์นี้ องค์ประกอบคือลักษณะของจุดสนใจ เช่น เรขาคณิตหรือป้ายกำกับ หากไม่มีอาร์กิวเมนต์ element สไตล์จะใช้กับองค์ประกอบทั้งหมดของฟีเจอร์ที่ระบุ
  • ชุดกฎรูปแบบ (บังคับ) ที่จะใช้กับฟีเจอร์และองค์ประกอบที่ระบุ API จะใช้กฎตามลำดับที่ปรากฏในการประกาศ style คุณจะรวมกฎได้ไม่จำกัดจำนวนภายในข้อจำกัดความยาว URL ปกติของ Maps Static API
style=feature:myFeatureArgument|element:myElementArgument|myRule1:myRule1Argument|myRule2:myRule2Argument

ฟีเจอร์

การประกาศ style ต่อไปนี้กำหนดสีถนนทุกเส้นบนแผนที่

style=feature:road|color:0xffffff

การเลือกฟีเจอร์ที่พบบ่อยบางส่วนมีดังนี้

  • feature:all (ค่าเริ่มต้น) เลือกสถานที่ทั้งหมดของแผนที่
  • feature:road เลือกถนนทั้งหมดบนแผนที่
  • feature:road.local เลือกถนนท้องถิ่นทั้งหมด

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

ฟีเจอร์จะสร้างแผนผังหมวดหมู่โดยมี 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 เลือกแหล่งน้ำ

องค์ประกอบ

การประกาศ style ต่อไปนี้เป็นสีป้ายกำกับสำหรับถนนท้องถิ่นทั้งหมด

style=feature:road.local|element:labels|color:0xffffff

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

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

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

กฎรูปแบบ

กฎรูปแบบคือตัวเลือกการจัดรูปแบบซึ่งจะใช้กับฟีเจอร์และองค์ประกอบที่ระบุภายในการประกาศ style แต่ละรายการ

การประกาศ style ต่อไปนี้ใช้กฎรูปแบบ 2 ข้อกับถนนในแผนที่ กฎข้อแรกใส่สีให้กับถนน กฎข้อที่ 2 ทำให้การแสดงถนนง่ายขึ้น จึงมีเส้นที่บางลงโดยไม่มีขอบมากเกินไป

style=feature:road|color:0xffffff|visibility:simplified

การประกาศ style แต่ละรายการต้องมีการดำเนินการอย่างน้อย 1 รายการ ที่คั่นด้วยอักขระไปป์ ("|") การดำเนินการแต่ละรายการจะระบุค่าอาร์กิวเมนต์โดยใช้อักขระโคลอน (":") และการดำเนินการทั้งหมดจะมีผลกับการเลือกในลำดับที่คุณระบุ

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

  • 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 ที่มีอยู่