junh_eee(이준희)
2 years ago
10 changed files with 348 additions and 33 deletions
@ -0,0 +1,180 @@
|
||||
import { useEffect, useState } from 'react'; |
||||
import { useSelector } from 'react-redux'; |
||||
|
||||
|
||||
const DronPlan = ({ naver, map }) => { |
||||
const { controlGpList } = useSelector(state => state.controlGpState); |
||||
const { controlGpFltPlanList } = useSelector(state => state.controlGpFltPlanState); |
||||
const { objectId, isClickObject } = useSelector(state => state.controlMapReducer); |
||||
|
||||
const [area, setArea] = useState(); // 비행 구역 관리
|
||||
const [buffer, setBuffer] = useState(); // 버퍼 구역 관리
|
||||
const [controlId, setControlId] = useState(); // 식별번호 저장
|
||||
|
||||
useEffect(() => { |
||||
if (controlGpFltPlanList) { |
||||
init();
|
||||
} |
||||
}, [controlGpFltPlanList]) |
||||
|
||||
useEffect(() => {
|
||||
if (!isClickObject) { |
||||
|
||||
// 관제 종료시 영역 초기화.
|
||||
clear(); |
||||
|
||||
} else { |
||||
setControlId(objectId); |
||||
} |
||||
|
||||
}, [objectId ,isClickObject]); |
||||
|
||||
useEffect(() => { |
||||
// 구역 대상의 드론 데이터가 지도 상에 존재하고 있는지 체크해야 한다. (없을 경우 영역 제거)
|
||||
if(controlId && isClickObject) {
|
||||
if (controlGpList) {
|
||||
const isExist = controlGpList.find(data => data.controlId === controlId) |
||||
|
||||
if(!isExist) { |
||||
clear(); |
||||
} |
||||
}
|
||||
} |
||||
}, [controlGpList]) |
||||
|
||||
|
||||
/* 비행 구역 그리기. */ |
||||
const init = () => { |
||||
if(area) { |
||||
area.setMap(null); |
||||
} |
||||
|
||||
/* 좌표 추출 */ |
||||
const planList = controlGpFltPlanList; |
||||
planList.forEach(plan => { |
||||
|
||||
const areaList = plan.areaList; |
||||
|
||||
// 구역 정보는 계획서당 1개만 존재
|
||||
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); |
||||
}); |
||||
|
||||
clear(); |
||||
|
||||
if (areaType === 'LINE') { |
||||
polyline(paths, bufferList); |
||||
} |
||||
|
||||
if (areaType === 'POLYGON') { |
||||
polygon(paths); |
||||
} |
||||
|
||||
if (areaType === 'CIRCLE') { |
||||
circle(paths, bufferZone); |
||||
} |
||||
|
||||
}); |
||||
}) |
||||
} |
||||
|
||||
/* Polyline Create */ |
||||
const polyline = (paths, bufferList) => {
|
||||
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 |
||||
}); |
||||
|
||||
setArea(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 |
||||
}); |
||||
|
||||
setBuffer(lineBuffer); |
||||
} |
||||
} |
||||
|
||||
/* Polygon Create */
|
||||
const polygon = (paths) => {
|
||||
if (paths && paths.length > 1) { |
||||
const poly = new naver.maps.Polygon({ |
||||
strokeColor: '#283046', |
||||
strokeOpacity: 1, |
||||
fillColor: '#7367F0', |
||||
fillOpacity: 0.1, |
||||
paths: paths, |
||||
map: map |
||||
}); |
||||
|
||||
setArea(poly); |
||||
}
|
||||
} |
||||
|
||||
/* Circle Create */ |
||||
const circle = (paths, bufferZone) => { |
||||
|
||||
if (paths[0].lat !== 0 && paths[0].lon !== 0) { |
||||
const circle = new naver.maps.Circle({ |
||||
strokeColor: '#283046', |
||||
strokeOpacity: 1,
|
||||
fillColor: '#7367F0', |
||||
fillOpacity: 0.1, |
||||
center: paths[0], |
||||
radius: bufferZone, |
||||
map: map, |
||||
clickable: true |
||||
}); |
||||
|
||||
setArea(circle); |
||||
} |
||||
} |
||||
|
||||
/* 구역 초기화 */ |
||||
const clear = () => { |
||||
|
||||
if(area) { |
||||
area.setMap(null); |
||||
|
||||
setArea(); |
||||
if(buffer) { |
||||
buffer.setMap(null); |
||||
setBuffer(); |
||||
} |
||||
} |
||||
} |
||||
|
||||
|
||||
return null; |
||||
} |
||||
|
||||
export default DronPlan; |
||||
Loading…
Reference in new issue