สัญลักษณ์
สัญลักษณ์ (Symbol) การแสดงข้อมูลบบนแผนที่ที่เป็นสัญลักษณ์ จะประกอบด้วยการตั้งค่า 3 ส่วนหลัก คือ
info
สามารถแสดง ไอคอน (Icon) และ ข้อความ (Text) พร้อมกันจากแหล่งข้อมูล เดียวกัน (One source data) เมื่อกำหนดประเภทการแสดงผลเป็นสัญลักษณ์ (Symbol) ซึ่งรองรับการแสดงผลทั้งไอคอนและข้อความในตำแหน่งเดียวกันบนแผนที่
ตารางการปรับแต่ง
ไอคอน (Icon)
| ชื่อ | Property | ค่าเริ่มต้น | คำอธิบาย |
|---|---|---|---|
| การซ้อนทับกัน | icon-allow-overlap | null | การแสดงการวางซ้อนของ Icon (true/false) ค่าเริ่มต้นคือ false (ต้องกำหนด icon-image ก่อน) |
| การวางตำแหน่งไอคอน | icon-anchor | center | มุมในการวาง Icon จากจุดพิกัด มี 8 รูปแบบ: center, left, right, top, bottom, top-left, top-right, bottom-left, bottom-right |
| ความเบลอ | icon-halo-blur | 0 | ระดับการเบลอของ Halo Icon (หน่วย: พิกเซล) ซึ่งต้องกำหนด icon-image |
| สีขอบ | icon-halo-color | rgb(0,0,0) | สีของ Halo Icon ใช้ได้กับ Icon sdf และต้องมี icon-image |
| ขนาดขอบไอคอน | icon-halo-width | 0 | ความกว้างของ Halo Iconต้องมี icon-image |
| ตำแหน่งคงที่ | icon-ignore-placement | false | กำหนดการแสดง Icon (true/false) |
| รูปไอคอน | icon-image | null | กำหนดรูปแบบ Icon หรือ เพิ่มรูปภาพไอคอนใหม่ |
| ปรับทิศทางให้ตั้งฉาก | icon-keep-upright | false | ป้องกัน Icon กลับด้าน ต้องตั้งค่า icon-image, icon-rotation-alignment: map, และ symbol-placement: line หรือ line-center |
| เลื่อนตำแหน่งไอคอน | icon-offset | [0,0] | เลื่อนตำแหน่งไอคอน หรือ ข้อความ ภายใน symbol นั้นๆ [x,y] (หน่วย: พิกเซล) ค่าเริ่มต้น ต้องมี icon-image |
| ความทึบ | icon-opacity | 1 | ความทึบแสงของ Icon (ค่าเริ่มต้น 1) ต้องมี icon-image |
| ไอคอนไม่บังคับ | icon-optional | false | กำหนดการแสดงข้อความ (Text) เมื่อมีไอคอนซ้อนทับ (true = ข้อความยังแสดง, false = ขึ้นกับ Icon) ต้องมี text-field |
| ระยะห่างรอบไอคอน | icon-padding | 2 | พื้นที่รอบไอคอน (หน่วย: พิกเซล, ค่าเริ่มต้น 2) ต้องมี icon-image |
| มุมมองการวาง | icon-pitch-alignment | auto | รูปแบบไอคอน เมื่อเปลี่ยน Pitch - map : อยู่ในแนวระนาบเดียวกับแผนที่- viewport : อยู่ในแนวระนาบของมุมลาดเอียง- auto : อ้างอิง icon-rotation-alignment |
| การหมุน,ปรับทิศ | icon-rotate | 0 | การหมุนไอคอน (หน่วย: องศา) |
| มุมมองการหมุน | icon-rotation-alignment | auto | การจัดวางแนวของไอคอน : - map : ถ้า symbol-placement เป็น point, Icon จะวางแนวตะวันออก-ตก- viewport : Icon วางแนวตามแกน X ของหน้าจอ- auto : point จะเหมือน viewport, line หรือ line-center จะเหมือน map |
| ขนาดไอคอน | icon-size | 1 | ขนาดของไอคอน ต้องมี icon-image |
| ปรับขนาดไอคอนตามข้อความ | icon-text-fit | ไม่มี | ปรับขนาดไอคอน ให้พอดีกับข้อความ มี 4 ค่า: - none : คงขนาดเดิม- width : ปรับตามความกว้างข้อความ- height : ปรับตามความสูงข้อความ- both : ปรับทั้งกว้างและสูง |
| พื้นที่รอบไอคอนเมื่อปรับขนาด | icon-text-fit-padding | [0,0,0,0] | กำหนดพื้นที่รอบ Icon และข้อความ (ลำดับ: บน, ขวา, ล่าง, ซ้าย) |
| เลื่อนตำแหน่งไอคอน | icon-translate | [0,0] | เลื่อนตำแหน่งไอคอนจากตำแหน่งพิกัดจริง [x,y] (หน่วย: พิกเซล) ค่าเริ่มต้น [0,0] |
| มุมการเลื่อนตำแหน่งไอคอน | icon-translate-anchor | แผนที่ | การแสดงผลของ icon-translate ต้องมี icon-image และ icon-translate- map : อ้างอิงตำแหน่ งบนแผนที่- viewport : อ้างอิงตำแหน่งตามหน้าจอ |
ข้อความ (Text)
| ชื่อ | Property | ค่าเริ่มต้น | คำอธิบาย |
|---|---|---|---|
| การซ้อนทับกัน | text-allow-overlap | false | กำหนดให้ข้อความสามารถซ้อนทับกันได้ |
| การวางตำแหน่งข้อความ | text-anchor | center | กำหนดจุดยึดของข้อความ มี 9 รูปแบบ: center, left, right, top, bottom, top-left, top-right, bottom-left, bottom-right |
| สีข้อความ | text-color | rgb(0,0,0) | กำหนดสีข้อความ ต้องกำหนด text-field ก่อน |
| ฟิลด์ | text-field | null | ระบุฟิลด์ที่อยู่ภายในฟิลด์ properties สำหรับแสดงข้อความ |
| ฟอนต์ | text-font | Kanit | กำหนดรูปแบบตัวอักษร สามารถเลือกหลายแบบ (จะใช้ตัวแรกที่รองรับ) |
| ความเบลอ | text-halo-blur | 0 | กำหนดค่าการเบลอของขอบข้อความ |
| สีขอบข้อความ | text-halo-color | rgb(0,0,0) | กำหนดสีขอบข้อความ |
| ขนาดขอบข้อความ | text-halo-width | 0 | กำหนดความกว้างของขอบข้อความ |
| ตำแหน่งคงที่ | text-ignore-placement | false | ควบคุมการแสดงข้อความ หาก false จะซ่อนบางข้อความเพื่อป้องกันการซ้อนทับ |
| ตำแหน่งข้อความ | text-justify | center | การจัดแนวข้อความในบรรทัด: auto, left, center, right |
| ปรับทิศทางให้ตั้งฉาก | text-keep-upright | flase | กำหนดให้ข้อความไม่กลับทิศ (ค่าเริ่มต้น false) ต้องกำหนด text-rotation-alignment: map และ symbol-placement: line หรือ line-center |
| ระยะห่างระหว่างตัวอักษร | text-letter-spacing | 0 | กำหนดระยะห่างระหว่างตัวอักษร (ค่าเริ่มต้น 0em) |
| ระยะห่างระหว่างบรรทัด | text-line-height | 1.2 | กำหนดควา มสูงของบรรทัด มีหน่วยเป็น em |
| มุมสูงสุดทิศทางของข้อความ | text-max-angle | 45 | กำหนดมุมของข้อความเมื่อวางตามเส้น (ค่าเริ่มต้น 45°) ใช้ได้กับ symbol-placement: line หรือ line-center |
| ความกว้าวสูงสุดของข้อความ | text-max-width | 10 | กำหนดความกว้างสูงสุดของข้อความ (ค่าเริ่มต้น 10em) |
| เลื่อนตำแหน่งข้อความ | text-offset | [0,0] | กำหนดระยะห่างของข้อความ [x, y] |
| ความโปร่งใสของข้อความ | text-opacity | 1 | กำหนดค่าความโปร่งแสงของข้อความ (ค่าเริ่มต้น 1) |
| ข้อความไม่บังคับ | text-optional | false | กำหนดให้แสดงข้อความแม้มีการซ้อนทับกัน |
| ระยะห่างรอบข้อความ | text-padding | 2 | กำหนดช่องว่างรอบข้อความ (ค่าเริ่มต้น 2px) |
| มุมการมอง | text-pitch-alignment | auto | กำหนดการปรับแนวข้อความเมื่อเปลี่ยนมุมมอง (viewport, map, auto) |
| เลื่อนตำแหน่งข้อความตามรัศมี | text-radial-offset | 0 | กำหนดระยะห่างของข้อความจากจุดศูนย์กลาง |
| การหมุน, การปรับทิศ | text-rotate | 0 | หมุนข้อความเป็นองศา (ค่าเริ่มต้น 0°) |
| มุมมองการหมุน | text-rotation-alignment | auto | กำหนดแนวของข้อความ (map, viewport, viewport-glyph, auto) |
| ขนาดข้อความ | text-size | 16 | กำหนดขนาดของตัวอักษร (ค่าเริ่มต้น 16px) |
| รูปแบบข้อความ | text-transform | ไม่มี | กำหนดตัวอักษรเป็น none, uppercase, lowercase |
| เลื่อนตำแหน่งข้อความ | text-translate | [0,0] | กำหนดการเลื่อนตำแหน่งของข้อความ [x, y] |
| มุมการเลื่อนตำแหน่งข้อความ | text-translate-anchor | แผนที่ | กำหนดตำแหน่งข้อความสัมพันธ์กับ mapหรือ viewport - map : ระนาบไปกับแผนที่ - viewport : ตามมุมมองแผนท ี่ |
สัญลักษณ์ (Symbol)
| ชื่อ | Property | ค่าเริ่มต้น | คำอธิบาย |
|---|---|---|---|
| หลีกเลี่ยงขอบ | symbol-avoid-edges | false | กำหนดค่าหลีกเลี่ยงการชนกันของสัญลักษณ์ (Symbol) |
| ตำแหน่งสัญลักษณ์ | symbol-placement | point | การกำหนดการแสดงผลของ Symbol มี 3 รูปแบบ: - point : วาง Symbol ตรงกับพิกัดที่กำหนด- line : วาง Symbol ตามแนวเส้นหรือพื้นที่รูปปิด- line-center : วาง Symbol ที่กึ่งกลางของเส้นหรือพื้นที่รูปปิด |
| เรียงลำดับคีย์ | symbol-sort-key | 0 | เรียงลำดับ Symbol ตามค่าที่กำหนด ค่า Symbol ที่สูงกว่าจะอยู่เหนือกว่าค่าต่ำกว่า |
| ช่องว่างระหว่างสัญลักษณ์ | symbol-spacing | 250 | ช่องว่างระหว่าง Symbol (ค่าเริ่มต้น 250px) ใช้ได้เมื่อ symbol-placement เป็น line |
| ลำดับการแสดงผล | symbol-z-order | auto | กำหนดการแสดงผลของ Symbol ที่ซ้อนกันใน Layer เดียวกัน มี 3 ค่า:
|