angular - 如何使用agm-map和agm-polyline用 Angular 2替换折线的颜色？

我在我的angular 2车辆跟踪应用程序中使用了agm map。这里我使用agm-map显示该 map 。我有一个名为Playback Component的组件，它表示用户可以查看从特定日期和时间到另一辆汽车的行驶时间特定的日期和时间。到目前为止一切正常。在这里，我需要提供一个选项以及日期和时间，称为“最大速度”，这意味着用户可以在 map 上查看车辆进入用户上方的行驶地点最大速度(例如，用户给出的最大速度为50，仅那些行驶点应以红色突出显示)。

我尝试了以下方法，

    <agm-map [latitude]="lat" [longitude]="lng" [zoom]="zoom" [mapTypeControl]="true">
        <agm-marker [latitude]="latlngMarker.latitude" [longitude]="latlngMarker.longitude">
        </agm-marker>
        <agm-polyline  [strokeColor]="'#2196f3'">
            <ng-container *ngFor="let i of latlng">
            <agm-polyline-point *ngIf = "i.speed < maxSpeed " [latitude]="i.latitude" [longitude]="i.longitude">
            </agm-polyline-point>
        </ng-container>
        </agm-polyline>
        <agm-polyline  [strokeColor]="'red'">
            <ng-container *ngFor="let i of latlng">
            <agm-polyline-point *ngIf = "i.speed > maxSpeed " [latitude]="i.latitude" [longitude]="i.longitude">
            </agm-polyline-point>
        </ng-container>
        </agm-polyline>
    </agm-map>

结果就像图像中一样。



但是我想要的就是这张照片，



这张图显示了红色的行驶点和蓝色的行驶点，其中车辆的行驶速度超过最大速度，我也需要第二张图所示的输出。请帮助我使用agm映射多点来达到所需的结果。

最佳答案

为此，我向您提出2种逻辑:

1)

的第一个逻辑是为数据中的每2个点创建一条折线，并根据数据速度属性设置其颜色:

Poyline(array(0), array(1)) , Polyline(array(1), array(2)), ...Poyline(array(i), array(i+1))

并检查array(i)的maxSpeed来设置颜色:

代码(我将项目更改为point，将i更改为index):

<agm-polyline *ngFor="let point of latLng;let i = index;"  [strokeColor]="point.speed < 50 ? '#2196f3': 'red'">
      <agm-polyline-point [latitude]="point.latitude" [longitude]="point.longitude">
      </agm-polyline-point>
      <ng-container *ngIf="polyline[i+1]">
        <agm-polyline-point [latitude]="polyline[i+1].latitude" [longitude]="polyline[i+1].longitude">
        </agm-polyline-point>
      </ng-container>
  </agm-polyline>

矮人妖魔这:https://embed.plnkr.co/keExxn/

2)

第二个想法是根据速度将折线的数组分离为多个折线的数组。因此，最终的数组可能如下所示:

let polylines = [
    {path: [item1, item2], color: 'red'},
    {path: [item3, item4, item5, item6, item7], color: '#2196f3'},
    ...
]

因此，从您的主要数据中，只需创建一个函数即可将数据更改为最终数据。

并在html中:

  <agm-map [latitude]="latitude" [longitude]="longitude" [scrollwheel]="false" [zoom]="zoom">
     <ng-container>
       <agm-polyline *ngFor="let polyline of polylines;let i = index;"  [strokeColor]="polyline.color">
          <agm-polyline-point *ngFor="let point of polyline.path" [latitude]="point.latitude" [longitude]="point.longitude">
          </agm-polyline-point>
      </agm-polyline>
    </ng-container>
  </agm-map>

您可以看看这个plnker来开始:https://embed.plnkr.co/u82rKd/