Merge remote-tracking branch 'origin/master'

src/components/map/naver/NaverMap.js

@@ -7,6 +7,8 @@ import { NaverMapSearch } from './search/NaverMapSearch';
 import { FeatureAirZone } from './feature/FeatureAirZone';
 import geoJson from '../geojson/airArea.json';
 import DronPlan from './dron/DronPlan';
+import NewDronPlan from './dron/NewDronPlan';
+import { NewDronHistory } from './dron/NewDronHistroy';
 import DronToast from './dron/DronToast';
 import SensorZone from './sensor/SensorZone';
 
@@ -180,16 +182,23 @@ export const NaverCustomMap = () => {
         <>
           <DronMarker map={mapObject} naver={naver} />
 
-          <DronPlan map={mapObject} naver={naver} />
+          {/* <DronPlan map={mapObject} naver={naver} /> */}
+          <NewDronPlan map={mapObject} naver={naver} />
 
           <NaverMapControl map={mapObject} />
 
-          <DronHistory
+          {/* <DronHistory
             map={mapObject}
             naver={naver}
             arrPolyline={arrPolyline}
             handleHistoryInit={handleHistoryInit}
-          />
+          /> */}
+          {/* <NewDronHistory
+            map={mapObject}
+            naver={naver}
+            arrPolyline={arrPolyline}
+            handleHistoryInit={handleHistoryInit}
+          /> */}
 
           <DronToast />
 

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

@@ -6,6 +6,8 @@ import FlightIcon from '../../../../assets/images/airplan_org.svg';
 import FlightDetailIcon from '../../../../assets/images/airplan_pp.svg';
 import DronIcon from '../../../../assets/images/drone-marker-icon.png';
 import DronDetailIcon from '../../../../assets/images/drone-marker-icon-pulple.png';
+import DronUamIcon from '../../../../assets/images/uam_icon.png';
+import DronUamDetailIcon from '../../../../assets/images/uam_icon_purple.png';
 import {
   controlGpDtlAction,
   controlGpFlightPlanAction,
@@ -136,14 +138,14 @@ export const DronMarker = props => {
     arrMarkers.map(clickMarker => {
       if (objectId === clickMarker.controlId && isClickObject) {
         imageUrl =
-          clickMarker.type === 'DRONE' ? DronDetailIcon : FlightDetailIcon;
+          clickMarker.type === 'DRONE' ? DronUamDetailIcon : FlightDetailIcon;
         clickMarker.setIcon({
           content: `<img src="${imageUrl}" alt="" style="transform: rotate(${clickMarker.gps.heading}deg)">`,
           origin: new naver.maps.Point(0, 0),
           anchor: new naver.maps.Point(15, 15)
         });
       } else {
-        imageUrl = clickMarker.type === 'DRONE' ? DronIcon : FlightIcon;
+        imageUrl = clickMarker.type === 'DRONE' ? DronUamIcon : FlightIcon;
         clickMarker.setIcon({
           content: `<img src="${imageUrl}" alt="" style="transform: rotate(${clickMarker.gps.heading}deg)">`,
           origin: new naver.maps.Point(0, 0),
@@ -176,7 +178,7 @@ export const DronMarker = props => {
         prev => prev.idntfNum === gps.objectId
       );
       if (pal) {
-        markerOption.url = DronIcon;
+        markerOption.url = DronUamIcon;
         markerOption.type = 'DRONE';
         gpsCnt.type = 'drone';
       } else {
@@ -255,6 +257,9 @@ export const DronMarker = props => {
     });
     marker.setMap(props.map);
 
+    dispatch(controlGpFlightPlanAction.request(marker.id)); //예상경로
+    // dispatch(controlGpHisAction.request({ id: marker.controlId })); //진행경로;
+
     /** drone 상세보기 */
     naver.maps.Event.addListener(marker, 'click', function (e) {
       handlerDronClick(marker.controlId, marker.id);
@@ -304,8 +309,8 @@ export const DronMarker = props => {
   const handlerDronClick = (controlId, idntfNum) => {
     // get detail, history, flight-plan
     dispatch(objectClickAction(controlId));
-    dispatch(controlGpDtlAction.request(controlId));
+    // dispatch(controlGpDtlAction.request(controlId));
-    dispatch(controlGpFlightPlanAction.request(idntfNum));
+    // dispatch(controlGpFlightPlanAction.request(idntfNum));
   };
 
   //마커를 삭제 한다.

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

@@ -0,0 +1,66 @@
+import { object } from 'prop-types';
+import { useEffect, useState } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import { controlGpHisAction } from '../../../../modules/control/gp';
+
+export const NewDronHistory = props => {
+  const dispatch = useDispatch();
+
+  const { controlGpHistory } = useSelector(state => state.controlGpHisState);
+  const { controlGpList } = useSelector(state => state.controlGpState);
+
+  //   const { objectId, isClickObject } = useSelector(
+  //     state => state.controlMapReducer
+  //   );
+
+  //   const [arrHistory, setArrHistory] = useState([]);
+
+  let naver = props.naver;
+  let polyline = [];
+  let polylinePath = [[]];
+
+  const [arrHistory, setArrHistory] = useState([]);
+  const [controlIdArr, setControlIdArr] = useState([]);
+
+  useEffect(() => {
+    if (controlGpList) {
+      const listArr = controlGpList.map(gpList => {
+        return gpList.objectId;
+      });
+      if (controlIdArr != listArr) {
+        setControlIdArr(listArr);
+        const diff = controlIdArr.filter(list => !listArr.includes(list));
+        if (diff.length > 0) console.log(diff);
+      }
+      //   console.log(controlGpList, '>>>>');
+    }
+  }, [controlGpList]);
+
+  useEffect(() => {
+    if (controlGpHistory) {
+      //   const tt = controlGpHistory[0].objectId;
+      //   console.log(tt);
+      historyInit();
+    }
+  }, [controlGpHistory]);
+
+  const historyInit = () => {
+    const hisList = controlGpHistory;
+    const line = new naver.maps.Polyline({
+      clickable: false,
+      strokeColor: '#ff4961',
+      strokeStyle: 'solid',
+      strokeOpacity: 5,
+      strokeWeight: 1.5
+    });
+    hisList.map(item => {
+      if (item.lat > 0 && item.lng > 0) {
+        const position = new naver.maps.LatLng(item.lat, item.lng);
+        polylinePath.push(position);
+      }
+    });
+    // line.setPath(poly)
+  };
+
+  return null;
+};

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

@@ -0,0 +1,131 @@
+import { useEffect, useState } from 'react';
+import { useSelector, useDispatch } from 'react-redux';
+import { controlGpFlightPlanInitAction } from '../../../../modules/control/gp';
+
+const NewDronPlan = ({ naver, map }) => {
+  const dispatch = useDispatch();
+
+  const { controlGpList } = useSelector(state => state.controlGpState);
+  const { controlGpFltPlanList } = useSelector(
+    state => state.controlGpFltPlanState
+  );
+
+  const [areaArr, setAreaArr] = useState([]);
+  const [bufferArr, setBufferArr] = useState([]);
+  const [controlIdArr, setControlIdArr] = useState([]);
+
+  useEffect(() => {
+    if (controlGpFltPlanList) {
+      planInit();
+    }
+  }, [controlGpFltPlanList]);
+
+  useEffect(() => {
+    if (controlGpList) {
+      const listArr = controlGpList.map(gpList => {
+        return gpList.objectId;
+      });
+      if (controlIdArr != listArr) {
+        setControlIdArr(listArr);
+        const diff = controlIdArr.filter(list => !listArr.includes(list));
+        if (diff) clear(diff);
+      }
+    }
+  }, [controlGpList]);
+
+  const planInit = () => {
+    const planList = controlGpFltPlanList;
+    planList.forEach(plan => {
+      const areaList = plan.areaList;
+
+      areaList.forEach(area => {
+        const coordList = area.coordList; // 기초 좌표
+        const bufferList = area.bufferCoordList; // 기초 좌표의 버퍼 좌표
+        const bufferZone = area.bufferZone; // 반경 값
+        const areaType = area.areaType; // 도형 타입
+
+        const paths = [];
+        coordList.forEach(coord => {
+          const path = new naver.maps.LatLng(coord.lat, coord.lon);
+
+          paths.push(path);
+        });
+
+        const idntfNum = plan.arcrftList[0].idntfNum;
+        if (areaType === 'LINE') {
+          polyline(paths, bufferList, idntfNum);
+        }
+        if (areaType === 'POLYGON') {
+          //
+        }
+        if (areaType === 'CIRCLE') {
+          //
+        }
+      });
+    });
+  };
+
+  const polyline = (paths, bufferList, idntfNum) => {
+    if (paths && paths.length > 1) {
+      const line = new naver.maps.Polyline({
+        strokeLineCap: 'round',
+        strokeLineJoin: 'round',
+        strokeColor: '#283046',
+        strokeWeight: 1,
+        strokeOpacity: 0.5,
+        path: paths,
+        map: map
+      });
+      setAreaArr(prev => [...prev, { idntfNum: idntfNum, line: line }]);
+    }
+    if (bufferList && bufferList.length > 1) {
+      const paths = [];
+      bufferList.forEach(buffer => {
+        const path = new naver.maps.LatLng(buffer.lat, buffer.lon);
+
+        paths.push(path);
+      });
+
+      const lineBuffer = new naver.maps.Polygon({
+        strokeColor: '#283046',
+        strokeOpacity: 1,
+        fillColor: '#7367F0',
+        fillOpacity: 0.1,
+        paths: paths,
+        map: map
+      });
+
+      setBufferArr(prev => [
+        ...prev,
+        { idntfNum: idntfNum, lineBuffer: lineBuffer }
+      ]);
+    }
+  };
+
+  const clear = diffArr => {
+    if (areaArr) {
+      const clearArea = areaArr
+        .filter(area => diffArr.includes(area.idntfNum))
+        .map(obj => obj.line);
+
+      const clearBuffer = bufferArr
+        .filter(buffer => diffArr.includes(buffer.idntfNum))
+        .map(obj => obj.lineBuffer);
+
+      clearArea.map(area => area.setMap(null));
+      clearBuffer.map(buffer => buffer.setMap(null));
+
+      const saveArea = areaArr.filter(area => !diffArr.includes(area.idntfNum));
+      const saveBuffer = bufferArr.filter(
+        buffer => !diffArr.includes(buffer.idntfNum)
+      );
+      setAreaArr(saveArea);
+      setBufferArr(saveBuffer);
+      //   dispatch(controlGpFlightPlanInitAction());
+    }
+  };
+
+  return null;
+};
+
+export default NewDronPlan;