如何在ngx-leaflet-draw中获取多边形的位置坐标?

Question

我为我的 angular6 项目集成了 ngx-leaflet-draw。我可以在地图上绘制多边形。但是我不知道如何获取多边形位置坐标。我想通过执行数据库搜索来显示多边形内的用户。我浏览了官方文件，但它对我没有帮助。

我的应用程序组件.ts文件如下

import { Component } from '@angular/core';
import {tileLayer,latLng, marker, Marker} from 'leaflet';
import * as L from 'leaflet';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'map';
options = {
layers: [
tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png')
],
zoom: 15,
center: latLng(8.524139,76.936638)
};
drawOptions = {
position: 'topright',
draw: {
marker: {
icon: L.icon({
iconSize: [ 25, 41 ],
iconAnchor: [ 13, 41 ],
iconUrl: '../../assets/marker-icon.png',
shadowUrl: '../../assets/marker-shadow.png'
})
},
polyline: false,
circle: {
shapeOptions: {
color: '#aaaaaa'
}
}
}
};
ngOnInit(){

}
sample(e) {
console.log(e);
}

}

和我的应用程序组件.html文件为：

<div leaflet style="height: 400px;"
leafletDraw
[leafletOptions]="options"
[leafletDrawOptions]="drawOptions"
(leafletDrawReady)="sample($event)"
>
</div>

首次使用传单地图。

请帮助我找到解决方案。

Answer 1

您需要收听onMapReady事件，获取对地图的引用，并在普通传单库中执行操作：

模板：

<div leaflet style="height: 400px;"
leafletDraw
[leafletOptions]="options"
[leafletDrawOptions]="drawOptions"
(leafletMapReady)="onMapReady($event)">
</div>

元件：

onMapReady(map: Map) {
map.on(L.Draw.Event.CREATED, function (e) {
// const type = (e as L.DrawEvents.Created).layerType,
// layer = (e as L.DrawEvents.Created).layer;
const type = (e as any).layerType,
layer = (e as any).layer

if (type === 'polygon') {
// here you got the polygon coordinates
const polygonCoordinates = layer._latlngs;
console.log(polygonCoordinates);
}
});
}

演示