[비행관제] 드론 history 갱신

src/components/map/naver/NaverMap.js

@@ -41,7 +41,7 @@ export const NaverCustomMap = () => {
             center: new naver.maps.LatLng(36.56793936069445, 127.85101412107547),
             zoom: 10,
             zoomControl: true,
-            mapTypeId: naver.maps.MapTypeId.HYBRID,
+            mapTypeId: naver.maps.MapTypeId.NORMAL,
             zoomControlOptions: {
                 position: naver.maps.Position.TOP_LEFT,
 

src/components/map/naver/dron/DronMarker.js

@@ -45,7 +45,7 @@ export const DronMarker = props => {
                                 hideProgressBar: true,
                                 position: toast.POSITION.BOTTOM_RIGHT,
                                 onClick: props => {                         
-                                    if(marker) handlerDronClick(marker);                                                    
+                                    if(marker) handlerDronClick(marker);                            
                                 }
                             }
                         )
@@ -91,13 +91,8 @@ export const DronMarker = props => {
             title: id,
             id: id,
             controlId: controlId,
-            icon: {
+            icon: {                
-                //   content: [
+                url: DronIcon,                
-                //     '<div>dddd</div>',
-
-                // ].join(''),
-                url: DronIcon,
-                // size: new naver.maps.Size(50, 50),
                 origin: new naver.maps.Point(0, 0),
                 anchor: new naver.maps.Point(15, 15),
             }
@@ -109,17 +104,16 @@ export const DronMarker = props => {
             handlerDronClick(marker);
         });
 
+        // drone 정보 창
+        // markerInfoWindow(marker);
+
         setArrMarkers(m => [...m, marker]);
     };
 
     const handlerDronClick = marker => {
         const idntfNum = marker.id;
-        const contorlId = marker.controlId;
+        const contorlId = marker.controlId;        
-
+        
-        // 클릭한 식별번호 정보를 가진 그룹 추출
-        // const group = controlGroupAuthInfo.find(group => group.idntfNum === idntfNum);
-
-        //히스토리 불러오기     
         dispatch(objectClickAction(contorlId));
         dispatch(controlGpDtlAction.request(contorlId));
         dispatch(controlGpFlightPlanAction.request(idntfNum));
@@ -169,10 +163,10 @@ export const DronMarker = props => {
                     if (isExists) {
                         moveMarkers(isExists, position);
                     } else {
-                        addMarkers(position, item.objectId, item.controlId);
+                        addMarkers(position, item.objectId, item.controlId);                        
                     }
                 } else {
-                    addMarkers(position, item.objectId, item.controlId);
+                    addMarkers(position, item.objectId, item.controlId);                    
                 }
             });
         }
@@ -182,5 +176,43 @@ export const DronMarker = props => {
         setArrMarkers(arrData);
     };
 
+    const markerInfoWindow = (marker) => {
+        controlGpList.forEach(gps => {
+            
+            const contents = [
+                `<div class="tooltip-box">`,
+                `   <div class="tooltip-ti">`,
+                `       <span>${marker.id}</span>`,
+                `   </div>`,
+                `   <div class="tooltip-txt">`,
+                `       <div class="tooltip-txt-list">`,                
+                `          <span>${gps.speed}${gps.speedType}</span>`,
+                `       </div>`,
+                `       <div class="tooltip-txt-list">`,
+                `          <span>${gps.elev}${gps.elevType}</span>`,
+                `       </div>`,
+                `       <div class="tooltip-txt-list">`,
+                `          <span>${gps.heading}</span>`,
+                `       </div>`,
+                `   </div>`,
+                `</div>`
+            ].join('');
+
+            const info = new naver.maps.InfoWindow({ 
+                id: marker.id,
+                content: contents,
+                backgroundColor: '#283046', //박스안쪽영역 컬러                
+                anchorSize: new props.naver.maps.Size(30, -10),
+                anchorSkew: false,
+                anchorColor: '#283046',
+                pixelOffset: new props.naver.maps.Point(20, -20)
+            });
+
+            console.log(info);
+
+            info.open(props.map, marker);
+        });
+    }
+
     return null;
 };

src/modules/control/gp/sagas/controlGpSaga.ts

@@ -35,12 +35,10 @@ function* getControlGpSaga(
                 }
             });
         } 
-        
-        console.log('gps ', gpsData);
 
         yield put(
             Actions.controlGpAction.success({
-                controlGpList: gpsData
+                controlGpList: data
             })
         );
 
@@ -57,17 +55,20 @@ function* getControlGpSaga(
             
             yield put(Actions.controlGpRtDtlAction.request(detailData));
 
-            // History Push
+            // History Push            
             if(controlGpHistory) {
-                const stateHistory = controlGpHistory;
+                const stateHistory = controlGpHistory.concat();
-                const history = stateHistory.map((h) => {
-                    return {
-                        ...h,
-                        detailData
-                    }
-                });
                 
-                yield put(Actions.controlGpHisAction.success(history));
+                const hisObj = {
+                    lat: detailData.lat,
+                    lng: detailData.lng,
+                    objectId: detailData.objectId
+                }
+                stateHistory.push(hisObj);
+
+                yield put(Actions.controlGpHisAction.success({
+                    controlGpHistory: stateHistory
+                }));
             }
         }
     } catch (error) {           

src/modules/control/map/reducers/controlMapReducer.ts

@@ -1,6 +1,6 @@
 // ** Initial State
 const initialState = {
-  mapType: 'HYBRID',
+  mapType: 'NORMAL',
   objectId: null,
   isClickObject: false,
   area0001: true, // 비행금지 구역