-
+ mode={mode}
+ areaCoordList={areaCoordList}
+ handleCoordinates={handleCoordinates}
+ handleInitCoordinates={handleInitCoordinates}
+ /> : null}
props.handleConfirm(areaCoordList)}
+ onClick = {e => props.handleConfirm(mapAreaCoordList)}
>
확인
diff --git a/src/components/map/naver/draw/FlightPlanDrawTest.js b/src/components/map/naver/draw/FlightPlanDrawTest.js
index 95e19e0c..20ff445a 100644
--- a/src/components/map/naver/draw/FlightPlanDrawTest.js
+++ b/src/components/map/naver/draw/FlightPlanDrawTest.js
@@ -61,13 +61,9 @@ export const FlightPlanDrawTest = props => {
drawInit();
}, [mapControl.drawType])
- const handlerDrawType = val => {
- dispatch(drawTypeChangeAction(val));
- };
-
- // useEffect(() => {
- // onClickCheck();
- // }, [mapControl.drawCheck])
+ useEffect(() => {
+ // handleDetailDrwa();
+ }, [])
const zoomChange = () => {
let change;
@@ -83,7 +79,7 @@ export const FlightPlanDrawTest = props => {
}
}
- const drawInit = () => {
+ const drawInit = () => {
if(mapControl.drawType==='LINE') {
onClickButton('LINE');
} else if(mapControl.drawType==='CIRCLE') {
@@ -91,13 +87,12 @@ export const FlightPlanDrawTest = props => {
} else if(mapControl.drawType==='POLYGON') {
onClickButton('POLYGON');
} else if(mapControl.drawType==='RESET') {
- onClickButton('RESET')
+ // onClickReset('RESET')
}
}
const onClickButton = (newMode) => {
- console.log('onClickButton');
- if(newMode === 'RESET') return false;
+ console.log('onClickButton');
zoomChange();
@@ -116,16 +111,13 @@ export const FlightPlanDrawTest = props => {
const clearMode = (mode) => {
console.log('clearMode')
- if(!mode) return;
-
+ if(!mode) return;
+
if (mode === 'LINE') {
- if(pastPolyline) {
+ if(pastPolyline) {
pastPolyline.setMap(null);
- setPolyline();
- pastBuffer.setMap(null);
- setBuffer();
pastDragCircle.forEach(prev => prev.setMap(null));
- setDragCircle([]);
+ setDragCircle([]);
}
} else if(mode === 'POLYGON') {
@@ -133,16 +125,18 @@ export const FlightPlanDrawTest = props => {
pastPolygon.setMap(null);
setPolygon();
pastDragCircle.forEach(prev => prev.setMap(null));
- setDragCircle([]);
+ setDragCircle([]);
}
} else if(mode === 'CIRCLE') {
if(pastCircle) {
pastCircle.setMap(null);
setCircle();
- naver.maps.Event.removeListener(pastEve);
+ naver.maps.Event.removeListener(pastEve);
}
}
- finishDraw();
+
+ finishDraw();
+ props.handleInitCoordinates();
}
const startMode = (mode) => {
@@ -203,22 +197,10 @@ export const FlightPlanDrawTest = props => {
dragCircleEve.push(naver.maps.Event.addListener(dragCircle[index], 'mousedown', function() { onMouseDownDrag(index) }))
}
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 {
polyline.setMap(null);
polyline = '';
@@ -266,7 +248,7 @@ export const FlightPlanDrawTest = props => {
map: map
});
// lastDistance = guideline.getDistance();
-
+
//실제 사용되는 라인
polyline = new naver.maps.Polyline({
strokeLineCap: 'round',
@@ -370,7 +352,7 @@ export const FlightPlanDrawTest = props => {
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 {
circle.setRadius(100);
circle.setCenter(coord);
@@ -481,7 +463,7 @@ export const FlightPlanDrawTest = props => {
if(polygon) {
var path = polygon.getPath()._array;
setPolygon(polygon);
- setAreaInfo(path, '');
+ // setAreaInfo(path, '');
}
$(document).off('mousemove.measure');
@@ -498,35 +480,46 @@ export const FlightPlanDrawTest = props => {
}
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) {
- let prePath = [];
- path.forEach(prev=> prePath.push([prev.x, prev.y]))
+ prePath.push(p);
+ })
+ // path.forEach(prev=> prePath.push([prev.x, prev.y]))
}
if(polyline) {
- areaInfo = {
- linepath: prePath,
- linebuffer: 50,
- bufferpath: bufferpath
- }
+ areaInfo.coordinates = prePath;
+ areaInfo.areaType = 'LINE';
} else if(polygon) {
- areaInfo = {
- polygonpath: prePath
- }
- } else if(circle) {
- areaInfo = {
- center: circle.getCenter(),
- radius: circle.getRadius()
+ areaInfo.coordinates = prePath;
+ areaInfo.areaType = 'POLYGON';
+ } else if(circle) {
+ const point = {
+ lat: circle.getCenter().y,
+ lon: circle.getCenter().x
}
+
+ areaInfo.coordinates.push(point);
+ areaInfo.bufferZone = circle.getRadius();
+ areaInfo.areaType = 'CIRCLE';
}
- console.log(areaInfo, 'areaInfo')
+ props.handleCoordinates(areaInfo);
+ // console.log(areaInfo, 'areaInfo')
}
const bufferTest = () => {
- let pol = polyline.getPath()._array; //latlng point 다 준건가?
- // console.log(pol)
+ let pol = polyline.getPath()._array; //latlng point 다 준건가?
let lineStringPaths = [];
for(let i = 0; i< pol.length; i++) {
@@ -563,8 +556,7 @@ export const FlightPlanDrawTest = props => {
bufferRadius
)
- const bufferResultGeoJSON = new GeoJSONWriter().write(bufferResult)
- // console.log(bufferResultGeoJSON)
+ const bufferResultGeoJSON = new GeoJSONWriter().write(bufferResult)
// bufferPolyline = new naver.maps.Polyline({
// strokeColor: '#ff0000',
@@ -636,8 +628,7 @@ export const FlightPlanDrawTest = props => {
const writer = new GeoJSONWriter();
const distance = (100 * 0.001) / 111.12; //100미터
- const line = reader.read(coords);
- // const buffer = BufferOp.bufferOp(line, distance);
+ const line = reader.read(coords);
const buffer = BufferOp.bufferOp(line, distance, 0, 3);
let bufferpath = buffer._shell._points._coordinates;
@@ -654,71 +645,62 @@ export const FlightPlanDrawTest = props => {
strokeWeight: 2,
strokeStyle: [4, 4],
strokeOpacity: 1,
- path : bufferPaths,
- // path: [
-
- // ],
+ path : bufferPaths,
map: map
- });
-
-
+ });
// setAreaInfo(polyline.getPath()._array, bufferPath);
setAreaInfo(polyline.getPath()._array, bufferPaths);
setPolyline(polyline);
setBuffer(bufferPolyline)
}
- const onClickCheck = () => {
- console.log('onClickReset')
- // if(!mapControl.drawType) return;
-
- if(mapControl.drawCheck === 'RESET') {
+ const onClickReset = () => {
+ if(mapControl.drawType === 'RESET') {
clearMode(mode);
- mode = newMode;
-
- startMode(newMode);
- // removeListener();
- // if(polyline) {
- // polyline.setMap(null);
- // polyline = '';
- // guideline.setMap(null);
- // guideline = '';
- // bufferPolyline.setMap(null);
- // bufferPolyline = '';
- // }
- // if(polygon) {
- // console.log(polygon)
- // polygon.setMap(null);
- // polygon = '';
- // }
- // if(circle) {
- // circle.setMap(null);
- // circle = '';
- // radiusline.setMap(null);
- // radiusline = '';
- // }
+ }
+ }
+
+ const handleDetailDrwa = () => {
+
+ if (props.areaCoordList) {
+ const areas = props.areaCoordList[0];
+ if(areas.areaType && areas.areaType === 'LINE') {
+ const paths = [];
+
+ areas.coordList.forEach((coord) => {
+ const path = new naver.maps.LatLng(coord.lat, coord.lon)
+
+ paths.push(path);
+ })
+
+ polyline = new naver.maps.Polyline({
+ strokeLineCap: 'round',
+ strokeLineJoin: 'round',
+ strokeColor: '#283046',
+ strokeWeight: 3,
+ 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 (
- <>
- {/*
- 확인
-
- handlerDrawCheck('RESET')}
- onClick={e => handlerDrawType('RESET')}
- >
- 초기화
- */}
+ <>
>
);
};
\ No newline at end of file
diff --git a/src/containers/basis/flight/plan/FlightPlanAreaDetailContainer.js b/src/containers/basis/flight/plan/FlightPlanAreaDetailContainer.js
index 150f5e1b..dccf0c4c 100644
--- a/src/containers/basis/flight/plan/FlightPlanAreaDetailContainer.js
+++ b/src/containers/basis/flight/plan/FlightPlanAreaDetailContainer.js
@@ -17,12 +17,6 @@ const FlightPlanAreaDetailContainer = ({ handleModal }) => {
}
const handleSave = () => {
-
- if(areaDetail[0].coordList.length <= 1) {
- alert('영역을 생성해주세요.');
- return false;
- }
-
const resultAreaDetail = areaDetail.map((area, i) => {
return {
...area,