From 0cb2f2e16fe02efb13edf76dc344c5101736be89 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?junh=5Feee=28=EC=9D=B4=EC=A4=80=ED=9D=AC=29?= Date: Tue, 16 May 2023 10:11:29 +0900 Subject: [PATCH] =?UTF-8?q?=EB=93=9C=EB=A1=A0=20=EC=95=84=EC=9D=B4?= =?UTF-8?q?=EC=BD=98=20=EB=B3=80=EA=B2=BD=20=EB=B0=8F=20=EA=B4=80=EC=A0=9C?= =?UTF-8?q?=20=EB=B9=84=ED=96=89=EA=B2=BD=EB=A1=9C=20=ED=95=AD=EC=83=81=20?= =?UTF-8?q?=ED=91=9C=EC=B6=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/assets/images/uam_icon.png | Bin 0 -> 1819 bytes src/assets/images/uam_icon_purple.png | Bin 0 -> 1820 bytes src/components/map/naver/NaverMap.js | 15 +- src/components/map/naver/dron/DronMarker.js | 15 +- .../map/naver/dron/NewDronHistroy.js | 66 +++++++++ src/components/map/naver/dron/NewDronPlan.js | 131 ++++++++++++++++++ 6 files changed, 219 insertions(+), 8 deletions(-) create mode 100644 src/assets/images/uam_icon.png create mode 100644 src/assets/images/uam_icon_purple.png create mode 100644 src/components/map/naver/dron/NewDronHistroy.js create mode 100644 src/components/map/naver/dron/NewDronPlan.js diff --git a/src/assets/images/uam_icon.png b/src/assets/images/uam_icon.png new file mode 100644 index 0000000000000000000000000000000000000000..3bbee79e75075031e40b4f4515b2887e2768c8b8 GIT binary patch literal 1819 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 LkAf?Bi?aR&lEK@~ literal 0 HcmV?d00001 diff --git a/src/components/map/naver/NaverMap.js b/src/components/map/naver/NaverMap.js index e8a4660..24fd8ca 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 fd6a506..d5f628e 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 0000000..5be9d0b --- /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 0000000..97dc98a --- /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;