如何使用agm-map和agm-polyline替换角度2的折线颜色？
我正在使用agm地图在我的角度2车辆跟踪application.And这里我是使用agm地图来显示地图。我有一个名为播放组件表示，用户可以查看车辆旅行从特定的日期和时间到另一个特定的日期和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 map point实现预期的结果一样。
回答 1
Stack Overflow用户
发布于 2017-10-25 16:02:35
为了实现这一目标，我提出了两个逻辑：
1)
first logic是为数据中的每2个点创建多段线，并根据数据速度属性设置其颜色：
Poyline(array(0), array(1)) , Polyline(array(1), array(2)), ...Poyline(array(i), array(i+1)) 并检查数组(I)的maxSpeed以设置颜色：
代码(我将该项更改为point，并将index更改为i )：
<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：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/
https://stackoverflow.com/questions/46763420
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号