ชั้นข้อมูลเวกเตอร์

ข้อมูลเวกเตอร์ และข้อมูลเวกเตอร์ไทล์ ในการปรับแต่งลักษณะชั้นข้อมูล (Layer) สามารถแสดงผลได้หลายรูปแบบ ตามประเภทของชั้นข้อมูล (Layer) circle , line ,fill , fill-extrusion , heatmap ซึ่งสามารถแบ่งออกเป็น 2 ส่วนหลัก การปรับแต่งรูปแบบพื้นฐาน (Basic) และขั้นสูง (Advance)

ปรับแต่งพื้นฐาน (Basic)

ปรับแต่งด้วยเครื่องมือบนระบบ

ปรับแต่งขั้นสูง (Advance)

กำหนดค่าการแสดงผลเอง (Custom)

ประเภทชั้นข้อมูล (Layer type)

ประเภทชั้นข้อมูล	คำอธิบาย
จุด (Circle)	สำหรับการแสดงข้อมูลที่เป็นจุด เช่น ที่ตั้งของสถานที่หรือเหตุการณ์บนแผนที่ โดยสามารถปรับขนาด สี และความโปร่งใสของจุดได้
สัญลักษณ์ (Symbol)	สำหรับการแสดงข้อมูลที่เป็นเส้น เช่น เส้นทางถนน ทางเดิน หรือเส้นทางคมนาคม โดยสามารถปรับความหนา สี และรูปแบบของเส้นได้
เส้น (Line)	สำหรับการแสดงข้อมูลที่เป็นเส้น เช่น เส้นทางถนน ทางเดิน หรือเส้นทางคมนาคม โดยสามารถปรับความหนา สี และรูปแบบของเส้นได้
พื้นที่ (Fill)	สำหรับการแสดงพื้นที่ เช่น เขตการปกครอง พื้นที่ป่า หรือแหล่งน้ำ โดยสามารถปรับสีขอบเขตและความโปร่งใสได้
พื้นที่ที่สามารถยกความสูงได้ (Fill Extrusion)	สำหรับใช้แสดงพื้นที่ในรูปแบบ 2.5 มิติ โดยสามารถยกความสูงของพื้นที่ตามค่าจากข้อมูลคุณลักษณะ (Attribute data) ที่เป็นตัวเลข เช่น ความสูงของอาคารหรือระดับความสำคัญของพื้นที่
แผนที่ความร้อน (Heatmap)	สำหรับใช้แสดงความหนาแน่นของข้อมูลในรูปแบบสี เช่น ความหนาแน่นของประชากร จุดเกิดเหตุ หรือความถี่ของเหตุการณ์ในพื้นที่

ปรับแต่งพื้นฐาน (Basic)

ผู้ใช้สามารถตั้งค่าการแสดงผลและรูปแบบข้อมูลได้ง่ายๆ ผ่านหน้าจอการใช้งาน (UI) เพื่อให้เหมาะกับข้อมูลที่ต้องการแสดงผล

การปรับแต่ง	คำอธิบาย
ค่าคงที่	การกำหนดค่าการแสดงผลเป็นค่าคงที่ คือ ค่าการแสดงผลจะเป็นไปตามค่าที่ระบุหรือกำหนดไว้
กำหนดการแสดงผลจากข้อมูล	การแสดงผลตามข้อมูล คือ ลักษณะการแสดงผลบนแผนที่จะเปลี่ยนไปตามข้อมูลที่กำหนดไว้ โดยผู้ใช้ สามารถใช้ค่าข้อมูลของฟิลด์ ที่อยู่ภายในฟิลด์ properties - กำหนดด้วยฟังก์ชัน match เป็นการเปรียบเทียบค่าจาก property แล้วเลือกผลลัพธ์จากแต่ละกรณีที่ "ตรงกัน" - ใช้กับข้อมูลประเภทตัวอักษร (String)
กำหนดการแสดงผลตามช่วงข้อมูล	การแสดงผลตามช่วงข้อมูลที่กำหนด เหมาะสำหรับการแสดงข้อมูลที่เป็นค่าต่อเนื่อง เช่น ขนาด สี ความโปร่งแสง เป็นต้น - กำหนดด้วยฟังก์ชัน interpolate - ใช้กับข้อมูลประเภทตัวเลข (Number) - เปลี่ยนแปลงลักษณะการแสดงผลข้อมูล ตามช่วงค่าที่กำหนด โดยลักษณะการแสดงผลในแต่ละช่วงค่า เป็นไปตามทฤษฎีกราฟแต่ละรูปแบบ linear exponential cubic-bezier step
กำหนดการแสดงผลตามระดับซูม	การเปลี่ยนลักษณะการแสดงผล ตามระดับการซูมที่กำหนด - กำหนดด้วยฟังก์ชัน interpolate - เปลี่ยนแปลงลักษณะการแสดงผลข้อมูล ตามระดับการซูมที่กำหนด (Zoom level) และเป็นไปตามทฤษฎีกราฟแต่ละรูปแบบ linear exponential cubic-bezier step

