|
|
@ -3,6 +3,7 @@ import { InfoModal } from '../../../modal/InfoModal'; |
|
|
|
import { useSelector } from 'react-redux'; |
|
|
|
import { useSelector } from 'react-redux'; |
|
|
|
import { |
|
|
|
import { |
|
|
|
CalculateDistance, |
|
|
|
CalculateDistance, |
|
|
|
|
|
|
|
handlerGetCircleCoord, |
|
|
|
handlerGetHtmlContent, |
|
|
|
handlerGetHtmlContent, |
|
|
|
handlerGetMidPoint |
|
|
|
handlerGetMidPoint |
|
|
|
} from '../../../../utility/DrawUtil'; |
|
|
|
} from '../../../../utility/DrawUtil'; |
|
|
@ -16,6 +17,8 @@ export const LaancDrawControl = props => { |
|
|
|
const [bufferId, setBufferId] = useState(); |
|
|
|
const [bufferId, setBufferId] = useState(); |
|
|
|
const [geojson, setGeoJson] = useState(); |
|
|
|
const [geojson, setGeoJson] = useState(); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const [isDrawDone, setIsDrawDone] = useState(false); |
|
|
|
|
|
|
|
|
|
|
|
const [alertModal, setAlertModal] = useState({ |
|
|
|
const [alertModal, setAlertModal] = useState({ |
|
|
|
isOpen: false, |
|
|
|
isOpen: false, |
|
|
|
title: '', |
|
|
|
title: '', |
|
|
@ -23,7 +26,10 @@ export const LaancDrawControl = props => { |
|
|
|
}); |
|
|
|
}); |
|
|
|
|
|
|
|
|
|
|
|
useEffect(() => { |
|
|
|
useEffect(() => { |
|
|
|
drawInit(); |
|
|
|
const areaType = props.areaCoordList[0].areaType; |
|
|
|
|
|
|
|
const drawType = mapControl.drawType; |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
if (areaType !== drawType) drawInit(); |
|
|
|
}, [mapControl.drawType]); |
|
|
|
}, [mapControl.drawType]); |
|
|
|
|
|
|
|
|
|
|
|
useEffect(() => { |
|
|
|
useEffect(() => { |
|
|
@ -39,12 +45,23 @@ export const LaancDrawControl = props => { |
|
|
|
handlerPastDraw(); |
|
|
|
handlerPastDraw(); |
|
|
|
}, [props.areaCoordList]); |
|
|
|
}, [props.areaCoordList]); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
useEffect(() => { |
|
|
|
|
|
|
|
if (isDrawDone) { |
|
|
|
|
|
|
|
props.handlerConfirm(props.areaCoordList); |
|
|
|
|
|
|
|
setIsDrawDone(false); |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
}, [isDrawDone]); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// 클릭할 때마다 마커 찍어줌
|
|
|
|
const handlerOnClick = e => { |
|
|
|
const handlerOnClick = e => { |
|
|
|
|
|
|
|
console.log('click'); |
|
|
|
|
|
|
|
|
|
|
|
const featureIds = drawObj.getFeatureIdsAt(e.point); |
|
|
|
const featureIds = drawObj.getFeatureIdsAt(e.point); |
|
|
|
const feature = drawObj.get(featureIds[0]); |
|
|
|
const feature = drawObj.get(featureIds[0]); |
|
|
|
const type = handlerReturnMode(drawObj.getMode()); |
|
|
|
const type = handlerReturnMode(drawObj.getMode()); |
|
|
|
|
|
|
|
|
|
|
|
if (type) { |
|
|
|
if (type) { |
|
|
|
|
|
|
|
if (type !== 'CIRCLE') { |
|
|
|
if (feature) { |
|
|
|
if (feature) { |
|
|
|
// 뒷 부분
|
|
|
|
// 뒷 부분
|
|
|
|
const coordinates = feature.geometry.coordinates; |
|
|
|
const coordinates = feature.geometry.coordinates; |
|
|
@ -63,13 +80,20 @@ export const LaancDrawControl = props => { |
|
|
|
handlerCreateOneMarker([0, 0], lngLat, text); |
|
|
|
handlerCreateOneMarker([0, 0], lngLat, text); |
|
|
|
} else { |
|
|
|
} else { |
|
|
|
// Start
|
|
|
|
// Start
|
|
|
|
handlerCreateOneMarker([0, -10], [e.lngLat.lng, e.lngLat.lat], 'Start'); |
|
|
|
if (type !== 'CIRCLE') |
|
|
|
|
|
|
|
handlerCreateOneMarker( |
|
|
|
|
|
|
|
[0, -10], |
|
|
|
|
|
|
|
[e.lngLat.lng, e.lngLat.lat], |
|
|
|
|
|
|
|
'Start' |
|
|
|
|
|
|
|
); |
|
|
|
|
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
}; |
|
|
|
}; |
|
|
|
|
|
|
|
|
|
|
|
// 도형 첫 생성하면 properties.id에 현재 drawType 넣어줌
|
|
|
|
// 도형 첫 생성하면 properties.id에 현재 drawType 넣어줌
|
|
|
|
const handlerSetId = e => { |
|
|
|
const handlerSetId = e => { |
|
|
|
|
|
|
|
console.log('create'); |
|
|
|
const id = e.features[0].id; |
|
|
|
const id = e.features[0].id; |
|
|
|
const mode = handlerReturnMode(drawObj.getMode()); |
|
|
|
const mode = handlerReturnMode(drawObj.getMode()); |
|
|
|
if (mode) { |
|
|
|
if (mode) { |
|
|
@ -100,6 +124,7 @@ export const LaancDrawControl = props => { |
|
|
|
alert('에러 발생. 다시 시도해 주세요.'); |
|
|
|
alert('에러 발생. 다시 시도해 주세요.'); |
|
|
|
return; |
|
|
|
return; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
console.log('saveAreaInfo'); |
|
|
|
|
|
|
|
|
|
|
|
const areaInfo = { |
|
|
|
const areaInfo = { |
|
|
|
coordinates: [], |
|
|
|
coordinates: [], |
|
|
@ -135,6 +160,7 @@ export const LaancDrawControl = props => { |
|
|
|
areaInfo.bufferZone = feature.properties.radiusInKm * 1000; |
|
|
|
areaInfo.bufferZone = feature.properties.radiusInKm * 1000; |
|
|
|
} |
|
|
|
} |
|
|
|
props.handlerCoordinates(areaInfo); |
|
|
|
props.handlerCoordinates(areaInfo); |
|
|
|
|
|
|
|
setIsDrawDone(true); |
|
|
|
}; |
|
|
|
}; |
|
|
|
|
|
|
|
|
|
|
|
const handlerPastDraw = () => { |
|
|
|
const handlerPastDraw = () => { |
|
|
@ -147,21 +173,25 @@ export const LaancDrawControl = props => { |
|
|
|
console.log('pastDraw'); |
|
|
|
console.log('pastDraw'); |
|
|
|
const drawGeoJson = drawObj.getAll(); |
|
|
|
const drawGeoJson = drawObj.getAll(); |
|
|
|
if (areas.areaType === 'CIRCLE') { |
|
|
|
if (areas.areaType === 'CIRCLE') { |
|
|
|
console.log(paths, '>>>'); |
|
|
|
const coord = handlerGetCircleCoord(paths[0], areas.bufferZone); |
|
|
|
// handlerCreateDrawObj(
|
|
|
|
handlerCreateDrawObj( |
|
|
|
// drawObjId,
|
|
|
|
drawObjId, |
|
|
|
// setDrawObjId,
|
|
|
|
setDrawObjId, |
|
|
|
// 'Polygon',
|
|
|
|
'Polygon', |
|
|
|
// [paths],
|
|
|
|
{ |
|
|
|
// 'CIRCLE'
|
|
|
|
path: coord, |
|
|
|
// );
|
|
|
|
center: paths[0], |
|
|
|
|
|
|
|
radius: areas.bufferZone |
|
|
|
|
|
|
|
}, |
|
|
|
|
|
|
|
'CIRCLE' |
|
|
|
|
|
|
|
); |
|
|
|
} else { |
|
|
|
} else { |
|
|
|
if (areas.areaType === 'LINE') { |
|
|
|
if (areas.areaType === 'LINE') { |
|
|
|
handlerCreateDrawObj( |
|
|
|
handlerCreateDrawObj( |
|
|
|
drawObjId, |
|
|
|
drawObjId, |
|
|
|
setDrawObjId, |
|
|
|
setDrawObjId, |
|
|
|
'LineString', |
|
|
|
'LineString', |
|
|
|
paths, |
|
|
|
{ path: paths }, |
|
|
|
'LINE' |
|
|
|
'LINE' |
|
|
|
); |
|
|
|
); |
|
|
|
|
|
|
|
|
|
|
@ -177,7 +207,7 @@ export const LaancDrawControl = props => { |
|
|
|
bufferId, |
|
|
|
bufferId, |
|
|
|
setBufferId, |
|
|
|
setBufferId, |
|
|
|
'LineString', |
|
|
|
'LineString', |
|
|
|
bufferPaths, |
|
|
|
{ path: bufferPaths }, |
|
|
|
'BUFFER' |
|
|
|
'BUFFER' |
|
|
|
); |
|
|
|
); |
|
|
|
} |
|
|
|
} |
|
|
@ -186,7 +216,7 @@ export const LaancDrawControl = props => { |
|
|
|
drawObjId, |
|
|
|
drawObjId, |
|
|
|
setDrawObjId, |
|
|
|
setDrawObjId, |
|
|
|
'Polygon', |
|
|
|
'Polygon', |
|
|
|
[paths], |
|
|
|
{ path: [paths] }, |
|
|
|
'POLYGON' |
|
|
|
'POLYGON' |
|
|
|
); |
|
|
|
); |
|
|
|
} |
|
|
|
} |
|
|
@ -202,15 +232,21 @@ export const LaancDrawControl = props => { |
|
|
|
}; |
|
|
|
}; |
|
|
|
|
|
|
|
|
|
|
|
// 기존에 그려진 도형 지우고 새 도형 생성
|
|
|
|
// 기존에 그려진 도형 지우고 새 도형 생성
|
|
|
|
const handlerCreateDrawObj = (id, setter, type, coord, propertyId) => { |
|
|
|
const handlerCreateDrawObj = (id, setter, type, data, propertyId) => { |
|
|
|
const obj = drawObj.get(id); |
|
|
|
const obj = drawObj.get(id); |
|
|
|
if (obj) drawObj.delete(id); |
|
|
|
if (obj) drawObj.delete(id); |
|
|
|
|
|
|
|
|
|
|
|
const newObj = { |
|
|
|
const newObj = { |
|
|
|
type: type, |
|
|
|
type: type, |
|
|
|
coordinates: coord |
|
|
|
coordinates: data.path |
|
|
|
}; |
|
|
|
}; |
|
|
|
|
|
|
|
|
|
|
|
const newObjId = drawObj.add(newObj); |
|
|
|
const newObjId = drawObj.add(newObj); |
|
|
|
|
|
|
|
if (propertyId === 'CIRCLE') { |
|
|
|
|
|
|
|
drawObj.setFeatureProperty(newObjId[0], 'isCircle', true); |
|
|
|
|
|
|
|
drawObj.setFeatureProperty(newObjId[0], 'center', data.center); |
|
|
|
|
|
|
|
drawObj.setFeatureProperty(newObjId[0], 'radiusInKm', data.radius / 1000); |
|
|
|
|
|
|
|
} |
|
|
|
drawObj.setFeatureProperty(newObjId[0], 'id', propertyId); |
|
|
|
drawObj.setFeatureProperty(newObjId[0], 'id', propertyId); |
|
|
|
setter(newObjId[0]); |
|
|
|
setter(newObjId[0]); |
|
|
|
|
|
|
|
|
|
|
@ -257,6 +293,7 @@ export const LaancDrawControl = props => { |
|
|
|
}; |
|
|
|
}; |
|
|
|
|
|
|
|
|
|
|
|
const drawInit = () => { |
|
|
|
const drawInit = () => { |
|
|
|
|
|
|
|
// console.log('drawInit');
|
|
|
|
drawObj.deleteAll(); |
|
|
|
drawObj.deleteAll(); |
|
|
|
handlerRemoveMarker(); |
|
|
|
handlerRemoveMarker(); |
|
|
|
setDrawObjId(); |
|
|
|
setDrawObjId(); |
|
|
|