Angular 当传单'；s map.on（'；draw:drawstop'；，函数（e）{}）；被叫

当传单绘制的

draw:drawstop

事件发生时，我需要触发“角度材质”对话框。如何使传单事件发生在angular区域内，或如何观察传单变化（angular区域外）并在angular区域内反射

这是我的实际代码：

import {MatDialog} from '@angular/material/dialog';

import 'leaflet';
import 'leaflet-draw/dist/leaflet.draw-src.js';
import { AoiDialogComponent } from '../aoi-dialog/aoi-dialog.component';
declare const L: any;
var editableLayers = new L.FeatureGroup();
var dstate = false;

@Component({
  selector: 'app-draw',
  templateUrl: './draw.component.html',
  styleUrls: ['./draw.component.css']
})



export class DrawComponent implements OnInit {

  @Input() public map;

  constructor(public dialog: MatDialog) { }

  openDialog() {
    this.dialog.open(AoiDialogComponent);
  }

  ngOnInit(): void {
       drawPlugin(this.map);
}}

export function drawPlugin(map: any) {
  var options = {
    position: 'topleft',
    draw: {
      polyline: {
        shapeOptions: {
          color: '#f357a1',
          weight: 10
        }
      },
      polygon: {
        allowIntersection: false, // Restricts shapes to simple polygons
        drawError: {
          color: '#e1e100', // Color the shape will turn when intersects
          message: '<strong>Oh snap!<strong> you can\'t draw that!' // Message that will show when intersect
        },
        shapeOptions: {
          color: '#bada55'
        }
      },
      circle: {
        shapeOptions: {
          clickable: false
        }
      },
      rectangle: {
        showArea: false,
        shapeOptions: {
          clickable: false
        }
      },

    },
    edit: {
      featureGroup: editableLayers, //REQUIRED!!
      remove: false
    }
  };

  var drawControl = new L.Control.Draw(options);
  map.addControl(drawControl);
 
  map.on(L.Draw.Event.CREATED, function (e) {
    map.addLayer(editableLayers);


     var type = e.layerType;
     var  layer = e.layer;

    if (type != 'marker' && type != 'circle') {
      // console.log( layer.getLatLngs());  
     var c = layer.getLatLngs()
      editableLayers.addLayer(layer);

      console.log(c);
    }
    if (type === 'marker' && type != 'circle') {
      layer.bindPopup('A popup!');
    }
  });

  map.on('draw:drawstop', function (e) { });
}

从'@angular/material/dialog'导入{MatDialog}；
进口"单张";；
导入“传单绘制/dist/传单.draw src.js”；
从“../aoi对话框/aoi对话框.component”导入{AoiDialogComponent}；
声明常数L：任何；
var editableLayers=新的L.FeatureGroup（）；
var-dstate=false；
@组成部分({
选择器：“应用程序绘图”，
templateUrl:'./draw.component.html'，
样式URL:['./draw.component.css']
})
导出类DrawComponent实现OnInit{
@输入（）公共地图；
构造函数（公共对话框：MatDialog）{}
openDialog（）{
this.dialog.open（AoiDialogComponent）；
}
ngOnInit（）：void{
drawPlugin（this.map）；
}}
导出函数drawPlugin（映射：任意）{
变量选项={
位置：'左上'，
抽签：{
多段线：{
形状选项：{
颜色：“#f357a1”，
体重：10
}
},
多边形：{
AllowerSection:false，//将形状限制为简单多边形
抽屉错误：{
颜色：'#e1e100'，//形状相交时将改变颜色
消息：“噢，快！你不能画那个！”//当相交时将显示的消息
},
形状选项：{
颜色：“#bada55”
}
},
圆圈：{
形状选项：{
可点击：false
}
},
矩形：{
展区：假，
形状选项：{
可点击：false
}
},
},
编辑：{
featureGroup:editableLayers，//必需！！
删除：false
}
};
var drawControl=新的L.Control.Draw（选项）；
map.addControl（drawControl）；
map.on（L.Draw.Event.CREATED，函数（e）{
map.addLayer（可编辑层）；
变量类型=e.layerType；
var层=e层；
如果（类型！='marker'&&type！='circle'）{
//console.log（layer.getLatLngs（））；
var c=layer.getLatLngs（）
editableLayers.addLayer（层）；
控制台日志（c）；
}
如果（类型=='marker'&&type！='circle'）{
layer.bindpoppup（'A popup！'）；
}
});
map.on（'draw:drawstop'，函数（e）{}）；
}

好的，我想对于任何面临类似问题的人，只要将

drawPlugin

