1

我有一个带有 2 个 agm 折线点的 agm 折线。移动线的边缘（中点）时，我想用 3 个点保存新线。问题是，当将边缘移动到新位置时，事件返回错误的坐标/或只是其他坐标。

    <agm-map [zoom]="zoom" [latitude]="lat" [longitude]="lng" style="height: 500px">
      <agm-polyline [editable]="true" (lineMouseUp)="addEdge($event)">
        <agm-polyline-point 
        *ngFor="let point of points" [latitude]="point.lat" [longitude]="point.lng"></agm-polyline-point>
      </agm-polyline>
    </agm-map>

  lat: number = 32.0795723;
  lng: number = 34.7757089;
  zoom: number = 16;
  @ViewChild('line') polyLine : AgmPolyline;
  points = [
    {lat: 32.0795723, lng: 34.7757089},
    {lat: 32.0780565, lng: 34.7798036}
  ]
  addEdge(event){
    let point = {lat: event.latLng.lat(), lng: event.latLng.lng()};
    if (event.vertex !== undefined) {
      this.points[event.vertex] = point;
    } else if (event.edge !== undefined) {
      this.points.splice(event.edge + 1, 0, point);
    }
    console.log(this.points)
  }

看看stackblitz。

4

1 回答 1

1

新答案

我之前的回答需要墨卡托投影计算，这并不有趣。进一步研究，polyPathChange当有人更新线路时会触发一个事件。您需要更新您的 agm 和 rxjs 才能使用此事件。我在这个stackblitz中有一个工作示例。请注意，我隐藏/显示该行，因为polyPathChange仅触发一次，因此隐藏/显示重新初始化该行。所以事件再次触发。是否有不需要隐藏/显示线条的解决方案？也许吧，但我不知道该怎么做。

旧答案

我知道这有点晚了，但没有正式回答这个问题。

玩了这么久，终于明白是怎么回事了。从 the 返回的事件上的 lat/lng(lineMouseUp)不是线的节点，而是新的中点。所以它不是一个随机数，它是(pointA.lat + pointB.lat)/2. 解决此问题的方法是在将其拼接到数组之前使用以下等式：

point.lat = (point.lat - this.points[event.edge].lat) * 2 + this.points[event.edge].lat;
point.lng = (point.lng - this.points[event.edge].lng) * 2 + this.points[event.edge].lng;

请注意，这可能不适用于所有半球（我不知道，我没有测试那么多），因此您可能需要检查 lat/lng 是否为正/负并调整等式。这是一个有效的堆栈闪电战

于 2020-07-13T19:12:21.797 回答