ข้อมูลจุดวงกลม

จุดวงกลม (Circle) คือ ประเภทของชั้นข้อมูล (Layer) ที่เหมาะสำหรับแสดงผลข้อมูลเชิงพื้นที่ประเภทจุด (Point)

ข้อมูลจุดที่เป็น Vector Tiles

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

{
  "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 ส่วนตกแต่งลักษณะรูปแบบในการแสดงผลข้อมูล เช่น สี, ความโปร่งแสง, ขนาดของจุด เป็นต้น

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

จุด (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 : ตำแหน่งสัมพันธ์กับการมองเห็น