การใช้ Vector ใน LeafletJS

Vector ใน LeafletJS คือข้อมูลภูมิศาสตร์ที่แสดงเป็นจุด เส้น หรือพื้นที่ สามารถใช้แสดงข้อมูลต่างๆ เช่น ขอบเขตของเขตแดน เส้นทางการจราจร หรือขอบเขตของพื้นที่คุ้มครอง

To add a vector layer to a Leaflet map, you can use the following steps:

  1. Create a new vector layer object using the L.geoJSON() function.
  2. Pass the geoJSON data to the L.geoJSON() function.
  3. Add the vector layer object to the map using the map.addLayer() function.

For example, the following code adds a vector layer to the map that displays the borders of the United States:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
var geojson = {
"type": "FeatureCollection",
"features": [
{
"type": "Feature",
"properties": {},
"geometry": {
"type": "Polygon",
"coordinates": [
[
[-124.733111, 25.206389],
[-124.733111, 49.277778],
[-66.944444, 49.277778],
[-66.944444, 25.206389],
[-124.733111, 25.206389]
]
]
}
}
]
};

var vectorLayer = L.geoJSON(geojson);
map.addLayer(vectorLayer);

You can also customize the vector layer by passing an options object to the L.geoJSON() function. For example, the following code adds a vector layer with a custom color:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
var geojson = {
"type": "FeatureCollection",
"features": [
{
"type": "Feature",
"properties": {},
"geometry": {
"type": "Polygon",
"coordinates": [
[
[-124.733111, 25.206389],
[-124.733111, 49.277778],
[-66.944444, 49.277778],
[-66.944444, 25.206389],
[-124.733111, 25.206389]
]
]
}
}
]
};

var vectorLayer = L.geoJSON(geojson, {
color: 'red'
});
map.addLayer(vectorLayer);

Vector layers are a powerful tool for displaying spatial data on Leaflet maps. By using vector layers, you can create maps that show the boundaries of regions, the routes of transportation systems, or the extent of protected areas.

Here are some examples of how vector layers can be used in Leaflet maps:

  • A map of the United States with a vector layer showing the borders of each state.
  • A map of a city with a vector layer showing the routes of public transportation.
  • A map of a national park with a vector layer showing the boundaries of the park.
  • A map of a disaster area with a vector layer showing the extent of the damage.

Vector layers are a versatile tool that can be used to create a wide variety of Leaflet maps. By learning how to use vector layers, you can create maps that are informative, engaging, and useful.

ต่อไปนี้เป็นฟังก์ชัน Vector ที่สำคัญใน LeafletJS:

  • L.geoJSON(): สร้างเลเยอร์ Vector จากข้อมูล geoJSON
  • L.polyline(): สร้างเลเยอร์ Vector เส้น
  • L.polygon(): สร้างเลเยอร์ Vector พื้นที่
  • L.circle(): สร้างเลเยอร์ Vector วงกลม
  • L.rectangle(): สร้างเลเยอร์ Vector สี่เหลี่ยมผืนผ้า
  • L.ellipse(): สร้างเลเยอร์ Vector วงรี
  • L.path(): สร้างเลเยอร์ Vector จากเส้นทาง
  • L.svg(): สร้างเลเยอร์ Vector จาก SVG

คุณสามารถเรียนรู้เพิ่มเติมเกี่ยวกับการใช้ Vector ใน LeafletJS ได้จากเอกสารประกอบของ LeafletJS หรือจากตัวอย่างการใช้งาน