当传单的map.on'draw：drawstop'，functione{};时触发角度材质对话框被叫

如何解决当传单的map.on'draw：drawstop'，functione{};时触发角度材质对话框被叫

当传单抽签的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) { });
}

解决方法

好吧，我发现遇到类似问题的任何人，只需将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);
  }
  


}