在Leaflet頂部添加遮罩覆蓋v0.8-dev

Question

我正在嘗試使用Leaflet 0.8創建一個圓形遮罩覆蓋，位於用戶當前位置，延伸半徑爲1000米。從根本上讓周圍的地圖用戶可見（如圓），並呈灰色超越千米

樣機：

當用戶在輸入/輸出在地圖上，圓放大應相應調整。

我嘗試使用leaflet-maskcanvas，對於單張一個插件，看起來像它會做正是我需要的，不幸的是在單張0.8開發完成了所有的重構，這個插件不兼容。

有沒有人能用Leaflet 0.8成功實現這種效果？

Answer 1

我在想這樣做的方法是使用Turf.js拍攝地圖的當前中心點（map.getCenter()），用草皮緩衝1000米，取得該結果，然後抓取地圖視口的當前邊界（map.getBounds()），並在其上使用草坪erase。然後在地圖上繪製生成的多邊形（這是區別），然後在任何移動事件上更新它。

http://turfjs.org/static/docs/module-turf_buffer.html http://turfjs.org/static/docs/module-turf_intersect.html http://turfjs.org/static/docs/module-turf_erase.html