leaflet.js 設定 geoJson 樣式與綁定互動事件

分享:

上一篇提到利用 leaflet.js 繪製 GeoJSON 的方法,接著來看該如何修改樣式以及增加互動事件。

修改樣式

修改樣式的話可以直接修改 CSS,leaflet GeoJSON 的樣式是設定在 leaflet-interactive 的 class 上,又由於其是使用 SVG,所以要修改樣式可以參考如下:

path.leaflet-interactive {
    stroke-width: 1;
    stroke: #7a62a8;
    fill: #7a62a8;
    fill-opacity: .5;
}
path.leaflet-interactive:hover {
    stroke: #b8d32f;
    fill: #b8d32f; 
}

這樣就可以修改區塊的顏色了。

 

綁定互動事件

如果要綁定更複雜的互動事件,可以在繪製時把事件綁上去,參考以下的程式碼:

//data 為 GeoJSON 資料
var layer = new L.GeoJSON(data, {
  onEachFeature: function (feature, layer) {
    layer.on('mouseover', function () {

    });
    layer.on('mouseout', function () {

    });
    layer.on('click', function () {
      //click event
    });
  }
}).addTo(map);

這樣就能偵測事件並給予各自的行為了。

 

參考:
how to dynamically change the color of a geojson polygon in leaflet
Mouseover actions with geojson polygon

 

課程推薦

和我們交流

加入我們的社群,裡面會有一些技術的內容、有趣的技術梗,以及職缺的分享,歡迎和我們一起討論。