Question

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

我的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库中要做的事情：

模板：

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

Demo

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

1 个答案: