כיצד להחליף צבע של קו מרובה בעזרת Angular 2 תוך שימוש ב-agm-map ו-agm-polyline?

אני משתמש במפה של AGM באפליקציית מעקב רכבים Angular 2 שלי. וכאן אני משתמש ב-AGM-Map כדי להציג את המפה. יש לי קומפוננטה בשם Playback Component שמציינת שהמשתמש יכול לצפות ברכב שנע מתאריך ושעה מסוימים לתאריך ושעה אחרים. והכל עובד בצורה טובה עד עכשיו. כאן אני צריך לתת אפשרות בנוסף לתאריך ולשעה שנקראת מהירות מקסימלית, שפירושה שהמשתמש יכול לצפות במפה באילו מקומות במסלול הרכב עבר מעל למהירות המקסימלית שהמשתמש הזין (נניח שהמשתמש נותן מהירות מקסימלית של 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.

תשובה #1

כדי להשיג זאת, אני מציע לך שני לוגיקות:

1)

הלוגיקה הראשונה היא ליצור פוליליין עבור כל שתי נקודות בנתונים שלך ולהגדיר את צבעו בהתאם למאפיין המהירות של הנתונים:

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

ולבדוק את maxSpeed עבור array(i) כדי לקבוע את הצבע:

קוד (שיניתי את הפריט ל-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>

אתה יכול להסתכל על הפלנקר הזה כדי להתחיל: https://embed.plnkr.co/u82rKd/