ปรับแต่งขั้นสูง (Advance)

ผู้ใช้งานสามารถสามารถปรับแต่งการแสดงผลชั้นข้อมูลรูปแบบขั้นสูง (Advance) โดยสามารถระบุค่าการแสดงผลแผนที่ แบบกำหนดเอง (Custom) เพื่อควบคุมลักษณะการแสดงผลชั้นข้อมูลได้อย่างยืดหยุ่น เช่น สี ขนาด ความโปร่งใส และอื่นๆ ตามโครงสร้างของ Maplibre Style Specification

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

แบบทั่วไป (General)

กำหนดค่าการแสดงผลโดยตรงตามที่ระบุไว้

แสดงผลตามค่าข้อมูล (Value)

แสดงผลตามเงื่อนไขที่ระบุไว้แบบ ตรงตัว และแบบไล่ระดับ

แสดงผลตามระดับซูม

เปลี่ยนแปลงลักษณะการแสดงผลตามระดับซูม

แสดงผลตามเงื่อนไข ฟังก์ชัน

กำหนดลักษณะแสดงด้วยเงื่อนไขการเปรียบเทียบและคำนวณ

แบบทั่วไป

การกำหนดค่าการแสดงผลโดยตรงตามที่ระบุไว้ โดยไม่ผ่านเงื่อนไขหรือการประมวลผลเพิ่มเติม ซึ่งสามารถดำเนินการได้กับทุกประเภทชั้นข้อมูล (Layer Type) การกำหนดแบบทั่วไป จะมีโครงสร้างที่ไม่ซับซ้อน สามารถระบุตามค่าข้อมูลที่ต้องแบบตรงไปตรงมา ตามประเภทข้อมูลที่ต้องการ เช่น ตัวเลข (Number), ตัวหนังสือ (String), ค่าสี และอื่นๆ เป็นต้น

"value"

รูปแบบค่าสีที่รองรับ

• Color name: ชื่อของสีโดยตรง เช่น red,blue,green
• HEX name: การกำหนดค่าสีด้วยเลขฐานสิบหก เช่น #FF0000 หมายถึงสีแดง
• RGB name: การกำหนดสีด้วยค่าสีในช่วง 0-255 เช่น rgb(255, 0, 0)
• RGBA name: การกำหนดสีด้วยค่าสีในช่วง 0-255 และค่า alpha หรือค่าความโปร่งแสง โดยมีค่า 0-1

การแสดงผลตามค่าข้อมูล (Value)

การนำข้อมูลคุณลักษณะ (Attibutes data) ที่อยู่ภายในฟิลด์ properties เพื่อใช้กำหนดเงื่อนไขสำหรับแสดงผลข้อมูลบนแผนที่ ซึ่งเหมาะสำหรับค่าข้อมูลประเภท ตัวหนังสือ (String) และตัวเลข (Number) โดยลักษณะแสดงผลจะเปลี่ยนไปตามข้อมูล

แสดงผลตามค่าข้อมูล (Data Expression)

การแสดงผลตามค่าข้อมูล (Value) เป็นการเรียกใช้ฟังก์ชัน match เหมาะสำหรับเปรียบเทียบค่าจาก ฟิลด์ข้อมูลเพียงหนึ่งฟิลด์ กับเงื่อนไขที่ระบุไว้แบบ ตรงตัว เหมาะสำหรับข้อมูลประเภท ข้อความ (String) ที่มีการจัดหมวดหมู่ เช่น ชื่อจังหวัด ประเภท หรือสถานะต่าง ๆ

warning

