angular - Leaflet 的 map.on('draw:drawstop', function (e) { }); 时触发角度材质对话框 被调用
问题描述
draw:drawstop
当传单绘制事件发生时,我需要触发角度材质对话框。如何使传单事件发生在角度区域内或如何观察传单变化(角度区域外)并反映角度区域内?
这是我的实际代码:
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);
}
}
推荐阅读
- npm - 通过 NPM 的 Azure Dev Ops 存储库
- firebase - 是否可以更改原生广告的背景颜色?
- c - '*' 的操作数必须是 c 中的指针错误
- javascript - 无法使用 express.js node.js 发布到我的数据库 mySQLWorkBench
- typescript - 进行属性访问后联合缩小中断
- c - OpenMP 中的#pragma 用于什么?
- javascript - 刷新浏览器时如何更正选择的功能选项?
- c++ - 带有目录树 zlib 构建错误的 libpng
- python - 如何使用 PYCHARM 社区版调试 Django 应用程序
- sql - 在 Sql 中,对 Column 进行分组,但不显示在所有行中