Блог

Мне нужно запустить диалоговое окно с угловым материалом, когда 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' amp;amp; type != 'circle') {
      // console.log( layer.getLatLngs());  
     var c = layer.getLatLngs()
      editableLayers.addLayer(layer);

      console.log(c);
    }
    if (type === 'marker' amp;amp; 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' amp;amp; type != 'circle') {
        // console.log( layer.getLatLngs());  
       var c = layer.getLatLngs()
        editableLayers.addLayer(layer);
  
        console.log(c);
      }
      if (type === 'marker' amp;amp; 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);
  }
  


}