|
|
@ -62,7 +62,7 @@ export const FlightPlanDrawTest = props => { |
|
|
|
}, [mapControl.drawType]) |
|
|
|
}, [mapControl.drawType]) |
|
|
|
|
|
|
|
|
|
|
|
useEffect(() => { |
|
|
|
useEffect(() => { |
|
|
|
// handleDetailDrwa();
|
|
|
|
handleDetailDrwa(); |
|
|
|
}, []) |
|
|
|
}, []) |
|
|
|
|
|
|
|
|
|
|
|
const zoomChange = () => { |
|
|
|
const zoomChange = () => { |
|
|
@ -80,6 +80,7 @@ export const FlightPlanDrawTest = props => { |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
const drawInit = () => {
|
|
|
|
const drawInit = () => {
|
|
|
|
|
|
|
|
console.log(mapControl.drawType);
|
|
|
|
if(mapControl.drawType==='LINE') { |
|
|
|
if(mapControl.drawType==='LINE') { |
|
|
|
onClickButton('LINE'); |
|
|
|
onClickButton('LINE'); |
|
|
|
} else if(mapControl.drawType==='CIRCLE') { |
|
|
|
} else if(mapControl.drawType==='CIRCLE') { |
|
|
@ -87,7 +88,7 @@ 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') { |
|
|
|
// onClickReset('RESET')
|
|
|
|
onClickReset('RESET') |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
@ -103,7 +104,7 @@ export const FlightPlanDrawTest = props => { |
|
|
|
return; |
|
|
|
return; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
mode = newMode; |
|
|
|
// mode = newMode;
|
|
|
|
|
|
|
|
|
|
|
|
startMode(newMode); |
|
|
|
startMode(newMode); |
|
|
|
} |
|
|
|
} |
|
|
@ -111,40 +112,69 @@ 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') { |
|
|
|
// clear mode는 전체를 다 초기화 하는게 맞지 않을까..? 무조건 drawType이 변할때마다 초기화해주기로..
|
|
|
|
if(pastPolyline) {
|
|
|
|
if (pastPolyline) { |
|
|
|
pastPolyline.setMap(null); |
|
|
|
console.log('clrea polyline ', pastPolyline) |
|
|
|
pastDragCircle.forEach(prev => prev.setMap(null)); |
|
|
|
pastPolyline.setMap(null); |
|
|
|
setDragCircle([]);
|
|
|
|
pastDragCircle.forEach(c => c.setMap(null)); |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
} else if(mode === 'POLYGON') { |
|
|
|
setPolyline(); |
|
|
|
if(pastPolygon) { |
|
|
|
setDragCircle([]); |
|
|
|
pastPolygon.setMap(null); |
|
|
|
} |
|
|
|
setPolygon(); |
|
|
|
if (pastCircle) { |
|
|
|
pastDragCircle.forEach(prev => prev.setMap(null)); |
|
|
|
console.log('clrea circle ', pastCircle) |
|
|
|
setDragCircle([]);
|
|
|
|
pastCircle.setMap(null); |
|
|
|
} |
|
|
|
naver.maps.Event.removeListener(pastEve);
|
|
|
|
} else if(mode === 'CIRCLE') { |
|
|
|
|
|
|
|
if(pastCircle) { |
|
|
|
setCircle(); |
|
|
|
pastCircle.setMap(null); |
|
|
|
} |
|
|
|
setCircle(); |
|
|
|
if (pastPolygon) { |
|
|
|
naver.maps.Event.removeListener(pastEve);
|
|
|
|
console.log('clrea polygon ', pastPolygon) |
|
|
|
} |
|
|
|
pastPolygon.setMap(null); |
|
|
|
|
|
|
|
pastDragCircle.forEach(c => c.setMap(null)); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
setPolygon(); |
|
|
|
|
|
|
|
setDragCircle([]);
|
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
finishDraw();
|
|
|
|
finishDraw();
|
|
|
|
props.handleInitCoordinates();
|
|
|
|
props.handleInitCoordinates();
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// if(mode === 'LINE' && pastPolyline) {
|
|
|
|
|
|
|
|
// pastPolyline.setMap(null);
|
|
|
|
|
|
|
|
// pastDragCircle.forEach(c => c.setMap(null));
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// setPolyline({});
|
|
|
|
|
|
|
|
// setDragCircle([]);
|
|
|
|
|
|
|
|
// }
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// if(mode === 'POLYGON' && pastPolygon) {
|
|
|
|
|
|
|
|
// pastPolygon.setMap(null);
|
|
|
|
|
|
|
|
// pastDragCircle.forEach(c => c.setMap(null));
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// setPolygon({});
|
|
|
|
|
|
|
|
// setDragCircle([]);
|
|
|
|
|
|
|
|
// }
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// if(mode === 'CIRCLE' && pastCircle) {
|
|
|
|
|
|
|
|
// pastCircle.setMap(null);
|
|
|
|
|
|
|
|
// naver.maps.Event.removeListener(pastEve);
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// setCircle({});
|
|
|
|
|
|
|
|
// }
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// if(mode === 'RESET') {
|
|
|
|
|
|
|
|
// if(pastPolyline) pastPolyline.setMap(null);
|
|
|
|
|
|
|
|
// if(pastCircle) pastCircle.setMap(null);
|
|
|
|
|
|
|
|
// if(pastPolygon) pastPolygon.setMap(null);
|
|
|
|
|
|
|
|
// }
|
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
const startMode = (mode) => { |
|
|
|
const startMode = (mode) => { |
|
|
|
console.log('startMode') |
|
|
|
console.log('startMode') |
|
|
|
|
|
|
|
|
|
|
|
// console.log(polyline, 'polyline', pastPolyline, 'pastPolyline');
|
|
|
|
|
|
|
|
// console.log(polygon, 'polygon', pastPolygon, 'pastPolygon');
|
|
|
|
|
|
|
|
// console.log(circle, 'circle', pastCircle, 'pastCircle');
|
|
|
|
|
|
|
|
if (!mode) return; |
|
|
|
if (!mode) return; |
|
|
|
|
|
|
|
|
|
|
|
if (mode === 'LINE') { |
|
|
|
if (mode === 'LINE') { |
|
|
@ -655,48 +685,68 @@ export const FlightPlanDrawTest = props => { |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
const onClickReset = () => {
|
|
|
|
const onClickReset = () => {
|
|
|
|
|
|
|
|
console.log('onClickRest - ', mapControl.drawType); |
|
|
|
if(mapControl.drawType === 'RESET') {
|
|
|
|
if(mapControl.drawType === 'RESET') {
|
|
|
|
clearMode(mode); |
|
|
|
clearMode('RESET'); |
|
|
|
}
|
|
|
|
}
|
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
const handleDetailDrwa = () => { |
|
|
|
const handleDetailDrwa = () => { |
|
|
|
|
|
|
|
|
|
|
|
if (props.areaCoordList) {
|
|
|
|
if (props.areaCoordList) {
|
|
|
|
const areas = props.areaCoordList[0]; |
|
|
|
const areas = props.areaCoordList[0];
|
|
|
|
if(areas.areaType && areas.areaType === 'LINE') { |
|
|
|
|
|
|
|
const paths = []; |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
areas.coordList.forEach((coord) => { |
|
|
|
const paths = []; |
|
|
|
const path = new naver.maps.LatLng(coord.lat, coord.lon) |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
paths.push(path); |
|
|
|
areas.coordList.forEach((coord) => { |
|
|
|
})
|
|
|
|
const path = new naver.maps.LatLng(coord.lat, coord.lon) |
|
|
|
|
|
|
|
|
|
|
|
polyline = new naver.maps.Polyline({ |
|
|
|
paths.push(path); |
|
|
|
strokeLineCap: 'round', |
|
|
|
});
|
|
|
|
strokeLineJoin: 'round', |
|
|
|
|
|
|
|
strokeColor: '#283046', |
|
|
|
|
|
|
|
strokeWeight: 3, |
|
|
|
|
|
|
|
strokeOpacity: 1, |
|
|
|
|
|
|
|
path: paths, |
|
|
|
|
|
|
|
map: map |
|
|
|
|
|
|
|
}); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
setPolyline(polyline) |
|
|
|
if(areas.areaType && areas.areaType === 'LINE') { |
|
|
|
// $(document).on('mousemove.measure', function(e) { onMouseMovePolyline(e); });
|
|
|
|
polyline = new naver.maps.Polyline({ |
|
|
|
} |
|
|
|
strokeLineCap: 'round', |
|
|
|
|
|
|
|
strokeLineJoin: 'round', |
|
|
|
|
|
|
|
strokeColor: '#283046', |
|
|
|
|
|
|
|
strokeWeight: 3, |
|
|
|
|
|
|
|
strokeOpacity: 1, |
|
|
|
|
|
|
|
path: paths, |
|
|
|
|
|
|
|
map: map |
|
|
|
|
|
|
|
}); |
|
|
|
|
|
|
|
|
|
|
|
if(areas.areaType && areas.areaType === 'PLOYGON') { |
|
|
|
setPolyline(polyline) |
|
|
|
|
|
|
|
// $(document).on('mousemove.measure', function(e) { onMouseMovePolyline(e); });
|
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
} |
|
|
|
if(areas.areaType && areas.areaType === 'POLYGON') { |
|
|
|
|
|
|
|
polygon = new naver.maps.Polygon({ |
|
|
|
|
|
|
|
strokeColor: '#283046', |
|
|
|
|
|
|
|
strokeOpacity: 1, |
|
|
|
|
|
|
|
fillColor: '#7367F0', |
|
|
|
|
|
|
|
fillOpacity: 0.1, |
|
|
|
|
|
|
|
paths: paths, |
|
|
|
|
|
|
|
map: map |
|
|
|
|
|
|
|
}); |
|
|
|
|
|
|
|
|
|
|
|
if(areas.areaType && areas.areaType === 'CIRCLE') { |
|
|
|
setPolygon(polygon); |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
} |
|
|
|
if(areas.areaType && areas.areaType === 'CIRCLE') { |
|
|
|
|
|
|
|
circle = new naver.maps.Circle({ |
|
|
|
|
|
|
|
strokeColor: '#283046', |
|
|
|
|
|
|
|
strokeOpacity: 1, |
|
|
|
|
|
|
|
fillColor: '#7367F0', |
|
|
|
|
|
|
|
fillOpacity: 0.1, |
|
|
|
|
|
|
|
center: paths[0], |
|
|
|
|
|
|
|
radius: areas.bufferZone, |
|
|
|
|
|
|
|
map: map, |
|
|
|
|
|
|
|
clickable: true |
|
|
|
|
|
|
|
}); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
setCircle(circle); |
|
|
|
|
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
return ( |
|
|
|
return ( |
|
|
|