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

[비행 구역] 기촤 좌표 create 작업

pull/2/head
노승철 2 years ago
parent
51a5d5f61c
commit
911bec8583
4 changed files with 126 additions and 141 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 4
      src/components/basis/flight/plan/FlightPlanAreaDetailForm.js
  2. 45
      src/components/basis/flight/plan/FlightPlanAreaMap.js
  3. 212
      src/components/map/naver/draw/FlightPlanDrawTest.js
  4. 6
      src/containers/basis/flight/plan/FlightPlanAreaDetailContainer.js

4
src/components/basis/flight/plan/FlightPlanAreaDetailForm.js
Unescape View File

@ -46,7 +46,7 @@ const FlightPlanAreaDetailForm = ({ handleSave, handleClose, handleChange, data
const latlon = coord.lat + ' / ' + coord.lon; const latlon = coord.lat + ' / ' + coord.lon;
return ( return (
<Col key={idx} className='list-input' lg={4} md={6} sm={12}> <Col key={idx} className='list-input' lg={6} md={6} sm={12}>
<FormGroup> <FormGroup>
<Label for='test'><span className='necessary'>*</span>좌표 {idx+1} </Label> <Label for='test'><span className='necessary'>*</span>좌표 {idx+1} </Label>
<Input <Input
@ -62,7 +62,7 @@ const FlightPlanAreaDetailForm = ({ handleSave, handleClose, handleChange, data
) )
}) })
: :
<Col className='list-input' lg={4} md={6} sm={12}> <Col className='list-input' lg={6} md={6} sm={12}>
<FormGroup> <FormGroup>
<Label for='test'><span className='necessary'>*</span>좌표 1</Label> <Label for='test'><span className='necessary'>*</span>좌표 1</Label>
<Input <Input

45
src/components/basis/flight/plan/FlightPlanAreaMap.js
Unescape View File

