|
|
@ -9,6 +9,12 @@ import { |
|
|
|
} from '../../../../utility/DrawUtil'; |
|
|
|
} from '../../../../utility/DrawUtil'; |
|
|
|
import { drawTypeChangeAction } from '../../../../modules/control/map/actions/controlMapActions'; |
|
|
|
import { drawTypeChangeAction } from '../../../../modules/control/map/actions/controlMapActions'; |
|
|
|
import MapboxDraw from '@mapbox/mapbox-gl-draw'; |
|
|
|
import MapboxDraw from '@mapbox/mapbox-gl-draw'; |
|
|
|
|
|
|
|
import { |
|
|
|
|
|
|
|
CircleMode, |
|
|
|
|
|
|
|
DragCircleMode, |
|
|
|
|
|
|
|
DirectMode, |
|
|
|
|
|
|
|
SimpleSelectMode |
|
|
|
|
|
|
|
} from 'mapbox-gl-draw-circle'; |
|
|
|
|
|
|
|
|
|
|
|
export const LaancDrawControl = props => { |
|
|
|
export const LaancDrawControl = props => { |
|
|
|
const dispatch = useDispatch(); |
|
|
|
const dispatch = useDispatch(); |
|
|
@ -19,7 +25,6 @@ export const LaancDrawControl = props => { |
|
|
|
|
|
|
|
|
|
|
|
const [drawObjId, setDrawObjId] = useState(); |
|
|
|
const [drawObjId, setDrawObjId] = useState(); |
|
|
|
const [bufferId, setBufferId] = useState(); |
|
|
|
const [bufferId, setBufferId] = useState(); |
|
|
|
const [geojson, setGeoJson] = useState(); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const [isDrawDone, setIsDrawDone] = useState(false); |
|
|
|
const [isDrawDone, setIsDrawDone] = useState(false); |
|
|
|
|
|
|
|
|
|
|
@ -42,7 +47,9 @@ export const LaancDrawControl = props => { |
|
|
|
|
|
|
|
|
|
|
|
const DrawLineStringMode = MapboxDraw.modes.draw_line_string; |
|
|
|
const DrawLineStringMode = MapboxDraw.modes.draw_line_string; |
|
|
|
const DrawPolygonMode = MapboxDraw.modes.draw_polygon; |
|
|
|
const DrawPolygonMode = MapboxDraw.modes.draw_polygon; |
|
|
|
const modeArr = [DrawLineStringMode, DrawPolygonMode]; |
|
|
|
const DrawCircleMode = CircleMode; |
|
|
|
|
|
|
|
console.log(DrawCircleMode, '>>>>>>'); |
|
|
|
|
|
|
|
const modeArr = [DrawLineStringMode, DrawPolygonMode, DrawCircleMode]; |
|
|
|
|
|
|
|
|
|
|
|
modeArr.forEach(m => { |
|
|
|
modeArr.forEach(m => { |
|
|
|
m.onStop = state => handlerDblClickFinish(state); |
|
|
|
m.onStop = state => handlerDblClickFinish(state); |
|
|
@ -71,6 +78,15 @@ export const LaancDrawControl = props => { |
|
|
|
// 클릭할 때마다 마커 찍어줌
|
|
|
|
// 클릭할 때마다 마커 찍어줌
|
|
|
|
const handlerCustomOnClick = (state, e) => { |
|
|
|
const handlerCustomOnClick = (state, e) => { |
|
|
|
console.log('click'); |
|
|
|
console.log('click'); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const features = mapObject.queryRenderedFeatures(e.point, { |
|
|
|
|
|
|
|
layers: ['maine'] |
|
|
|
|
|
|
|
}); |
|
|
|
|
|
|
|
if (features.length > 0) { |
|
|
|
|
|
|
|
// console.log(features, '>>>>>관제권?');
|
|
|
|
|
|
|
|
// areaCoordList 컬럼 새로 만든거에 TRUE 머시기... 가 아니라 여기가 아님 일단은!! 노트 참고해!!!
|
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
const type = handlerReturnMode(drawObj.getMode()); |
|
|
|
const type = handlerReturnMode(drawObj.getMode()); |
|
|
|
const obj = state[type?.toLowerCase()]; |
|
|
|
const obj = state[type?.toLowerCase()]; |
|
|
|
|
|
|
|
|
|
|
@ -104,10 +120,20 @@ export const LaancDrawControl = props => { |
|
|
|
} |
|
|
|
} |
|
|
|
}; |
|
|
|
}; |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// 도형 그리기 완료 시
|
|
|
|
const handlerDblClickFinish = state => { |
|
|
|
const handlerDblClickFinish = state => { |
|
|
|
console.log('dblclick'); |
|
|
|
console.log('dblclick'); |
|
|
|
const mode = handlerReturnMode(drawObj.getMode()); |
|
|
|
const mode = handlerReturnMode(drawObj.getMode()); |
|
|
|
|
|
|
|
console.log(state, '>>>>>state'); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
if (mode === 'CIRCLE') { |
|
|
|
|
|
|
|
const data = { |
|
|
|
|
|
|
|
coord: state.polygon.properties.center, |
|
|
|
|
|
|
|
radius: state.polygon.properties.radiusInKm * 1000, |
|
|
|
|
|
|
|
id: state.polygon.id |
|
|
|
|
|
|
|
}; |
|
|
|
|
|
|
|
handlerAbnormalityCheck(data, mode); |
|
|
|
|
|
|
|
} else { |
|
|
|
const obj = state[mode.toLowerCase()]; |
|
|
|
const obj = state[mode.toLowerCase()]; |
|
|
|
console.log(obj, '>>>>>>obj'); |
|
|
|
console.log(obj, '>>>>>>obj'); |
|
|
|
const length = state.currentVertexPosition; |
|
|
|
const length = state.currentVertexPosition; |
|
|
@ -135,27 +161,63 @@ export const LaancDrawControl = props => { |
|
|
|
handlerRemoveError(obj.id); |
|
|
|
handlerRemoveError(obj.id); |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
handlerAbnormalityCheck(obj.coordinates, obj.id, mode); |
|
|
|
const data = { |
|
|
|
|
|
|
|
coord: obj.coordinates, |
|
|
|
|
|
|
|
id: obj.id |
|
|
|
}; |
|
|
|
}; |
|
|
|
|
|
|
|
handlerAbnormalityCheck(data, mode); |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// 도형 수정 시
|
|
|
|
|
|
|
|
const handlerUpdateSetting = e => { |
|
|
|
|
|
|
|
console.log('update'); |
|
|
|
|
|
|
|
|
|
|
|
// 변수들 이름 겹쳐서 헷갈리니까 정리하기
|
|
|
|
if (e.features[0]) { |
|
|
|
const handlerAbnormalityCheck = (coord, id, mode) => { |
|
|
|
const obj = e.features[0]; |
|
|
|
console.log('check', coord, id, mode); |
|
|
|
const mode = obj.properties.id; |
|
|
|
const isBreak = handlerIsSpecialFlight(coord, id, mode); |
|
|
|
const initCoord = obj.geometry.coordinates; |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// 폴리곤은 중첩좌표 제거해서 서버에 넘겨야함
|
|
|
|
|
|
|
|
if (mode === 'POLYGON') { |
|
|
|
|
|
|
|
initCoord[0].splice(-1); |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
const data = { |
|
|
|
|
|
|
|
coord: initCoord, |
|
|
|
|
|
|
|
id: obj.id |
|
|
|
|
|
|
|
}; |
|
|
|
|
|
|
|
handlerAbnormalityCheck(data, mode); |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// 모든 비정상상황 체크
|
|
|
|
|
|
|
|
const handlerAbnormalityCheck = (data, mode) => { |
|
|
|
|
|
|
|
const isBreak = handlerIsSpecialFlight(data, mode); |
|
|
|
if (isBreak) return; |
|
|
|
if (isBreak) return; |
|
|
|
|
|
|
|
|
|
|
|
const initCoord = coord; |
|
|
|
const initCoord = |
|
|
|
const coords = |
|
|
|
mode === 'LINE' |
|
|
|
mode === 'LINE' ? initCoord : mode === 'POLYGON' ? initCoord[0] : null; |
|
|
|
? data.coord |
|
|
|
handlerSaveAreaInfo(coords, mode); |
|
|
|
: mode === 'POLYGON' |
|
|
|
|
|
|
|
? data.coord[0] |
|
|
|
|
|
|
|
: mode === 'CIRCLE' |
|
|
|
|
|
|
|
? data.coord |
|
|
|
|
|
|
|
: null; |
|
|
|
|
|
|
|
console.log(data, '>>>>>'); |
|
|
|
|
|
|
|
console.log(initCoord, mode, '>>>>check'); |
|
|
|
|
|
|
|
handlerSaveAreaInfo(initCoord, mode); |
|
|
|
}; |
|
|
|
}; |
|
|
|
|
|
|
|
|
|
|
|
// 현재 그려진 모든 도형에 대한 비가시권 검사
|
|
|
|
// 현재 그려진 모든 도형에 대한 비가시권 검사
|
|
|
|
const handlerIsSpecialFlight = (coord, id, mode) => { |
|
|
|
const handlerIsSpecialFlight = (data, mode) => { |
|
|
|
// console.log(obj, 'specialFlight');
|
|
|
|
|
|
|
|
console.log('specialFlight'); |
|
|
|
console.log('specialFlight'); |
|
|
|
let isBreak = false; |
|
|
|
let isBreak = false; |
|
|
|
const coords = mode === 'LINE' ? coord : coord[0]; |
|
|
|
if (mode === 'CIRCLE') { |
|
|
|
|
|
|
|
if (data.radius > 1000) { |
|
|
|
|
|
|
|
isBreak = true; |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
} else { |
|
|
|
|
|
|
|
const coords = mode === 'LINE' ? data.coord : data.coord[0]; |
|
|
|
|
|
|
|
|
|
|
|
for (let point = 0; point < coords.length - 1; point++) { |
|
|
|
for (let point = 0; point < coords.length - 1; point++) { |
|
|
|
const distance = CalculateDistance(coords[point], coords[point + 1]); |
|
|
|
const distance = CalculateDistance(coords[point], coords[point + 1]); |
|
|
@ -164,9 +226,10 @@ export const LaancDrawControl = props => { |
|
|
|
break; |
|
|
|
break; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
} |
|
|
|
if (isBreak) { |
|
|
|
if (isBreak) { |
|
|
|
props.setModal(true); |
|
|
|
props.setModal(true); |
|
|
|
handlerRemoveError(id); |
|
|
|
handlerRemoveError(data.id); |
|
|
|
return true; |
|
|
|
return true; |
|
|
|
} else { |
|
|
|
} else { |
|
|
|
props.handlerSaveCheck(true); |
|
|
|
props.handlerSaveCheck(true); |
|
|
@ -181,19 +244,6 @@ export const LaancDrawControl = props => { |
|
|
|
props.handlerSaveCheck(false); |
|
|
|
props.handlerSaveCheck(false); |
|
|
|
}; |
|
|
|
}; |
|
|
|
|
|
|
|
|
|
|
|
// 도형 수정 시
|
|
|
|
|
|
|
|
const handlerUpdateSetting = e => { |
|
|
|
|
|
|
|
console.log('update'); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
if (e.features[0]) { |
|
|
|
|
|
|
|
const obj = e.features[0]; |
|
|
|
|
|
|
|
const mode = obj.properties.id; |
|
|
|
|
|
|
|
const initCoord = obj.geometry.coordinates; |
|
|
|
|
|
|
|
const coords = mode === 'LINE' ? initCoord : initCoord[0]; |
|
|
|
|
|
|
|
handlerAbnormalityCheck(coords, obj.id, mode); |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// areaInfo 셋팅
|
|
|
|
// areaInfo 셋팅
|
|
|
|
const handlerSaveAreaInfo = (coord, mode) => { |
|
|
|
const handlerSaveAreaInfo = (coord, mode) => { |
|
|
|
if (!coord || !mode) { |
|
|
|
if (!coord || !mode) { |
|
|
@ -240,46 +290,28 @@ export const LaancDrawControl = props => { |
|
|
|
}; |
|
|
|
}; |
|
|
|
|
|
|
|
|
|
|
|
// 버퍼 및 기존 도형 재생성
|
|
|
|
// 버퍼 및 기존 도형 재생성
|
|
|
|
// 해당되는 도형 및 마커만 다시 그려지게 해야함(버퍼 포함)
|
|
|
|
|
|
|
|
// 해당 Id 마커 지우고 path만 받아서 다시 그려지도록...
|
|
|
|
|
|
|
|
// 근데 areaCoordList[0]이.. 도형을 하나만 받아오는걸로 알고 있어서 그거 확인해야함
|
|
|
|
// 근데 areaCoordList[0]이.. 도형을 하나만 받아오는걸로 알고 있어서 그거 확인해야함
|
|
|
|
|
|
|
|
// 그리고 circle관련해서 create랑 update다시 작업해야함....
|
|
|
|
const handlerPastDraw = () => { |
|
|
|
const handlerPastDraw = () => { |
|
|
|
if (props.areaCoordList) { |
|
|
|
if (props.areaCoordList) { |
|
|
|
const areas = props.areaCoordList[0]; |
|
|
|
const obj = drawObj.getAll().features; |
|
|
|
|
|
|
|
const areas = props.areaCoordList; |
|
|
|
|
|
|
|
if (areas.length > 0 && obj.length > 0) { |
|
|
|
|
|
|
|
// console.log(obj, '>>>');
|
|
|
|
|
|
|
|
// console.log(areas, '>>>>areas');
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// areas -> 지도에 그려진 모든 구역 정보여야함
|
|
|
|
|
|
|
|
areas.forEach((area, idx) => { |
|
|
|
const paths = []; |
|
|
|
const paths = []; |
|
|
|
areas.coordList.forEach(coord => paths.push([coord.lon, coord.lat])); |
|
|
|
area.coordList.forEach(coord => paths.push([coord.lon, coord.lat])); |
|
|
|
|
|
|
|
if (area.areaType) { |
|
|
|
if (areas.areaType) { |
|
|
|
console.log('pastDraw', area); |
|
|
|
console.log('pastDraw'); |
|
|
|
if (area.areaType === 'LINE') { |
|
|
|
const drawGeoJson = drawObj.getAll(); |
|
|
|
|
|
|
|
if (areas.areaType === 'CIRCLE') { |
|
|
|
|
|
|
|
const coord = handlerGetCircleCoord(paths[0], areas.bufferZone); |
|
|
|
|
|
|
|
handlerCreateDrawObj( |
|
|
|
|
|
|
|
drawObjId, |
|
|
|
|
|
|
|
setDrawObjId, |
|
|
|
|
|
|
|
'Polygon', |
|
|
|
|
|
|
|
{ |
|
|
|
|
|
|
|
path: coord, |
|
|
|
|
|
|
|
center: paths[0], |
|
|
|
|
|
|
|
radius: areas.bufferZone |
|
|
|
|
|
|
|
}, |
|
|
|
|
|
|
|
'CIRCLE' |
|
|
|
|
|
|
|
); |
|
|
|
|
|
|
|
} else { |
|
|
|
|
|
|
|
if (areas.areaType === 'LINE') { |
|
|
|
|
|
|
|
// handlerCreateDrawObj(
|
|
|
|
|
|
|
|
// drawObjId,
|
|
|
|
|
|
|
|
// setDrawObjId,
|
|
|
|
|
|
|
|
// 'LineString',
|
|
|
|
|
|
|
|
// { path: paths },
|
|
|
|
|
|
|
|
// 'LINE'
|
|
|
|
|
|
|
|
// );
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// 버퍼 생성
|
|
|
|
// 버퍼 생성
|
|
|
|
if (areas.bufferCoordList) { |
|
|
|
if (area.bufferCoordList) { |
|
|
|
const bufferPaths = []; |
|
|
|
const bufferPaths = []; |
|
|
|
|
|
|
|
|
|
|
|
areas.bufferCoordList.forEach(bfCoord => |
|
|
|
area.bufferCoordList.forEach(bfCoord => |
|
|
|
bufferPaths.push([bfCoord.lon, bfCoord.lat]) |
|
|
|
bufferPaths.push([bfCoord.lon, bfCoord.lat]) |
|
|
|
); |
|
|
|
); |
|
|
|
|
|
|
|
|
|
|
@ -291,22 +323,20 @@ export const LaancDrawControl = props => { |
|
|
|
'BUFFER' |
|
|
|
'BUFFER' |
|
|
|
); |
|
|
|
); |
|
|
|
} |
|
|
|
} |
|
|
|
} else if (areas.areaType === 'POLYGON') { |
|
|
|
} else if (area.areaType === 'POLYGON') { |
|
|
|
// handlerCreateDrawObj(
|
|
|
|
paths.push(paths[0]); |
|
|
|
// drawObjId,
|
|
|
|
|
|
|
|
// setDrawObjId,
|
|
|
|
|
|
|
|
// 'Polygon',
|
|
|
|
|
|
|
|
// { path: [paths] },
|
|
|
|
|
|
|
|
// 'POLYGON'
|
|
|
|
|
|
|
|
// );
|
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
} |
|
|
|
} |
|
|
|
// 현재 그려진 도형 저장
|
|
|
|
const currentObj = obj.filter(o => o.properties.id !== 'BUFFER'); |
|
|
|
setGeoJson(drawGeoJson); |
|
|
|
currentObj.forEach(obj => { |
|
|
|
|
|
|
|
handlerRemoveGroupMarker(obj.id); |
|
|
|
|
|
|
|
|
|
|
|
// 마커 재 생성
|
|
|
|
const initCoord = obj.geometry.coordinates; |
|
|
|
// handlerRemoveMarker();
|
|
|
|
const coord = |
|
|
|
// handlerCreateAllMarker(paths);
|
|
|
|
obj.properties.id === 'LINE' ? initCoord : initCoord[0]; |
|
|
|
|
|
|
|
handlerCreateGroupMarker(coord, obj.id); |
|
|
|
|
|
|
|
}); |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
}); |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
}; |
|
|
|
}; |
|
|
@ -338,7 +368,7 @@ export const LaancDrawControl = props => { |
|
|
|
}; |
|
|
|
}; |
|
|
|
|
|
|
|
|
|
|
|
// 지도에 있는 모든 마커 삭제
|
|
|
|
// 지도에 있는 모든 마커 삭제
|
|
|
|
const handlerRemoveMarker = () => { |
|
|
|
const handlerRemoveAllMarker = () => { |
|
|
|
const ele = document.getElementsByClassName('mapboxgl-popup'); |
|
|
|
const ele = document.getElementsByClassName('mapboxgl-popup'); |
|
|
|
const eleArr = Array.from(ele); |
|
|
|
const eleArr = Array.from(ele); |
|
|
|
eleArr?.forEach(marker => marker.remove()); |
|
|
|
eleArr?.forEach(marker => marker.remove()); |
|
|
@ -365,28 +395,28 @@ export const LaancDrawControl = props => { |
|
|
|
.addTo(mapObject); |
|
|
|
.addTo(mapObject); |
|
|
|
}; |
|
|
|
}; |
|
|
|
|
|
|
|
|
|
|
|
// 모든 마커 생성
|
|
|
|
// 해당되는 id의 마커 생성
|
|
|
|
const handlerCreateAllMarker = coords => { |
|
|
|
const handlerCreateGroupMarker = (coords, id) => { |
|
|
|
const areas = props.areaCoordList[0]; |
|
|
|
const areas = props.areaCoordList[0]; |
|
|
|
|
|
|
|
|
|
|
|
if (areas.areaType !== 'CIRCLE') { |
|
|
|
if (areas.areaType !== 'CIRCLE') { |
|
|
|
for (let i = 0; i < coords.length; i++) { |
|
|
|
for (let i = 0; i < coords.length; i++) { |
|
|
|
if (i === 0) { |
|
|
|
if (i === 0) { |
|
|
|
handlerCreateOneMarker([0, -10], coords[i], 'Start'); |
|
|
|
handlerCreateOneMarker([0, -10], coords[i], 'Start', id); |
|
|
|
} else { |
|
|
|
} else { |
|
|
|
const lngLat = handlerGetMidPoint(coords[i - 1], coords[i]); |
|
|
|
const lngLat = handlerGetMidPoint(coords[i - 1], coords[i]); |
|
|
|
const text = CalculateDistance(coords[i - 1], coords[i]); |
|
|
|
const text = CalculateDistance(coords[i - 1], coords[i]); |
|
|
|
handlerCreateOneMarker([0, 0], lngLat, text); |
|
|
|
handlerCreateOneMarker([0, 0], lngLat, text, id); |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} else { |
|
|
|
} else { |
|
|
|
handlerCreateOneMarker([0, -10], coords[0], areas.bufferZone); |
|
|
|
handlerCreateOneMarker([0, -10], coords[0], areas.bufferZone, id); |
|
|
|
} |
|
|
|
} |
|
|
|
}; |
|
|
|
}; |
|
|
|
|
|
|
|
|
|
|
|
const drawInit = () => { |
|
|
|
const drawInit = () => { |
|
|
|
// drawObj.deleteAll();
|
|
|
|
// drawObj.deleteAll();
|
|
|
|
// handlerRemoveMarker();
|
|
|
|
// handlerRemoveAllMarker();
|
|
|
|
props.handlerSaveCheck(false); |
|
|
|
props.handlerSaveCheck(false); |
|
|
|
setDrawObjId(); |
|
|
|
setDrawObjId(); |
|
|
|
|
|
|
|
|
|
|
@ -395,7 +425,7 @@ export const LaancDrawControl = props => { |
|
|
|
const mode = mapControl.drawType; |
|
|
|
const mode = mapControl.drawType; |
|
|
|
if (!mode || mode === 'RESET') { |
|
|
|
if (!mode || mode === 'RESET') { |
|
|
|
drawObj.deleteAll(); |
|
|
|
drawObj.deleteAll(); |
|
|
|
handlerRemoveMarker(); |
|
|
|
handlerRemoveAllMarker(); |
|
|
|
return; |
|
|
|
return; |
|
|
|
} |
|
|
|
} |
|
|
|
handlerStartMode(mode); |
|
|
|
handlerStartMode(mode); |
|
|
|