Line

Line เป็นการแสดงผลของข้อมูลที่อยู่ในรูปแบบ Line หรือ Polyline collection features ซึ่งอยู่ในรูปแบบ line ในการตกแต่ง Style ของแผนที่ได้ ดังนี้

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

การแสดงผลข้อมูลเส้น (Line) ของข้อมูล Vector Tile

การแสดงผลข้อมูลเส้น (Line) ของข้อมูล Vector Tile เมื่อผู้ใช้งานนำข้อมูลที่เก็บไว้บน Vallaris Maps Platform และนำข้อมูลออกไปเป็น API Service เพื่อนำมาใช้ในการพัฒนาแผนที่เว็บไซต์ ผู้ใช้งานสามารถแสดงผลข้อมูลจุดด้วยข้อมูล JSON ได้ดังนี้

{
  "id": "layer",
  "type": "line",
  "source": "osm",
  "source-layer": "transportation",
  "paint": {
    "line-color": "rgba(222, 138, 138, 1)"
  }
}

จากตัวอย่าง JSON ข้างต้นอยู่ในส่วนของการ addLayer และการตกแต่ง Style ของ Layer ที่อยู่ในคีย์ paint id เป็นการกำหนด id ให้กับ Layer ที่ทำการเพิ่มเข้ามา type เป็นประเภทของ Layer ที่ต้องการเพิ่มเข้ามา source เป็นชื่อของข้อมูลที่นำมาใช้ในการแสดงผลที่ได้ทการ addSource เข้ามา paint ส่วนตกแต่งลักษณะรูปแบบในการแสดงผลข้อมูล เช่น สี, ความโปร่งแสง,ลักษณะของเส้น เป็นตัน

การแสดงผลข้อมูลเส้น (Line) ของข้อมูล Vector Tile​

การแสดงผลข้อมูลเส้น (Line) ของข้อมูล Vector Tile