pav
/
pav-fe-kac
12
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

laanc 비행구역 circle에러 수정 중

pull/2/head
junh_eee(이준희) 11 months ago
parent
c7cdc701bf
commit
c61b836781
1 changed files with 157 additions and 127 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 196
      src/components/map/mapbox/draw/LaancDrawControl.js

196
src/components/map/mapbox/draw/LaancDrawControl.js
Unescape View File

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

Write Preview
Loading…
Cancel
Save