삽질, 마무리

<l-moving-rotated-marker
    v-for="dtgDataMovingMarker in dtgData"
    :key="dtgDataMovingMarker.id"
    :lat-lng="dtgDataMovingMarker.currentLatLng"
    :duration="1000"
    :icon="dtgDriverIcon(dtgDataMovingMarker.currentSpeed)"
>

친구의 도움을 받았던 마무리 :lat-lng="dtgDataMovingMarker.currentLatLng" 해당 문구 이 부분에 흰트가 있었다.

가장 먼저 dtgData에서 받아왔던 데이터 묶음이 들어오는 형식을 생각해보았다.

배열안에 객체의 모양을 하고있다.

 

그 안에서 초기값을 설정하고 초기 값을 + 해준다면 전체적으로 id 값이 변하더라도 자신의 좌표값이 끝났을때 알아서 멈추도록만 설정해주면 쉬웠다... 난 그걸 생각 없이 코딩으로 바로 넘어가서 굉장히 반성했다...

 

일단 그렇다면 어떻게 처음에 생각을 해봐야할까?

 

1. 나는 자율주행 차량을 움직이게 할 것이다.2. 그렇다면 데이터는 어떻게 데려올것인가?3. 데이터의 형식은 어떻게 되어있는가?4. 그렇다면 for문에 대한 삽질, 어떻게 도는지 확인, 그 후 차가 첫 좌표에 찍혀있는 것을 확인!5. 그렇다면 이제 넣어주면 된다 넣어주면 차가 앞으로 간다?

 

getAppCarData() {
  this.$axios.get(API_URLS.BASE_URL + API_URLS.MONITORING_APP_DATA).then(response => {
    this.appData = response.data.data;
    let ddd;

    if(this.appData) {
      let sec = 0 ;
      ddd = setInterval(() => {
        sec++
        for(let i = 0; i < this.appData.length; i++) {
          if(this.appData[i].carInfo.length > sec) {
            this.appData[i].currentSec = sec;
            this.appData[i].currentLatLng = this.appData[i].carInfo[sec].latLng;
            this.appData[i].currentSpeed = this.appData[i].carInfo[sec].speed;
            this.appData[i].currentAppLinkId = this.appData[i].carInfo[sec].appLinkID;
            this.appData[i].currentCreateDate = this.appData[i].carInfo[sec].createDate;
          }
        }
      }, 1000);
    } else {
      clearInterval(ddd);
    }
  });
},

한줄씩 뜯어보자

getAppCarData() {
// getAppCarData라는 함수를 만들었다
  this.$axios.get(API_URLS.BASE_URL + API_URLS.MONITORING_APP_DATA).then(response => {
  // 엑시오스 web api를 이용하여 내가 만든 api 데이터를 불러왔다. 
  	this.appData = response.data.data;
    // 그 담아온 데이터를 appData 전역 변수에 넣어주었다.
    let ddd;
	// 빈 변수를 하나 만들었다.
    if(this.appData) {
    // 만약에 appData에 값이 있다면
      let sec = 0 ;
      // sec 라는 변수에 0을 넣어놓고
      ddd = setInterval(() => {
      // 반복함수인 seInterval 함수를 아까 만든 ddd에 넣고
        sec++
        // sec 기존에 0이었던 아이를 1씩 증가시켰다.
        for(let i = 0; i < this.appData.length; i++) {
        // for문을 돌려준다. appData에 길이만큼 돌렸다.
          if(this.appData[i].carInfo.length > sec) {
          // 만약에 appData[i].carInfo.length가 sec 보다 클 경우 아래의 코드가 동작한다.
            this.appData[i].currentSec = sec;
            // this.appData[i].currentSec에 sec가 들어간다.
            this.appData[i].currentLatLng = this.appData[i].carInfo[sec].latLng;
            // this.appData[i].currentLatLng에 this.appData[1씩 증가].carInfo[1씩 증가].latLng;
            this.appData[i].currentSpeed = this.appData[i].carInfo[sec].speed;
            // 위와 같이 speed도 증가한다.
            this.appData[i].currentAppLinkId = this.appData[i].carInfo[sec].appLinkID;
            // 위와 같이 appLinkID도 증가한다.
            this.appData[i].currentCreateDate = this.appData[i].carInfo[sec].createDate;
            // 위와 같이 createDate도증가한다.
          }
        }
    	// 1초 마다 증가한다.
      }, 1000);
    } else {
    // 데이터가 없을때 ddd를 초기화한다!
      clearInterval(ddd);
    }
  });
},