เมื่อมีการเรียกใช้ฟิลด์ (Field) ที่มีค่าข้อมูลประเภทตัวเลข (Number) ให้ทำการแก้ไข โดยลบเครื่องหมาย Double Straight Quote (") ที่แท็บขั้นสูง (Advance) เพื่อเปลี่ยนประเภทข้อมูลจากข้อความ (String) เป็นตัวเลข (Number) เช่น "19" เป็น 19

Data Expression

[
  "match",
  [
    "get",
    "field"
  ],
  ["value1"],"output1",
  ["value2"],"output2",
  ...
  "defaultOutput"
]

แสดงผลตามช่วงค่าข้อมูล (Data Expression Range)

การแสดงผลตามช่วงค่าข้อมูล (Value Range) เป็นการใช้ฟังก์ชัน interpolate ซึ่งจะแสดงผลข้อมูลในลักษณะการไล่ระดับตามช่วงค่าที่กำหนด และมีการเปลี่ยนแปลงแบบค่อยเป็นค่อยไป

Expression	ประเภทค่าข้อมูล	เหมาะสำหรับ
interpolate	จำนวนเต็ม, ทศนิยม	การแสดงผลตามช่วงค่า
match	ค่าคงที่	เปรียบเทียบค่าที่ตรงตัว
case	ตรรกะ (Boolean)	เงื่อนไข ตรรกะซับซ้อน

linear

 [
  "interpolate",
  ["linear"],
  ["get", "property"],
    value1 , output1,
    value2,  output2
    ...
]

step

[
  "step",
    ["get","property"],
    "defaultOutput"
      stopInput1, output1,
      stopInput2, output2,
      ...
]

exponential

[
  "interpolate",
  [
    "exponential", 1 //base is between 0-2
  ],
  ["get", "properties"],
     input1, output1,
     input2, output2,
     ...
   "defaultOutput"
]

cubic-bezier

[
  "interpolate",
  [
    "cubic-bezier",
    1, //x1 max is 1 min is 0
    1, //x2
    1, //y1
    1  //y2
  ],
  [ 
    "get","properties"],
     input1, output1,
     input2, output2,
     ...
    "defaultOutput"
]

ลักษณะการแสดงผลแบบช่วงค่าข้อมูล

รูปแบบ	ลักษณะการเปลี่ยน
linear	เปลี่ยนอย่างสม่ำเสมอ
exponential	ช่วงต้นหรือปลายชัดเจน
cubic-bezier	ปรับความรู้สึกของการเปลี่ยน
step	เปลี่ยนทันทีตามช่วง

การแสดงตามระดับการซูม

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

zoom

[
  "interpolate",
  ["linear" ],
  [ "zoom" ],
  zoomlevel1,  // Zoom level
  "output1",
  zoomlevel2, // Zoom level
  "output2"
  ...
]

การแสดงผลตาม เงื่อนไข ฟังก์ชัน

การกำหนดเงื่อนไข โดยใช้ข้อมูลภายในฟิลด์ properties ซึ่งเป็นการเรียกใช้ฟังก์ชัน case คล้ายกับการเขียนเงื่อนไขในฟังก์ชัน if/else เพื่อเปรียบเทียบและคำนวณ สำหรับกำหนดลักษณะการแสดงผลข้อมูล

case

["case",
  condition1, output1,
  condition2, output2,
  ...,
  defaultOutput
]

ตารางการปรับแต่ง

จุด (Circle)

ชื่อ	Property	ค่าเริ่มต้น	คำอธิบาย
ความเบลอ	circle-blur	0	ค่าความเบลอของจุด ซึ่งจะทำการเบลอทั้งจุดยกเว้นจุดกึ่งกลางของจุดเท่านั้นที่ไม่เบลอ
สี	circle-color	#000000	สีของจุด
ความทึบ	circle-opacity	1	ค่าความทึบของจุด - ค่าสูงสุด (ทึบสุด) : 1 - ค่าต่ำสุด(โปร่งใสสุด) : 0
มุมมองการวางจุด	circle-pitch-alignment	viewport	รูปแบบการแสดงผลของจุดเมื่อเปลี่ยนมุมลาดเอียง (Pitch) - map : จุดอยู่ในแนวระนาบเดียวกับแผนที่ - viewport : จุดอยู่ในแนวระนาบของมุมลาดเอียง
มุมมองขนาดจุด	circle-pitch-scale	viewport	ขนาดของจุดเมื่อเปลี่ยนมุมลาดเอียง (Pitch) - map : ขนาดสัมพันธ์กับแผนที่ - viewport : ขนาดสัมพันธ์กับมุมมอง (ใกล้ = ใหญ่, ไกล = เล็ก)
รัศมี	circle-radius	5	ขนาดรัศมีของจุด (หน่วย: พิกเซล)
เรียงลำดับคีย์	circle-sort-key	0	การเรียงลำดับการวาดของจุดวงกลมภายในชั้นข้อมูลเดียวกัน โดยค่าต่ำอยู่ล่าง ค่าสูงอยู่บนค่าที่สูงกว่าจะอยู่เหนือค่าที่ต่ำกว่า
สีเส้นขอบ	circle-stroke-color	#FFFFFF	สีขอบของจุด
ความทึบเส้นขอบ	circle-stroke-opacity	1	ความทึบของเส้นขอบจุด - ค่าสูงสุด (ทึบสุด) : 1 - ค่าต่ำสุด(โปร่งใสสุด) : 0
ความหนาเส้นขอบ	circle-stroke-width	1	ความกว้างของขอบจุด
เลื่อนตำแหน่งจุด	circle-translate	[0,0]	กำหนดค่า offset ของจุดจากพิกัดตั้งต้น [x,y] (หน่วย: พิกเซล)
มุมการเลื่อนตำแหน่งจุด	circle-translate-anchor	map	มุมมองของ circle-translate (ต้องตั้งค่า circle-translate ก่อน) - map : ตำแหน่งสัมพันธ์กับแผนที่ - viewport : ตำแหน่งสัมพันธ์กับการมองเห็น

เส้น (Line)

ชื่อ	Property	ค่าเริ่มต้น	คำอธิบาย
ความเบลอ	line-blur	0	ระดับการเบลอของเส้น (หน่วย: พิกเซล)
รูปแบบปลายเส้น	line-cap	butt	รูปลักษณะปลายของเส้น มี 3 รูปแบบ: butt, round, square
สี	line-color	#B2C756	สีของเส้น
เส้นประ	line-dasharray	1	ระยะความยาวของเส้นประและช่องว่าง ความยาวของเส้นจะปรับตามขนาดความกว้างของเส้น (ใช้ร่วมกับ line-pattern ไม่ได้)
ระยะห่างเส้นขอบ	line-gap-width	0	ความกว้างในการสร้างช่องว่างภายในเส้น (Gap)
ลักษณะจุดชื่อมต่อเส้น	line-join	miter	รูปลักษณะของปลายเส้นที่เชื่อมต่อกัน มี 3 แบบ: bevel, round, miter
ค่ามุมเส้นเชื่อม	line-miter-limit	2	การปรับค่าความโค้งมนของเส้นเชื่อมต่อกัน ต้องเลือก line-join เป็น miter
เลื่อนตำแหน่งจุด	line-offset	0	การกำหนดระยะห่างของเส้น (หน่วย: พิกเซล) - ค่าลบ: Offset ไปทางซ้าย - ค่าบวก: Offset ไปทางขวา
ความทึบ	line-opacity	0	ความทึบแสงของเส้น
ลวดลาย	line-pattern	null	รูปแบบของเส้นโดยใช้ Sprite หรือรูปภาพ (สามารถเพิ่มรูปภาพบน Vallaris ได้)
ความมนปลายเส้น	line-round-limit	1.05	การปรับค่าความโค้งมนของเส้นที่เชื่อมต่อกัน ต้องเลือก line-join เป็น round
เรียงลำดับคีย์	line-sort-key	0	เรียงลำดับ Feature จากน้อยไปหามาก Feature ที่มีคีย์สูงกว่าจะอยู่เหนือคีย์ต่ำกว่า
เลื่อนตำแหน่งจุด	line-translate	[0,0]	Offset ของเส้นจากพิกัดตั้งต้น [x,y] (หน่วย: พิกเซล)
มุมการเลื่อนตำแหน่งจุด	line-translate-anchor	map	การแสดงผลมุมของ line-translate (ต้องตั้งค่า line-translate ก่อน)
ความกว้าง	line-width	1	ขนาดความกว้างของเส้น โดยมีค่าต่ำสุดเท่ากับ 1

พื้นที่ (Fill)

ชื่อ	Property	ค่าเริ่มต้น	คำอธิบาย
ลดความคมชัดเส้นขอบ	fill-antialias	true	ความคมชัดของพื้นที่รูปปิด โดยมีประเภทเป็น Boolean มีค่าที่สามารถเลือกได้คือ true และ false
สี	fill-color	rgb(178,199,86)	การเติมสีของพื้นที่รูปปิด (Polygon) ซึ่งเป็นรูปแบบสีแบบ rgb นอกจากนี้สามารถรองรับรูปแบบ rgba เพื่อกำหนดความทึบของสี (Opacity) และเมื่อใช้ fill-pattern จะไม่สามารถแสดงสีได้
ความทึบ	fill-opacity	0.5	ความทึบแสงของ Feature โดยค่าในการกำหนดความทึบแสงเป็นตัวเลข ซึ่งในการกำหนดค่ามีผลต่อการแสดงเส้นขอบของ Polygon ด้วย
สีเส้นขอบ	fill-outline-color	#000000	สีของเส้นขอบ โดยในการกำหนดสีของเส้นขอบจำเป็นต้องกำหนด fill-antialias ให้เป็น true จึงสามารถกำหนดสีขอบได้
ลวดลาย	fill-pattern	null	การกำหนดรูปภาพให้แสดงบนพื้นที่ Polygon เรียกว่า Sprite ซึ่งบน Vallaris สามารถเพิ่มรูปภาพขึ้นไปเพื่อใช้เป็น Sprite ได้
เรียงลำดับคีย์	fill-sort-key	0	เป็นการเรียงลำดับ Feature จากน้อยไปหามากตามค่าที่กำหนด Feature ที่มีคีย์การเรียงลำดับที่สูงกว่าจะปรากฏเหนือ Feature ที่มีคีย์การเรียงลำดับที่ต่ำกว่า
เลื่อนตำแหน่จุด	fill-translate	[0,0]	การกำหนดค่า offset ของจุดจากค่าพิกัดตั้งต้น เป็นค่า [x, y] ซึ่งมีหน่วยเป็นพิกเซล (Pixel)
มุมการเลื่อนตำแหน่งจุด	fill-translate-anchor	map	การแสดงผลมุมของ Translate ซึ่งต้องทำการตั้งค่า fill-translate ก่อน

พื้นที่ที่สามารถยกความสูงได้ (Fill Extrusion)

ชื่อ	Property	ค่าเริ่มต้น	คำอธิบาย
ฐาน	fill-extrusion-base	0	ความสูงจากพื้นดินของ Feature มีหน่วยเป็นเมตร โดยค่าข้อมูลที่นำมาใช้กับ base เป็นประเภทตัวเลข (Number)
สี	fill-extrusion-color	#b2c756	สีของ Feature โดยสามารถกำหนดรูปแบบของสีทั้งในรูปแบบ rgb และ rgba
ความสูง	fill-extrusion-height	0	ความสูงของ Feature มีหน่วยเป็นเมตร สามารถนำมาใช้ในการสร้าง Feature ให้อยู่ในรูปแบบ 3 มิติได้
ความทึบ	fill-extrusion-opacity	0.5	ความทึบแสงของ Feature
ลวดลาย	fill-extrusion-pattern	null	รูปแบบ หรือ Sprite ที่ใช้ในการตกแต่งแผนที่ โดยความกว้างและความยาวของแผนที่มีผลต่อการแสดงผล และปรับสเกลตามระดับการซูมแผนที่
มุมการเลื่อนตำแหน่งจุด	fill-extrusion-translate-anchor	map	รูปแบบการแสดงผลของ Feature ซึ่งมี 2 รูปแบบคือ map และ viewport

แผนที่ความร้อน (Heatmap)

ชื่อ	Property	ค่าเริ่มต้น	คำอธิบาย
รัศมี	heatmap-radius	30	รัศมีการกระจายอิทธิพลของจุดข้อมูลแต่ละจุด มีหน่วยเป็นพิกเซล และมักปรับตามระดับการซูม
น้ำหนัก	heatmap-weight	1	น้ำหนักของแต่ละจุดข้อมูล กับความหนาแน่นของข้อมูล โดยมักใช้ค่าจากคุณลักษณะ (Attribute) ของ Feature เช่น ความแรงของเหตุการณ์
ความเข้ม	heatmap-intensity	1	ความเข้มของแผนที่ความร้อนโดยรวม สามารถปรับตามระดับการซูมได้
สี	heatmap-color	royalblue,cyan, lime, yellow, red	ช่วงสีของจุดที่ความร้อน ซึ่งต้องกำหนดมากว่า 1 สี เพื่อไล่ระดับสีตามความหนาแน่นของข้อมูล heatmap-density
ความทึบ	heatmap-opacity	1	ความโปร่งใสของชั้น Heatmap สามารถใช้ทำ fade in/out ตามระดับซูม