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;