Как получить координаты местоположения полигона в ngx-leaflet-draw?

Question

Я интегрировал ngx-leaflet-draw для своего проекта angular6. Я мог нарисовать многоугольник над картой. Но я не знаю, как получить координаты местоположения многоугольника. Я хочу показать пользователей внутриполигон, выполнив поиск по базе данных. Я просмотрел официальные документы, но это мне не помогло.

Мой файл app.component.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);
}


}

, и мой app.component.html файл как:

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

Использование карты листовок в первый раз.

Пожалуйста, помогите мне найти решение.

Answer 1

Вам необходимо прослушать событие onMapReady, получить ссылку на карту и сделать то, что вы сделали бы в простой библиотеке Leaflet:

template:

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

component:

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);
        }
    });
}

Демо