Skip to main content

สัญลักษณ์

สัญลักษณ์ (Symbol) การแสดงข้อมูลในรูปแบบของ Symbol, Icon, ป้าย, และข้อความ บนจุด ซึ่งสามารถทำการเลือกรูปแบบ Icon ได้ที่ Symbol layer โดยในการตกแต่งรูปแบบของแผนที่ด้วย Symbol, Icon, Text มีดังต่อไปนี้

Icon​

  • icon-allow-overlap การแสดงรูปแบบการวางซ้อนทับกันของตัว Icon โดยมีการกำหนดค่าเป็น True หรือ False ซึ่งมีค่าเริ่มต้นเป็น False คือเมื่อ Icon อยู่ใกล้กันจะไม่ซ้อนทับกัน และจะทำการกำหนด icon-allow-overlap ต้องมีการ icon-image มาก่่อน

  • icon-anchor มุมในการวางตัวของ Icon จากจุดพิกัด ซึ่งสามารถกำหนดการวางตัวได้ 8 รูปแบบ ดังนี้ center , left, right, top, bottom, top-left, top-right, bottom-left, bottom-right

  • icon-color การกำหนดค่าสีให้กับ Icon ซึ่งมีค่าสีเริ่มเท่ากับ #000000 ซึ่งต้องทำการกำหนด icon-image จึงสามารถทำการกำหนดสีของ Icon ได้ และสามารถใช้งานได้กับ Icon ที่อยู่ในรูปแบบ sdf เท่านั้น

  • icon-halo-blur กำหนดรัศมีการเบลอของ Halo Icon ซึ่งมีหน่วยเป็นพิกเซลและค่าเริ่มต้นเท่ากับ 0 พิกเซล ซึ่งต้องทำการกำหนด icon-image จึงสามารถใช้งานได้

  • icon-halo-color กำหนดสีของ Halo Icon มีค่าเริ่มต้นเท่ากับ rgba(0, 0, 0, 0) ซึ่งต้องทำการกำหนด icon-image จึงสามารถใช้งานได้ และสามารถใช้งานได้กับ Icon ที่อยู่ในรูปแบบ sdf เท่านั้น

  • icon-halo-width ความกว้างของ Halo Icon โดยมีค่าเริ่มต้นเท่ากับ 0 ซึ่งต้องทำการกำหนด icon-image จึงสามารถใช้งานได้

  • icon-ignore-placement การกำหนดการมองเห็น Icon หากกำหนดค่าเป็น False จะทำการแสดงบาง Icon เท่านั้น เพื่อป้องกันการแสดงผล Icon ที่ซ้อนทับกัน และหากกำหนดค่าเป็น True จะแสดง Icon ทั้งหมดตามจำนวนที่มี ซึ่งมีค่า Default เท่ากับ False

  • icon-image การกำหนดรูปแบบลักษณณะของ Icon ซึ่งสามารถทำการเลือก Sprite ที่อยู่ในระบบหรือสามารถเพิ่ม Icon เข้ามาเองได้ที่เมนู Image

  • icon-keep-upright กำหนด Icon ไม่ให้แสดงผลกลับทิศทาง ซึ่งมีค่าเริ่มต้นเป็น False และต้องทำการกำหนด icon-image , icon-rotation-alignment ให้เป็น map และเลือก symbol-placement ให้เป็น line หรือ line-center จึงจะสามารถใช้งานได้

  • icon-offset ระยะห่างจากตำแหน่งเริ่มต้นของ Icon ซึ่งกำหนดเป็นค่า [x,y] มีหน่วยเป็นพิกเซล และค่าเริ่มต้นเท่ากับ [0,0] โดยค่าที่เป็นบวกจะกำหนดค่า ด้านขวาและด้านล่าง และหากค่าเป็นลบจะเป็นการกำหนด Offset ด้านซ้าย และด้านบน และต้องมีการกำหนด icon-image จึงจะสามารถใช้งานได้

  • icon-opacity การกำหนดความโปร่งแสงของ Icon มีค่าตั้งต้นเท่ากับ 1 และต้องมีการกำหนด icon-image ก่อนจึงจะสามารถใช้งานได้

  • icon-optional การกำหนดการแสดงผลข้อความ (Text) เมื่อมี Icon แสดงผลซ้อนทับกัน ข้อความยังแสดงผลเมื่อกำหนดค่าเป็น True หากเป็น False Icon และข้อความจะมีการแสดงผลสัมพันธ์กัน ซึ่งต้องมีการ text-field ก่อน

  • icon-padding การกำหนดพื้นที่รอบตัว Icon มีค่าเริ่มต้นเท่ากับ 2 และมีหน่วยเป็นพิกเซลอง ซึ่งต้องมีการกำหนด icon-image จึงจะสามารถใช้งานได้

  • icon-pitch-alignment รูปแบบการแสดงผลของ Icon เมื่อทำการเปลี่ยนแปลงของมุมลาดเอียง (Pitch) จะเห็นความแตกต่างเมื่อทำการปรับมุมลาดเอียงไปมากกว่า 50 องศา ซึ่งมีค่าเริ่มต้นเป็น viewport โดยมี 3 รูปแบบคือ

    • map การมองเห็นจุดอยู่ในแนวระนาบเดียวกันกับแผนที่
    • viewport การมองเห็นจุดในแนวระนาบของมุมลาดเอียง
    • auto การกำหนดเป็น auto จะเป็นตามการกำหนด icon-rotation-alignment

  • icon-rotate การหมุน Icon มีหน่วยเป็นองศา โดยมีค่าเริ่มต้นเท่ากับ 0

  • icon-rotation-alignment การจัดวางแนวของ Icon ตามการกำหนดการหมุน Icon โดยมี 3 รูปแบบคือ

    • map เมื่อ symbol-placement ถูกกำหนดเป็น point Icon จะถูกจัดอยู่ในแนวตะวันออก - ตะวันตกของแผนที่ และเมื่อ symbol-placement ถูกกำหนดเป็น line หรือ line-center จะจัดแนวข้อความตามแกน X ของเส้น
    • viewport การวางแนวของ Icon จะอยู่ในแนวแกน X ซึ่งเป็นแนวเดียวกันกับการมองเห็น
    • auto หากกำหนดค่า symbol-placement เป็น point การแสดงผลจะเหมือนกันกับ viewport และหากกำหนดเป็น line หรือ line-center ซึ่งจะแสดงผบเหมือนกับ map

  • icon-size การกำหนดขนาดของ Icon ซึ่งมีค่าเริ่มต้นเท่ากับ 0 โดยต้องมีการกำหนด icon-image ก่อนจึงจะสามารถใช้งานได้

  • icon-text-fit การกำหนดขนาดของ Icon สมดุลกับขนาดข้อความ (Text) โดยมี 3 ดังนี้

    • none ขนาด Icon มีขนาดเหมือนกับขนาดตั้งต้น
    • width ความกว้างของ Icon ปรับตามความกว้างของข้อความ (Text)
    • height ความสูงของ Icon ปรับตามความสูงของข้อความ (Text)
    • both ขนาดของ Icon ปรับตามขนาดของข้อความทั้งความสูงและความกว้าง

  • icon-text-fit-padding การกำหนดพื้นที่รอบตัวของ Icon และข้อความให้สมดุลกัน โดยมีการกำหนดค่าเป็น บน ขวา ล่าง ซ้าย ลำดับ

  • icon-translate การกำหนด offset ของ Icon จากค่าพิกัดตั้งต้น เป็นค่า [x,y] ซึ่งมีหน่วยเป็นพิกเซล (Pixel) และมีค่าเริ่มต้นเท่า [0,0]

  • icon-translate-anchor การแสดงผลของ Icon ตามจุดยึดที่ได้กำหนดใน icon-translate โดยต้องมีการกำหนด icon-image และ icon-translate ก่อนจึงจะสามารถใช้งานได้ ซึ่งมี 2 รูปแบบคือ

    • map แสดงตำแหน่งของ Icon ตามมีความสัมพันธ์กับแผนที่
    • viewport แสดงตำแหน่งของ Icon ตามมีความสัมพันธ์ของ viewport

