如何使用 agm-map 和 agm-polyline 将折线的颜色与 angular 2 交替？

Question

我在 angular 2 车辆跟踪中使用 agm 地图 application.And 这里我使用 agm-map 来显示 map.I 有一个名为 Playback Component 的组件，它表示，用户可以查看从特定日期和时间到另一个特定日期的车辆，并且 time.And 从 now.Here 开始一切正常我需要提供一个选项以及称为最大速度的日期和时间，这意味着用户可以在地图中查看车辆在哪些行驶地点超过了用户输入的最大速度（假设用户将最大速度设置为 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>

结果如图所示

但是我想要的就是这张图，

这张图片显示了红色的行程点和蓝色的点，车辆行驶的速度超过了最大速度，我也需要像这秒一样的输出 image.Kindly 帮助我达到预期的效果使用 agm 地图多边形点的结果。

Answer 1

为了实现这一点，我建议你 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>

plunker demonstring 这个：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/

如何使用 agm-map 和 agm-polyline 将折线的颜色与 angular 2 交替？

How to alternate color of polyline with angular 2 using agm-map & agm-polyline?

google-maps

google-maps-api-3

google-maps-markers

typescript

angular

1)

2)