leaflet清除通过geoman(pm)插件绘制的图形

leaflet清除通过geoman(pm)插件绘制的图形

项目使用geoman第三方组件,来实现绘制图形。现在项目需要把绘制的图形清理下。
leaflet已经封装好了从地图上移除图形方法。需要做的就是获取到绘制的layer,然后调用下map.removeLayer(layer);

启用Geoman绘制工具条

 onEnableTool(){
   this.map.pm.setLang('zh');
        this.map.pm.addControls({
          position: 'topright',
          drawCircle: false,
          drawRectangle: false,
          drawCircleMarker: false,
        });
 }
 //这里我是关闭了绘制点、矩形和圆的按钮。

监听绘制图形

init(){
 
 this.map.on('pm:create', (workingLayer) => {           
        const graphic = LMapUtil.getGraphics(workingLayer);       
        vm.map.graphics.push(workingLayer);//这里记录绘制结果信息        
        this.$emit('edited', graphic);
      });
}

清除图形方法

//注意:graphic.layer才是真正添加到map的图层;不是graphic。
clearGraphics(map){
 map.graphics.forEach(graphic =>{
 map.removeLayer(graphic.layer);
 })
}

注意:graphic.layer才是真正添加到map的图层;不是graphic。
刚开始我把workingLayer当作添加到map的图层,然后移除发现不行,图形还是存在,网上也没有找到方法,只好下载geoman的源码来研究它是怎么添加到地图和返回参数是什么。
最后在绘制Marker源码中发现如下代码:

_createMarker(e) {
    if (!e.latlng) {
      return;
    }

    // assign the coordinate of the click to the hintMarker, that's necessary for
    // mobile where the marker can't follow a cursor
    if (!this._hintMarker._snapped) {
      this._hintMarker.setLatLng(e.latlng);
    }

    // get coordinate for new vertex by hintMarker (cursor marker)
    const latlng = this._hintMarker.getLatLng();

    // create marker
    const marker = L.circleMarker(latlng, this.options.pathOptions);
    // add marker to the map
    marker.addTo(this._map);

    // enable editing for the marker
    marker.pm.enable();

    // fire the pm:create event and pass shape and marker
    this._map.fire('pm:create', {
      shape: this._shape,
      marker, // DEPRECATED
      layer: marker,
    });

    this._cleanupSnapping();
  },

Geoman源码地址
Geoman帮助文档

  • 0
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 4
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值