在Leaflet v0.8-dev上添加Mask Overlay

Question

我尝试使用Leaflet 0.8创建一个圆形蒙版覆盖，它位于用户当前位置，延伸半径为1000米。基本上使地图在用户周围可见（作为圆圈），并且灰色超出1000米

样机：

当用户放大/缩小地图时，圆圈应相应调整大小。

我尝试使用 leaflet-maskcanvas ，这是一个Leaflet的插件，看起来它会完全符合我的需要，不幸的是，在Leaflet 0.8-dev中进行了所有重构，这个插件不是＆＃39 ; t兼容。

有没有人能够使用Leaflet 0.8成功实现这一效果？

Answer 1

我想到一个hacky这样做的方法是使用Turf.js获取地图的当前中心点（map.getBounds()），用Turf缓冲1000米，取得结果，然后抓住地图视口的当前边界（erase），并在其上使用草皮name: project description: A sample Polymer application dependencies: browser: any polymer: any observe: any bwu_datagrid: any transformers: - polymer: entry_points: web/project.html 。然后在地图上绘制生成的多边形（这是不同的），然后在任何移动事件上更新它。

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