@ -15,7 +15,6 @@ import { drawTypeChangeAction, drawCheckAction } from '../../../../modules/contr
import { FlightPlanDrawTest } from '../../../map/naver/draw/FlightPlanDrawTest'; import { FlightPlanDrawTest } from '../../../map/naver/draw/FlightPlanDrawTest';
import { initFlight, initFlightBas } from '../../../../modules/basis/flight/models/basisFlightModel'; import { initFlight, initFlightBas } from '../../../../modules/basis/flight/models/basisFlightModel';
import { AREA_COORDINATE_LIST_SAVE } from '../../../../modules/basis/flight/actions/basisFlightAction'; import { AREA_COORDINATE_LIST_SAVE } from '../../../../modules/basis/flight/actions/basisFlightAction';
import { VscDebugBreakpointLogUnverified } from 'react-icons/vsc';
const FlightPlanAreaMap = (props) => { const FlightPlanAreaMap = (props) => {
const dispatch = useDispatch(); const dispatch = useDispatch();
@ -23,21 +22,22 @@ const FlightPlanAreaMap = (props) => {
const airArea = props.airArea; const airArea = props.airArea;
const mapControl = useSelector(state => state.controlMapReducer); const mapControl = useSelector(state => state.controlMapReducer);
const { areaCoordList } = useSelector(state => state.flightState);
const [map, setMap] = useState(); const [map, setMap] = useState();
const [isMapLoad, setIsMapLoad] = useState(false); const [isMapLoad, setIsMapLoad] = useState(false);
const [mode, setMode] = useState(); const [mode, setMode] = useState();
const [areaCoordList, setAreaCoordList] = useState(initFlightBas.initDetail.areaList); const [mapAreaCoordList, setMapAreaCoordList] = useState(initFlightBas.initDetail.areaList);
useEffect(() => { useEffect(() => {
NaverMapInit(); NaverMapInit();
}, []); }, []);
useEffect(() => { useEffect(() => {
setIsMapLoad(true); setIsMapLoad(true);
}, [airArea]); }, [airArea]);
useEffect(() => { useEffect(() => {
ModeInit(); ModeInit();
}, [mapControl.drawType]) }, [mapControl.drawType])
@ -68,21 +68,28 @@ const FlightPlanAreaMap = (props) => {
const handlerDrawCheck = val => { const handlerDrawCheck = val => {
dispatch(drawCheckAction(val)); dispatch(drawCheckAction(val));
}; };
const handleCoordinates = (coords, radius) => { const handleInitCoordinates = () => {
dispatch(AREA_COORDINATE_LIST_SAVE(null))
}
const handleCoordinates = (areaInfo) => {
const initAreaList = Object.assign([], initFlightBas.initDetail.areaList); const initAreaList = Object.assign([], initFlightBas.initDetail.areaList);
const coordList = []; const coordList = [];
// radius = 10; // radius = 10;
coords.forEach((c, i) => { areaInfo.coordinates.forEach((c, i) => {
const coord = Object.assign({}, initFlightBas['coord']); const coord = Object.assign({}, initFlightBas['coord']);
coord.lat = c._lat; coord.lat = c.lat;
coord.lon = c._lng; coord.lon = c.lon;
coordList.push(coord); coordList.push(coord);
}); });
initAreaList[0].bufferZone = areaInfo.bufferZone;
initAreaList[0].areaType = areaInfo.areaType;
const areaList = initAreaList.map((area, i) => { const areaList = initAreaList.map((area, i) => {
return { return {
@ -92,7 +99,7 @@ const FlightPlanAreaMap = (props) => {
}) })
// dispatch(AREA_COORDINATE_LIST_SAVE(areaList)) // dispatch(AREA_COORDINATE_LIST_SAVE(areaList))
setAreaCoordList(areaList); setMapAreaCoordList(areaList);
} }
return ( return (
@ -108,17 +115,19 @@ const FlightPlanAreaMap = (props) => {
<div style={{ position: 'relative' }}> <div style={{ position: 'relative' }}>
<div id="map" style={{ width: '100%', height: '60vh' }}> <div id="map" style={{ width: '100%', height: '60vh' }}>
<FlightPlanDrawTest {isMapLoad ? <FlightPlanDrawTest
map={map} map={map}
naver={naver} naver={naver}
mode={mode} mode={mode}
handleCoordinates={handleCoordinates} areaCoordList={areaCoordList}
/> handleCoordinates={handleCoordinates}
handleInitCoordinates={handleInitCoordinates}
/> : null}
<Button.Ripple <Button.Ripple
color='primary' color='primary'
className='area-button' className='area-button'
onClick = {e => props.handleConfirm(areaCoordList)} onClick = {e => props.handleConfirm(mapAreaCoordList)}
> >
확인 확인
</Button.Ripple> </Button.Ripple>

212
src/components/map/naver/draw/FlightPlanDrawTest.js
Unescape View File

@ -61,13 +61,9 @@ export const FlightPlanDrawTest = props => {
drawInit(); drawInit();
}, [mapControl.drawType]) }, [mapControl.drawType])
const handlerDrawType = val => { useEffect(() => {
dispatch(drawTypeChangeAction(val)); // handleDetailDrwa();
}; }, [])
// useEffect(() => {
// onClickCheck();
// }, [mapControl.drawCheck])
const zoomChange = () => { const zoomChange = () => {
let change; let change;
@ -83,7 +79,7 @@ export const FlightPlanDrawTest = props => {
} }
} }
const drawInit = () => { const drawInit = () => {
if(mapControl.drawType==='LINE') { if(mapControl.drawType==='LINE') {
onClickButton('LINE'); onClickButton('LINE');
} else if(mapControl.drawType==='CIRCLE') { } else if(mapControl.drawType==='CIRCLE') {
@ -91,13 +87,12 @@ export const FlightPlanDrawTest = props => {
} else if(mapControl.drawType==='POLYGON') { } else if(mapControl.drawType==='POLYGON') {
onClickButton('POLYGON'); onClickButton('POLYGON');
} else if(mapControl.drawType==='RESET') { } else if(mapControl.drawType==='RESET') {
onClickButton('RESET') // onClickReset('RESET')
} }
} }
const onClickButton = (newMode) => { const onClickButton = (newMode) => {
console.log('onClickButton'); console.log('onClickButton');
if(newMode === 'RESET') return false;
zoomChange(); zoomChange();
@ -116,16 +111,13 @@ export const FlightPlanDrawTest = props => {
const clearMode = (mode) => { const clearMode = (mode) => {
console.log('clearMode') console.log('clearMode')
if(!mode) return; if(!mode) return;
if (mode === 'LINE') { if (mode === 'LINE') {
if(pastPolyline) { if(pastPolyline) {
pastPolyline.setMap(null); pastPolyline.setMap(null);
setPolyline();
pastBuffer.setMap(null);
setBuffer();
pastDragCircle.forEach(prev => prev.setMap(null)); pastDragCircle.forEach(prev => prev.setMap(null));
setDragCircle([]); setDragCircle([]);
} }
} else if(mode === 'POLYGON') { } else if(mode === 'POLYGON') {
@ -133,16 +125,18 @@ export const FlightPlanDrawTest = props => {
pastPolygon.setMap(null); pastPolygon.setMap(null);
setPolygon(); setPolygon();
pastDragCircle.forEach(prev => prev.setMap(null)); pastDragCircle.forEach(prev => prev.setMap(null));
setDragCircle([]); setDragCircle([]);
} }
} else if(mode === 'CIRCLE') { } else if(mode === 'CIRCLE') {
if(pastCircle) { if(pastCircle) {
pastCircle.setMap(null); pastCircle.setMap(null);
setCircle(); setCircle();
naver.maps.Event.removeListener(pastEve); naver.maps.Event.removeListener(pastEve);
} }
} }
finishDraw();
finishDraw();
props.handleInitCoordinates();
} }
const startMode = (mode) => { const startMode = (mode) => {
@ -203,22 +197,10 @@ export const FlightPlanDrawTest = props => {
dragCircleEve.push(naver.maps.Event.addListener(dragCircle[index], 'mousedown', function() { onMouseDownDrag(index) })) dragCircleEve.push(naver.maps.Event.addListener(dragCircle[index], 'mousedown', function() { onMouseDownDrag(index) }))
} }
setDragCircle(dragCircle); setDragCircle(dragCircle);
setPolyline(polyline);
setAreaInfo(polypaths);
//파싱
// let polypathJSON = new Array();
// for(let i = 0; i< polypaths.length; i++) {
// let obj = new Object();
// obj.x = '' + polypaths[i]._lng + '';
// obj.y = '' + polypaths[i]._lat + '';
// obj = JSON.stringify(obj);
// polypathJSON.push(JSON.parse(obj));
// }
// console.log(polypathJSON, 'json polyline path');
// bufferMove();
// bufferTest();
props.handleCoordinates(polypaths);
} else { } else {
polyline.setMap(null); polyline.setMap(null);
polyline = ''; polyline = '';
@ -266,7 +248,7 @@ export const FlightPlanDrawTest = props => {
map: map map: map
}); });
// lastDistance = guideline.getDistance(); // lastDistance = guideline.getDistance();
//실제 사용되는 라인 //실제 사용되는 라인
polyline = new naver.maps.Polyline({ polyline = new naver.maps.Polyline({
strokeLineCap: 'round', strokeLineCap: 'round',
@ -370,7 +352,7 @@ export const FlightPlanDrawTest = props => {
clickable: true clickable: true
}); });
Eve.mousedownEve = naver.maps.Event.addListener(circle, 'mousedown', function() { onMouseDownDrag(0); }) Eve.mousedownEve = naver.maps.Event.addListener(circle, 'mousedown', function() { onMouseDownDrag(0); })
} else { } else {
circle.setRadius(100); circle.setRadius(100);
circle.setCenter(coord); circle.setCenter(coord);
@ -481,7 +463,7 @@ export const FlightPlanDrawTest = props => {
if(polygon) { if(polygon) {
var path = polygon.getPath()._array; var path = polygon.getPath()._array;
setPolygon(polygon); setPolygon(polygon);
setAreaInfo(path, ''); // setAreaInfo(path, '');
} }
$(document).off('mousemove.measure'); $(document).off('mousemove.measure');
@ -498,35 +480,46 @@ export const FlightPlanDrawTest = props => {
} }
const setAreaInfo = (path, bufferpath) => { const setAreaInfo = (path, bufferpath) => {
areaInfo = ''; areaInfo = {
coordinates : [],
bufferZone: 0,
};
let prePath = [];
if(path) {
path.forEach((item) => {
const p = {
lat: item.y,
lon: item.x
}
if(path) { prePath.push(p);
let prePath = []; })
path.forEach(prev=> prePath.push([prev.x, prev.y])) // path.forEach(prev=> prePath.push([prev.x, prev.y]))
} }
if(polyline) { if(polyline) {
areaInfo = { areaInfo.coordinates = prePath;
linepath: prePath, areaInfo.areaType = 'LINE';
linebuffer: 50,
bufferpath: bufferpath
}
} else if(polygon) { } else if(polygon) {
areaInfo = { areaInfo.coordinates = prePath;
polygonpath: prePath areaInfo.areaType = 'POLYGON';
} } else if(circle) {
} else if(circle) { const point = {
areaInfo = { lat: circle.getCenter().y,
center: circle.getCenter(), lon: circle.getCenter().x
radius: circle.getRadius()
} }
areaInfo.coordinates.push(point);
areaInfo.bufferZone = circle.getRadius();
areaInfo.areaType = 'CIRCLE';
} }
console.log(areaInfo, 'areaInfo') props.handleCoordinates(areaInfo);
// console.log(areaInfo, 'areaInfo')
} }
const bufferTest = () => { const bufferTest = () => {
let pol = polyline.getPath()._array; //latlng point 다 준건가? let pol = polyline.getPath()._array; //latlng point 다 준건가?
// console.log(pol)
let lineStringPaths = []; let lineStringPaths = [];
for(let i = 0; i< pol.length; i++) { for(let i = 0; i< pol.length; i++) {
@ -563,8 +556,7 @@ export const FlightPlanDrawTest = props => {
bufferRadius bufferRadius
) )
const bufferResultGeoJSON = new GeoJSONWriter().write(bufferResult) const bufferResultGeoJSON = new GeoJSONWriter().write(bufferResult)
// console.log(bufferResultGeoJSON)
// bufferPolyline = new naver.maps.Polyline({ // bufferPolyline = new naver.maps.Polyline({
// strokeColor: '#ff0000', // strokeColor: '#ff0000',
@ -636,8 +628,7 @@ export const FlightPlanDrawTest = props => {
const writer = new GeoJSONWriter(); const writer = new GeoJSONWriter();
const distance = (100 * 0.001) / 111.12; //100미터 const distance = (100 * 0.001) / 111.12; //100미터
const line = reader.read(coords); const line = reader.read(coords);
// const buffer = BufferOp.bufferOp(line, distance);
const buffer = BufferOp.bufferOp(line, distance, 0, 3); const buffer = BufferOp.bufferOp(line, distance, 0, 3);
let bufferpath = buffer._shell._points._coordinates; let bufferpath = buffer._shell._points._coordinates;
@ -654,71 +645,62 @@ export const FlightPlanDrawTest = props => {
strokeWeight: 2, strokeWeight: 2,
strokeStyle: [4, 4], strokeStyle: [4, 4],
strokeOpacity: 1, strokeOpacity: 1,
path : bufferPaths, path : bufferPaths,
// path: [
// ],
map: map map: map
}); });
// setAreaInfo(polyline.getPath()._array, bufferPath); // setAreaInfo(polyline.getPath()._array, bufferPath);
setAreaInfo(polyline.getPath()._array, bufferPaths); setAreaInfo(polyline.getPath()._array, bufferPaths);
setPolyline(polyline); setPolyline(polyline);
setBuffer(bufferPolyline) setBuffer(bufferPolyline)
} }
const onClickCheck = () => { const onClickReset = () => {
console.log('onClickReset') if(mapControl.drawType === 'RESET') {
// if(!mapControl.drawType) return;
if(mapControl.drawCheck === 'RESET') {
clearMode(mode); clearMode(mode);
mode = newMode; }
}
startMode(newMode);
// removeListener(); const handleDetailDrwa = () => {
// if(polyline) {
// polyline.setMap(null); if (props.areaCoordList) {
// polyline = ''; const areas = props.areaCoordList[0];
// guideline.setMap(null); if(areas.areaType && areas.areaType === 'LINE') {
// guideline = ''; const paths = [];
// bufferPolyline.setMap(null);
// bufferPolyline = ''; areas.coordList.forEach((coord) => {
// } const path = new naver.maps.LatLng(coord.lat, coord.lon)
// if(polygon) {
// console.log(polygon) paths.push(path);
// polygon.setMap(null); })
// polygon = '';
// } polyline = new naver.maps.Polyline({
// if(circle) { strokeLineCap: 'round',
// circle.setMap(null); strokeLineJoin: 'round',
// circle = ''; strokeColor: '#283046',
// radiusline.setMap(null); strokeWeight: 3,
// radiusline = ''; strokeOpacity: 1,
// } path: paths,
map: map
});
setPolyline(polyline)
// $(document).on('mousemove.measure', function(e) { onMouseMovePolyline(e); });
}
if(areas.areaType && areas.areaType === 'PLOYGON') {
}
if(areas.areaType && areas.areaType === 'CIRCLE') {
}
} }
} }
return ( return (
<> <>
{/* <Button.Ripple
color='primary'
className='area-button'
onClick = {props.openModal}
>
확인
</Button.Ripple>
<Button.Ripple
color='primary'
className='area-button'
// onClick = {e => handlerDrawCheck('RESET')}
onClick={e => handlerDrawType('RESET')}
>
초기화
</Button.Ripple> */}
</> </>
); );
}; };

6
src/containers/basis/flight/plan/FlightPlanAreaDetailContainer.js
Unescape View File

@ -17,12 +17,6 @@ const FlightPlanAreaDetailContainer = ({ handleModal }) => {
} }
const handleSave = () => { const handleSave = () => {
if(areaDetail[0].coordList.length <= 1) {
alert('영역을 생성해주세요.');
return false;
}
const resultAreaDetail = areaDetail.map((area, i) => { const resultAreaDetail = areaDetail.map((area, i) => {
return { return {
...area, ...area,

Write Preview
Loading…
Cancel
Save