Symbol​

  • symbol-avoid-edges การกำหนดค่าการหลีกเลี่ยงการขนกันของ Symbol
  • symbol-placement การกำหนดการแสดงผลของ Symbol ซึ่งมีจำนวน 3 รูปแบบดังต่อไปนี้
    • point Symbol จะวางตรงกับค่าพิกัดของจุดที่ได้กำหนดไว้เริ่มต้น
    • line Symbol ตามแนวของข้อมูลที่อยู่ในรูปแบบเส้น (Line) และพื้นที่รูปปิด (Polygon)
    • line-center Symbol จะถูกวางไว้ที่กึ่งกลางของ Feature ซึ่งสามารถใช้ได้กับเส้น และ พื้นที่รูปปิดเท่านั้น
  • symbol-sort-key เรียงลำดับ Symbol จากน้อยไปหามากตามค่าที่กำหนด Symbol ที่มีคีย์การเรียงลำดับที่สูงกว่าจะปรากฏเหนือ Symbol ที่มีคีย์การเรียงลำดับที่ต่ำกว่า
  • symbol-spacing ช่องว่างระหว่าง Symbol สองตัวใดๆ มีค่าตั้งต้นเท่ากับ 250 พิกเซล ซึ่งสามารถใช้ได้เมื่อมีการกำหนด symbol-placement เป็น line
  • symbol-z-order กำหนดการแสดงผลของ Symbol ที่ซ้อนทับกันใน Layer เดียวกัน ซึ่งมี 3 รูปแบบดังต่อไปนี้
    • auto
    • viewport-y
    • source

