diff --git a/src/assets/images/uam_icon.png b/src/assets/images/uam_icon.png
new file mode 100644
index 00000000..3bbee79e
Binary files /dev/null and b/src/assets/images/uam_icon.png differ
diff --git a/src/assets/images/uam_icon_purple.png b/src/assets/images/uam_icon_purple.png
new file mode 100644
index 00000000..e41099fe
Binary files /dev/null and b/src/assets/images/uam_icon_purple.png differ
diff --git a/src/components/map/naver/NaverMap.js b/src/components/map/naver/NaverMap.js
index e8a4660e..24fd8cae 100644
--- a/src/components/map/naver/NaverMap.js
+++ b/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 = () => {
<>
-
+ {/* */}
+
-
+ /> */}
+ {/* */}
diff --git a/src/components/map/naver/dron/DronMarker.js b/src/components/map/naver/dron/DronMarker.js
index fd6a506a..d5f628ec 100644
--- a/src/components/map/naver/dron/DronMarker.js
+++ b/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: ``,
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: ``,
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(controlGpFlightPlanAction.request(idntfNum));
+ // dispatch(controlGpDtlAction.request(controlId));
+ // dispatch(controlGpFlightPlanAction.request(idntfNum));
};
//마커를 삭제 한다.
diff --git a/src/components/map/naver/dron/NewDronHistroy.js b/src/components/map/naver/dron/NewDronHistroy.js
new file mode 100644
index 00000000..5be9d0bd
--- /dev/null
+++ b/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;
+};
diff --git a/src/components/map/naver/dron/NewDronPlan.js b/src/components/map/naver/dron/NewDronPlan.js
new file mode 100644
index 00000000..97dc98a3
--- /dev/null
+++ b/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;