diff --git a/src/components/map/mapbox/draw/LaancDrawControl.js b/src/components/map/mapbox/draw/LaancDrawControl.js index a1183725..7026d487 100644 --- a/src/components/map/mapbox/draw/LaancDrawControl.js +++ b/src/components/map/mapbox/draw/LaancDrawControl.js @@ -12,6 +12,7 @@ export const LaancDrawControl = props => { const drawObj = props.drawObj; const mapObject = props.mapObject; + const [drawObjId, setDrawObjId] = useState(); const [bufferId, setBufferId] = useState(); const [geojson, setGeoJson] = useState(); @@ -27,7 +28,7 @@ export const LaancDrawControl = props => { useEffect(() => { if (mapObject) { - mapObject.on('draw.create', handlerCreateObj); + mapObject.on('draw.create', handlerSetId); mapObject.on('draw.update', handlerFormatAreaInfo); mapObject.on('click', handlerOnClick); @@ -68,11 +69,12 @@ export const LaancDrawControl = props => { }; // 도형 첫 생성하면 properties.id에 현재 drawType 넣어줌 - const handlerCreateObj = e => { + const handlerSetId = e => { const id = e.features[0].id; const mode = handlerReturnMode(drawObj.getMode()); if (mode) { drawObj.setFeatureProperty(id, 'id', mode); + setDrawObjId(id); handlerFormatAreaInfo(e); } }; @@ -137,8 +139,6 @@ export const LaancDrawControl = props => { const handlerPastDraw = () => { if (props.areaCoordList) { - console.log(props.areaCoordList[0], '>>>>areaCoordList---'); - const areas = props.areaCoordList[0]; const paths = []; areas.coordList.forEach(coord => paths.push([coord.lon, coord.lat])); @@ -147,8 +147,24 @@ export const LaancDrawControl = props => { console.log('pastDraw'); const drawGeoJson = drawObj.getAll(); if (areas.areaType === 'CIRCLE') { + console.log(paths, '>>>'); + // handlerCreateDrawObj( + // drawObjId, + // setDrawObjId, + // 'Polygon', + // [paths], + // 'CIRCLE' + // ); } else { if (areas.areaType === 'LINE') { + handlerCreateDrawObj( + drawObjId, + setDrawObjId, + 'LineString', + paths, + 'LINE' + ); + // 버퍼 생성 if (areas.bufferCoordList) { const bufferPaths = []; @@ -157,17 +173,22 @@ export const LaancDrawControl = props => { bufferPaths.push([bfCoord.lon, bfCoord.lat]) ); - const buffer = drawObj.get(bufferId); - if (buffer) drawObj.delete(bufferId); - - const newBuffer = { - type: 'LineString', - coordinates: bufferPaths - }; - const newBufferId = drawObj.add(newBuffer); - setBufferId(newBufferId); + handlerCreateDrawObj( + bufferId, + setBufferId, + 'LineString', + bufferPaths, + 'BUFFER' + ); } } else if (areas.areaType === 'POLYGON') { + handlerCreateDrawObj( + drawObjId, + setDrawObjId, + 'Polygon', + [paths], + 'POLYGON' + ); } } // 현재 그려진 도형 저장 @@ -180,6 +201,26 @@ export const LaancDrawControl = props => { } }; + // 기존에 그려진 도형 지우고 새 도형 생성 + const handlerCreateDrawObj = (id, setter, type, coord, propertyId) => { + const obj = drawObj.get(id); + if (obj) drawObj.delete(id); + + const newObj = { + type: type, + coordinates: coord + }; + const newObjId = drawObj.add(newObj); + drawObj.setFeatureProperty(newObjId[0], 'id', propertyId); + setter(newObjId[0]); + + if (propertyId !== 'BUFFER') { + drawObj.changeMode('direct_select', { + featureId: newObjId[0] + }); + } + }; + const handlerRemoveMarker = () => { const ele = document.getElementsByClassName('mapboxgl-popup'); const eleArr = Array.from(ele); @@ -198,20 +239,27 @@ export const LaancDrawControl = props => { }; const handlerCreateAllMarker = coords => { - for (let i = 0; i < coords.length; i++) { - if (i === 0) { - handlerCreateOneMarker([0, -10], coords[i], 'Start'); - } else { - const lngLat = handlerGetMidPoint(coords[i - 1], coords[i]); - const text = CalculateDistance(coords[i - 1], coords[i]); - handlerCreateOneMarker([0, 0], lngLat, text); + 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'); + } else { + const lngLat = handlerGetMidPoint(coords[i - 1], coords[i]); + const text = CalculateDistance(coords[i - 1], coords[i]); + handlerCreateOneMarker([0, 0], lngLat, text); + } } + } else { + handlerCreateOneMarker([0, -10], coords[0], areas.bufferZone); } }; const drawInit = () => { drawObj.deleteAll(); handlerRemoveMarker(); + setDrawObjId(); props.handlerInitCoordinates(); @@ -229,7 +277,7 @@ export const LaancDrawControl = props => { } else if (mode === 'POLYGON') { drawObj.changeMode('draw_polygon'); } else if (mode === 'CIRCLE') { - drawObj.changeMode('draw_circle'); + drawObj.changeMode('draw_circle', { initialRadiusInKm: 100 / 1000 }); } }; diff --git a/src/views/laanc/FlightArea.js b/src/views/laanc/FlightArea.js index 173886ff..25408762 100644 --- a/src/views/laanc/FlightArea.js +++ b/src/views/laanc/FlightArea.js @@ -560,6 +560,22 @@ export default function FlightArea({ > 초기화 + {wheather[0]?.coordList[0].lat != 0 ? (