Text​

  • text-allow-overlap การซ้อนทับกันของข้อความ (Text) มีค่าเริ่มต้นเป็น False ซึ่งหากทกรกำหนดเป็น True การแสดงผลของข้อความจะสามารถซ้อนทับกันได้

  • text-anchor ลักษณะการวางตัวของข้อความ ซึ่งมีตำแหน่งเริ่มต้นของข้อความเป็นจุดยึด โดยมีทั้งหมด 9 รูปแบบได้แก่ center, left, right, top, buttom, top-left, top-right, buttom-left, buttom-right มีค่าเริ่มต้นเป็น center และต้องมีการกำหนด text-field ก่อนจึงจะสามารถใช้งานได้และเมื่อใช้งานร่วมกับ text-variable-anchor

  • text-color การกำหนดสีของข้อความ (Text color) ซึ่งมีค่าสีเริ่มต้น คือ #000000 ซึ่งต้องมีการกำหนด text-field ก่อนจึงสามารถใช้งานได้

  • text-field ชื่อคอลัมน์ที่ต้องการนำค่าข้อมูลมาใช้การแสดงผลข้อความ โดยประเภทค่าของข้อมูลเริ่มต้นเป็นประเภท String

  • text-font รูปแบบตัวหนังสือของข้อความ สามารถทำการกำหนดรูปแบบของข้อความได้มากกว่า 1 รูปแบบ ซึ่งจะเรียกใช้รูปแบบตัวหนังสืิอแรกที่เลือกมา หากใช้งานไม่ได้จะเรียกใช้รูปแบบถัดไป

  • text-halo-blur กำหนดรัศมีการเบลอของ Halo ข้อความซึ่งมีหน่วยเป็นพิกเซลและค่าเริ่มต้นเท่ากับ 0 พิกเซล ซึ่งต้องทำการกำหนด text-field จึงสามารถใช้งานได้

  • text-halo-color กำหนดสีของ Halo ข้อความมีค่าเริ่มต้นเท่ากับ rgba(0, 0, 0, 0) ซึ่งต้องทำการกำหนด text-field จึงสามารถใช้งานได้ และสามารถใช้งานได้กับ Icon ที่อยู่ในรูปแบบ sdf เท่านั้น

  • text-halo-width ความกว้างของ Halo ข้อความโดยมีค่าเริ่มต้นเท่ากับ 0 ซึ่งต้องทำการกำหนด text-field จึงสามารถใช้งานได้

  • text-ignore-placement การกำหนดการมองเห็นข้อความ หากกำหนดค่าเป็น False จะทำการแสดงบาง Label เท่านั้น เพื่อป้องกันการแสดงผล Label ที่ซ้อนทับกัน และหากกำหนดค่าเป็น True จะแสดง Label ทั้งหมดตามจำนวนที่มี ซึ่งมีค่า Default เท่ากับ False

  • text-justify การจัดตัวอักษรในการวางบนบรรทัด ซึ่งมีทั้งหมด 4 รูปแบบได้แก่ auto, left, center, right

  • text-keep-upright กำหนดข้อความไม่ให้แสดงผลกลับทิศทาง ซึ่งมีค่าเริ่มต้นเป็น False ต้องมีการกำหนด text-field และ กำหนด text-rotation-alignment ให้อยู่ในรูปแบบ "map" , symbol-placement เป็น "line" หรือ "line-center"

  • text-letter-spacing ระยะห่างระหว่างตัวอักษรของข้อความ มีค่าเริ่มต้นเท่ากับ 0 em ซึ่งต้องกำหนด text-field จึงสามารถใช้งานได้

  • text-line-height กำหนดความสูงบรรทัดของข้อความ มีค่าเริ่มต้นเท่ากับ 1.2 em ซึ่งต้องกำหนด text-field จึงสามารถใช้งานได้

  • text-max-angle การกำหนดมุมของตัวอักษรในการแสดงผล มีค่าเริ่มต้นเป็น 45 องศา ซึ่งต้องกำหนด text-field จึงสามารถใช้งานได้ และต้องมีการกำหนด symbol-placement ให้เป็น "line" หรือ "line-center"

  • text-max-width กำหนดความกว้างของข้อความ ซึ่งมีค่าเริ่มต้นเท่ากับ 10 em ซึ่งต้องกำหนด text-field จึงสามารถใช้งานได้

  • text-offset การกำหนดระยะห่างจากจุดเริ่มต้น ซึ่งต้องทำกำหนดเป็นพิกัดค่า [x,y] มีค่าเริ่มต้นเท่ากับ [0,0] โดยค่าที่เป็นบวกจะกำหนดค่า ด้านขวาและด้านล่าง และหากค่าเป็นลบจะเป็นการกำหนด Offset ด้านซ้าย และด้านบน และต้องมีการกำหนด text-field จึงจะสามารถใช้งานได้

  • text-opacity การกำหนดความโปร่งแสงในการแสดงผลข้อความ มีค่าตั้งต้นเท่ากับ 1 และต้องมีการกำหนด text-field ก่อนจึงจะสามารถใช้งานได้

  • text-optional การกำหนดการแสดงผลข้อความ (Text) เมื่อมีข้อความแสดงผลซ้อนทับกัน ข้อความยังแสดงผลเมื่อกำหนดค่าเป็น True หากเป็น False Icon และข้อความจะมีการแสดงผลสัมพันธ์กัน ซึ่งต้องมีการกำหนด text-field ก่อน จึงจะสามารถใช้งานได้

  • text-padding การกำหนดช่องรอบข้อความ ซึ่งจะเป็นการกำหนดช่องว่างทั้ง 4 ด้าน คือ Buttom, Left, Top, Right มีค่าเริ่มต้นเท่ากับ 2 พิกเซล ซึ่งต้องมีการกำหนด text-field ก่อน จึงจะสามารถใช้งานได้

  • text-pitch-alignment รูปแบบการแสดงผลของข้อความ เมื่อทำการเปลี่ยนแปลงของมุมลาดเอียง (Pitch) จะเห็นความแตกต่างเมื่อทำการปรับมุมลาดเอียงไปมากกว่า 50 องศา ซึ่งมีค่าเริ่มต้นเป็น viewport โดยมี 3 รูปแบบคือ

    • map การมองเห็นจุดอยู่ในแนวระนาบเดียวกันกับแผนที่
    • viewport การมองเห็นจุดในแนวระนาบของมุมลาดเอียง
    • auto การกำหนดเป็น auto จะเป็นตามการกำหนด text-rotation-alignment

  • text-radial-offset การกำหนดรัศมีระยะห่างจากข้อความ โดยมีจุดศูนย์กลางเป็นตำแหน่งของ Label จะแสดงผลได้ดีเมื่อใช้งานร่วมกับ text-variable-anchor

  • text-rotate การหมุนองศาของข้อความ มีค่าเริ่มต้นเท่ากับ 0 องศา ซึ่งต้องมีการกำหนด text-field ก่อน จึงจะสามารถใช้งานได้

  • text-rotation-alignment การจัดวางแนวของข้อความตามการกำหนดการหมุนข้อความ โดยมี 4 รูปแบบคือ

    • map เมื่อ symbol-placement ถูกกำหนดเป็น point Label จะถูกจัดอยู่ในแนวตะวันออก - ตะวันตกของแผนที่ และเมื่อ symbol-placement ถูกกำหนดเป็น line หรือ line-center Label จะอยู่ในแนวแกน X ของเส้น
    • viewport การวางแนวของ Label จะอยู่ในแนวแกน X ซึ่งเป็นแนวเดียวกันกับการมองเห็น
    • viewport-glyph เมื่อ symbol-placement ถูกกำหนดเป็น point จะจัดแนว Label ตามแกน X เมื่อ symbol-placement ถูกกำหนดเป็น line หรือ line-center จะจัดแนว Label ตามแกน X ของการมองเห็น
    • auto หากกำหนดค่า symbol-placement เป็น point การแสดงผลจะเหมือนกันกับ viewport และหากกำหนดเป็น line หรือ line-center ซึ่งจะแสดงผบเหมือนกับ map

  • text-size การกำหนดขนาของตัวหนังสือ ซึ่งมีค่าเริ่มต้นเท่ากับ 16 พิกเซล

  • text-transform การกำหนดตัวอักษร ตัวพิมพ์เล็กตัวพิมพ์ใหญ่ ซึ่งมีทั้งหมด 3 รูปแบบคือ

  • none ตามรูปแบบข้อความที่ได้กำหนดมาเริ่มต้น

  • uppercase ตัวอักษรเป็นตัวพิมพ์ใหญ่ทั้งหมด

  • lowercase ตัวอักษรเป็นตัวพิมพ์เล็กทั้งหมด

  • text-translate การกำหนด offset ของ Label จากค่าพิกัดตั้งต้น เป็นค่า [x,y] ซึ่งมีหน่วยเป็นพิกเซล (Pixel) และมีค่าเริ่มต้นเท่า [0,0]

  • text-translate-anchor การแสดงผลของ Label ตามจุดยึดที่ได้กำหนดใน text-translate โดยต้องมีการกำหนด text-field และ text-translate ก่อนจึงจะสามารถใช้งานได้ ซึ่งมี 2 รูปแบบคือ

    • map แสดงตำแหน่งของ Labelตามมีความสัมพันธ์กับแผนที่
    • viewport แสดงตำแหน่งของ Label ตามมีความสัมพันธ์ของ viewport