Skip to main content

วงกลม

วงกลม (Circle) เป็นการแสดงผลของข้อมูลที่อยู่ในรูปแบบ Point หรือ Point collection features ซึ่งอยู่ในรูปแบบ circle ในการตกแต่ง Style ของแผนที่ได้ ดังนี้

  • circle-blur ค่าความเบลอของจุด ซึ่งจะทำการเบลอทั้งจุดยกเว้นจุดกึ่งกลางของจุดเท่านั้นที่ไม่เบลอ โดยมีค่าของการเบลอเริ่มต้น (Default) เท่ากับ 0

  • circle-color สีของจุด โดยมีค่าสีเริ่มต้น (Default) คือ #000000

  • circle-opacity ค่าความทึบของจุดที่จะแสดงผล โดยมีค่าเริ่มต้น (Default) คือ 1 เป็นค่าความทึบสูงสุดและมีความทึบต่ำสุดคือ 0

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

    • map การมองเห็นจุดอยู่ในแนวระนาบเดียวกันกับแผนที่
    • viewport การมองเห็นจุดในแนวระนาบของมุมลาดเอียง

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

    • map ขนาดของจุดสัมพันธ์กับแผนที่
    • viewport ขนาดของจุดสัมพันธ์กับการมองเห็น โดยจุดที่อยู่ในมุมมองใกล้จะมีขนาดใหญ่และจุดที่อยู่มุมมองระยะไกลจะมีขนาดเล็ก

  • circle-radius ขนาดความยาวรัศมีของจุดวงกลมในการแสดงผล มีหน่วยเป็นพิกเซลซึ่งมีค่าเริ่มต้น (Default) เท่ากับ 5

  • circle-sort-key เรียงลำดับ Feature จากน้อยไปหามากตามค่าที่กำหนด Feature ที่มีคีย์การเรียงลำดับที่สูงกว่าจะปรากฏเหนือ Feature ที่มีคีย์การเรียงลำดับที่ต่ำกว่า

  • circle-stroke-color สีขอบของจุด

  • circle-stroke-width ความกว้างของขอบจุด

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

  • circle-translate-anchor การแสดงผลมุม ของ Translate ซึ่งต้องทำการการตั้งค่า circle-translate ก่อน ซึ่งมี 2 รูปแบบคือ

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

การแสดงผลข้อมูลจุด (Point) ของข้อมูล Vector Tile​

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

{
  "id": "layer",
  "type": "circle",
  "source": "osm",
  "source-layer": "place",
  "paint": {
    "circle-color": "rgba(206, 54, 54, 1)"
  }
}

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