Leaflet Event Map Style
การแสดงผลแผนที่บนเว็บไซต์ด้วย leaflet นั้นหลายๆคนคงรู้จักกันแล้ว วันนี้จะมาแนะนำเกี่ยวกับการปรับเปลี่ยนสไตล์การแสดงผลแผนที่เมื่อเกิด Event ต่างๆขึ้นมา
เราจะข้ามในส่วนของการสร้างเว็บแล้วก็การเรียกใช้งาน leaflet ไปเลยนะครับโดยในขั้นตอนที่ 1 ทำการเพิ่มเลเยอร์เข้าสู่แผนที่ของเรานะครับ ในตัวอย่างผมจะเพิ่มเลเยอร์ด้วยคำสั่ง L.geoJSON
# point เป็นข้อมูลที่เก็บในรูปแบบ GeoJSON
let points = L.geoJSON(point)
point.addTo(map)จากคำสั่งด้านบนเราก็จะได้เลเยอร์ขึ้นมาบนแผนที่ โดยปกติถ้าเป็นข้อมูลประเภทจุด ถ้าหากไม่ได้กำหนดสไตล์เข้าไปด้วย จะมีการแสดงผลในรูปแบบของหมุดแต่ในตัวอย่างต่อไปเราจะทำการกำหนดสไตล์ด้วยคำสั่งต่อไปนี้
var style = {
radius: 5,
fillColor: "#d91d0f",
color: "#000",
weight: 1,
opacity: 1,
fillOpacity: 0.8,
};
let points = L.geoJSON(point, {
pointToLayer: function (feature, latlng) {
return L.circleMarker(latlng, geojsonMarkerOptions);
}
}).addTo(map)จะได้ผลลัพธ์ดังนี้
เมื่อเราได้เลเยอร์แล้วต่อไปเราจะทำการเปลี่ยนสไตล์ของเลเยอร์เมื่อมีการเกิดอีเวนต์ขึ้น โดยขั้นแรกต้องกำหนดสไตล์ 2 ขึ้นมา
var style = {
radius: 5,
fillColor: "#d91d0f",
color: "#000",
weight: 1,
opacity: 1,
fillOpacity: 0.8,
};
var Style2 = {
radius: 9,
fillColor: "green",
color: "#000",
weight: 1,
opacity: 1,
fillOpacity: 0.8,
};หลังจากนั้นดักจับอีเวนต์ที่เกิดจากเลเยอร์ด้วยคำสั่ง
let points = L.geoJSON(point, {
pointToLayer: function (feature, latlng) {
return L.circleMarker(latlng, geojsonMarkerOptions);
},
onEachFeature: (feature, layer)=> {
layer.on('mouseover', (e) => {
e.target.setStyle(Style2);
});
layer.on('mouseout', (e) => {
e.target.setStyle(style);
});
}
}).addTo(map)เมื่อมีการเอาเม้าส์วางบนจุดก็จะมีการเปลี่ยนสไตล์ของจุด ดังภาพ
สามารถเลือกใช้อีเวนต์อื่นๆในการเปลี่ยนสไตล์ได้ด้วย เช่นกัน ศึกษาเพิ่มเติมได้ที่