函数移到组件的范围内即可

import {MatDialog} from '@angular/material/dialog';

import 'leaflet';
import 'leaflet-draw/dist/leaflet.draw-src.js';
import { AoiDialogComponent } from '../aoi-dialog/aoi-dialog.component';
declare const L: any;

var editableLayers = new L.FeatureGroup();
var dstate = false;

@Component({
  selector: 'app-draw',
  templateUrl: './draw.component.html',
  styleUrls: ['./draw.component.css']
})



export class DrawComponent implements OnInit {

  @Input() public map;

  constructor(public dialog: MatDialog) { }

 

  ngOnInit(): void {

    this.drawPlugin(this.map);

  }

   private drawPlugin(map: any) {

    // const drawnItems = L.featureGroup().addTo(map);
  
    var options = {
      position: 'topleft',
      draw: {
        polyline: {
          shapeOptions: {
            color: '#f357a1',
            weight: 10
          }
        },
        polygon: {
          allowIntersection: false, // Restricts shapes to simple polygons
          drawError: {
            color: '#e1e100', // Color the shape will turn when intersects
            message: '<strong>Oh snap!<strong> you can\'t draw that!' // Message that will show when intersect
          },
          shapeOptions: {
            color: '#bada55'
          }
        },
        circle: {
          shapeOptions: {
            clickable: false
          }
        },
        rectangle: {
          showArea: false,
          shapeOptions: {
            clickable: false
          }
        },
  
      },
      edit: {
        featureGroup: editableLayers, //REQUIRED!!
        remove: false
      }
    };
  
    var drawControl = new L.Control.Draw(options);
    map.addControl(drawControl);
   
    map.on(L.Draw.Event.CREATED, function (e) {
      map.addLayer(editableLayers);
  
  
       var type = e.layerType;
       var  layer = e.layer;
  
      if (type != 'marker' && type != 'circle') {
        // console.log( layer.getLatLngs());  
       var c = layer.getLatLngs()
        editableLayers.addLayer(layer);
  
        console.log(c);
      }
      if (type === 'marker' && type != 'circle') {
        layer.bindPopup('A popup!');
      }
    });
  
    map.on('draw:drawstop',  (e) => { console.log("end");

    this.openDialog(e);
    
      
  });
  
    
  }

  openDialog(e) {
    console.log('e',e);
    this.dialog.open(AoiDialogComponent);
  }
  


}

从'@angular/material/dialog'导入{MatDialog}；
进口"单张";；
导入“传单绘制/dist/传单.draw src.js”；
从“../aoi对话框/aoi对话框.component”导入{AoiDialogComponent}；
声明常数L：任何；
var editableLayers=新的L.FeatureGroup（）；
var-dstate=false；
@组成部分({
选择器：“应用程序绘图”，
templateUrl:'./draw.component.html'，
样式URL:['./draw.component.css']
})
导出类DrawComponent实现OnInit{
@输入（）公共地图；
构造函数（公共对话框：MatDialog）{}
ngOnInit（）：void{
this.drawPlugin（this.map）；
}
私有drawPlugin（地图：任意）{
//const drawnItems=L.featureGroup（）.addTo（映射）；
变量选项={
位置：'左上'，
抽签：{
多段线：{
形状选项：{
颜色：“#f357a1”，
体重：10
}
},
多边形：{
AllowerSection:false，//将形状限制为简单多边形
抽屉错误：{
颜色：'#e1e100'，//形状相交时将改变颜色
消息：“噢，快！你不能画那个！”//当相交时将显示的消息
},
形状选项：{
颜色：“#bada55”
}
},
圆圈：{
形状选项：{
可点击：false
}
},
矩形：{
展区：假，
形状选项：{
可点击：false
}
},
},
编辑：{
featureGroup:editableLayers，//必需！！
删除：false
}
};
var drawControl=新的L.Control.Draw（选项）；
map.addControl（drawControl）；
map.on（L.Draw.Event.CREATED，函数（e）{
map.addLayer（可编辑层）；
变量类型=e.layerType；
var层=e层；
如果（类型！='marker'&&type！='circle'）{
//console.log（layer.getLatLngs（））；
var c=layer.getLatLngs（）
editableLayers.addLayer（层）；
控制台日志（c）；
}
如果（类型=='marker'&&type！='circle'）{
layer.bindpoppup（'A popup！'）；
}
});
map.on（'draw:drawstop'，（e）=>{console.log（“end”）；
这个.openDialog（e）；
});
}
openDialog（e）{
console.log（'e'，e）；
this.dialog.open（AoiDialogComponent）；
}
}