编辑和拖动时如何获取agm多边形的路径? [英] How to get paths of agm polygon when it is edited and dragged?

问题描述

在编辑和拖动多边形时，我试图获取更新的多边形路径.我试图像下面的代码那样做.

I am trying to get the updated polygon paths when the polygon is edited and dragged. I tried to do it like the code below.

在我的打字稿中:

 @ViewChild(AgmPolygon) polygon: any;
 this.polygon.getPaths().then((x: any[]) => {
   x.forEach(y => {
     console.log('-');
     y.forEach(z => console.log(z.lat(), z.lng()));
   });
 });

我也遵循了以下链接第二个链接.

I followed the following links also 1st link 2nd link.

在我的html中:

<agm-map [latitude]="lat" [fullscreenControl]="true" 
    (mapClick)="mapClicked($event)" [longitude]="lng" [zoom]="8" [mapTypeControl]="true">

  <agm-polygon [fillColor]="item.fillColor" (polyMouseOut)="polyMouseOut($event)" 
    (polyMouseMove)="polyMouseMove($event)" [fillOpacity]="item.fillOpacity" 
    *ngFor="let item of zonesPath; let i=index" [editable]="item.ZoneID==ZoneID" 
    (polyMouseUp)="polyMouseUp(item,$event)" (polyMouseDown)="polyMouseDown($event)" 
    (polyDblClick)="polyDblClick($event)" (polyDragStart)="polyDragStart($event)" 
    (polyDragEnd)="polyDragEnd($event,item)" (polyDrag)="polyDrag($event)" 
    [polyDraggable]="false" [paths]="item.ZonePaths" (polyClick)="polyclick($event)">
  </agm-polygon>

  <agm-polygon [paths]="paths"></agm-polygon>
</agm-map>

我正在为多边形做* ngFor，而我的json数据是:

i am doing *ngFor for polygon.and my json data is:

{
"ZoneID": "594dff0ee10452d8567b23c6",
"strokeColor" : "#038063",
"strokeOpacity" : 0.2,
"strokeWeight" : 2,
"fillColor" : "#038063",
"fillOpacity" : 0.35,
"draggable" : false,
"editable" : false,
"visible" : true,
"ZonePaths": [ 
    {
        "lat" : 17.535107299215,
        "lng" : 78.2346725463869
    }, 
    {
        "lat" : 17.541981926489,
        "lng" : 78.240509033203
    }, 
    {
        "lat" : 17.54460076354,
        "lng" : 78.249778747559
    }, 
    {
        "lat" : 17.55082034986,
        "lng" : 78.284454345703
    }]}

推荐答案

在读取仍在PR上的ATM agm多边形编辑更改事件后，我不得不克服这一问题.

I had to overcome this after reading ATM agm polygon edit change event it still on PR.

因此，我回到基础知识，寻找google map api类v3.

So, I return to basics and look for google map api class v3.

@ViewChild(AgmMap) map: any;
polygon: any;
this.map._mapsWrapper.createPolygon({
      paths: this.area,
      strokeColor: '#FF0000',
      strokeOpacity: 0.8,
      strokeWeight: 2,
      fillColor: '#FF0000',
      fillOpacity: 0.3,
      editable: true,
    }).then((polygon: any) => {
      this.polygon = polygon
    });

此后，您可以使用getPath()添加事件或获取路径更改

After this, you can add event or get the path changes with getPath()

console.debug(this.polygon.getPath())

这篇关于编辑和拖动时如何获取agm多边形的路径?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！