Hvordan endre fargen på en polyline annenhver gang med Angular 2 ved bruk av agm-map og agm-polyline?

Jeg bruker agm map i min Angular 2-kjøretøysporingsapplikasjon. Og her bruker jeg agm-map for å vise kartet. Jeg har en komponent kalt Playback Component som innebærer at brukeren kan se kjøretøyets reise fra en bestemt dato og tid til en annen bestemt dato og tid. Og alt fungerer fint så langt. Her trenger jeg å gi et alternativ sammen med dato og tid kalt Maks hastighet, som betyr at brukeren kan se på kartet på hvilke steder under reisen kjøretøyet har overskredet brukers angitte maks hastighet (for eksempel hvis brukeren oppgir maks hastighet som 50, skal bare de reise-punktene fremheves i rødt).

Jeg har forsøkt med følgende,

    <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>

Og resultatet er som på bildet.

Men tingen jeg vil ha, er som dette bildet,

Dette bildet viser de røde reisepunktene sammen med blå punkter, der kjøretøyet kjørte over maks hastighet, og jeg trenger også outputen som i dette andre bildet. Vennligst hjelp meg med å oppnå ønsket resultat ved å bruke agm map poly point.

Svar #1

For å oppnå dette foreslår jeg to logikker for deg:

1)

Første logikk er å lage en polylinje for hvert 2. punkt i dine data og sette fargen avhengig av datapunktets hastighetsegenskap:

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

og sjekk maxSpeed for array(i) for å sette fargen:

kode (jeg endret elementet til point, og i til 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 viser dette: https://embed.plnkr.co/keExxn/

2)

andre idé er å dele opp arrayen til polylinen din avhengig av hastigheten, til flere array av polyline. Så den endelige arrayen kan se slik ut:

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

Så fra dine hoveddata, bare lag en funksjon for å endre dataene til å bli som disse endelige dataene.

og i 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>

Du kan ta en titt på denne plnkeren for å starte: https://embed.plnkr.co/u82rKd/

Relaterte artikler