diff --git a/src/components/map/mapbox/draw/LanncDraw.js b/src/components/map/mapbox/draw/LanncDraw.js index 5e218592..53e7edd3 100644 --- a/src/components/map/mapbox/draw/LanncDraw.js +++ b/src/components/map/mapbox/draw/LanncDraw.js @@ -75,6 +75,7 @@ export const LanncDraw = props => { //자세히보기 두번째에는 area가 사라져..! 왜?! //첫번째 열면 도형 그려진 다음에 areaCoordList가 사라짐 왜???? //clearMode가 자동으로 실행돼서 props.handlerInitCoordinates도 실행되기 때문 ㅠㅠ 그래서 초기화 됨 + //해결완료. 나중에 꼬일 때 까먹지 말라고 주석 삭제 안함 if (area.areaType && area.areaType !== '') { if (props.centeredModal && detailLayer) handlerPastDraw(); } @@ -143,7 +144,6 @@ export const LanncDraw = props => { point = []; geojson.features = []; - // mapObject.getSource('detail').setData(geojson); handlerGetSourceSetData(); }; @@ -168,7 +168,6 @@ export const LanncDraw = props => { props.handlerDrawType('RESET'); // mapObject.on('click', clickEve); } - // mapObject.getSource('detail').setData(geojson); handlerGetSourceSetData(); } else if (drawType === 'POLYGON') { if (path.length > 2) { @@ -188,7 +187,6 @@ export const LanncDraw = props => { } } handlerGetSourceSetData(); - // mapObject.getSource('detail').setData(geojson); } }; @@ -251,7 +249,6 @@ export const LanncDraw = props => { ); addMileStone(formatCoord, ''); } - // mapObject.getSource('detail').setData(geojson); handlerGetSourceSetData(); }; @@ -264,7 +261,6 @@ export const LanncDraw = props => { } guideLine.geometry.coordinates.push(formatCoord); - // mapObject.getSource('detail').setData(geojson); handlerGetSourceSetData(); }; @@ -285,7 +281,6 @@ export const LanncDraw = props => { // 이거.. 왜 안해도 잘 되지....? // handlerReplaceDuplicate('polygon', polygon); - // mapObject.getSource('detail').setData(geojson); handlerGetSourceSetData(); }; @@ -306,7 +301,6 @@ export const LanncDraw = props => { handlerSaveAreaInfo(''); addMileStone(formatCoord, 100); - // mapObject.getSource('detail').setData(geojson); handlerGetSourceSetData(); }; @@ -366,7 +360,6 @@ export const LanncDraw = props => { }); } - // mapObject.getSource('detail').setData(geojson); handlerGetSourceSetData(); }; @@ -525,8 +518,7 @@ export const LanncDraw = props => { handlerRemoveMarker(); handlerCreateAllMarker(paths); - // mapObject.getSource('detail').setData(geojson); - mapObject.setPaintProperty('waypoint', 'circle-radius', 10); + mapObject.setPaintProperty('waypoint', 'circle-radius', 8); handlerGetSourceSetData(); } } diff --git a/src/utility/DrawUtil.js b/src/utility/DrawUtil.js index 9ccb0726..1a10545f 100644 --- a/src/utility/DrawUtil.js +++ b/src/utility/DrawUtil.js @@ -1,4 +1,5 @@ import * as turf from '@turf/turf'; +import mapboxgl from 'mapbox-gl'; export const InitFeature = (type, id) => { return { @@ -89,6 +90,23 @@ export const handlerCreatePoint = (coord, index, type) => { return wayPoint; }; +// 그려진 도형이 지도 전체화면에 보여지도록 +export const handlerFitBounds = (map, paths, padding, type) => { + const bounds = new mapboxgl.LngLatBounds(paths[0], paths[0]); + + if (type !== 'CIRCLE') { + for (const coord of paths) { + bounds.extend(coord); + } + } else { + for (let i = 0; i < paths.length; i += 30) { + bounds.extend(paths[i]); + } + } + + map.fitBounds(bounds, { padding: padding }); +}; + // draw 레이어 export const layerWayPoint = source => { return { diff --git a/src/views/laanc/FlightArea.js b/src/views/laanc/FlightArea.js index d4a3e945..6a37ce52 100644 --- a/src/views/laanc/FlightArea.js +++ b/src/views/laanc/FlightArea.js @@ -16,6 +16,7 @@ import LaancAreaMap from './LaancAreaMap'; import { InitFeature, handlerCreatePoint, + handlerFitBounds, handlerGetCircleCoord, layerBuffer, layerPolygon, @@ -257,6 +258,8 @@ export default function FlightArea({ centeredModal, setCenteredModal, page }) { previewGeo.features = []; + let fitZoomPaths = []; + if (areas.areaType) { if (areas.areaType === 'CIRCLE') { const radius = areas.bufferZone; @@ -269,6 +272,8 @@ export default function FlightArea({ centeredModal, setCenteredModal, page }) { previewGeo.features.push(circle); mapObject.setCenter(circle.properties.center); + + fitZoomPaths = circleCoords[0]; } else { const lineString = InitFeature('LineString', 'polyline'); const bufferPolyline = InitFeature('LineString', 'buffer'); @@ -289,26 +294,12 @@ export default function FlightArea({ centeredModal, setCenteredModal, page }) { bufferPolyline.geometry.coordinates = bufferPaths; previewGeo.features.push(bufferPolyline); } - - const lineCoord = lineString.geometry.coordinates.concat(); - lineCoord.push(lineString.geometry.coordinates[0]); - - const obj = turf.polygon([lineCoord]); - const centerOfMass = turf.centerOfMass(obj); - mapObject.setCenter(centerOfMass.geometry.coordinates); } else if (areas.areaType === 'POLYGON') { polygon.geometry.coordinates = [paths]; previewGeo.features.push(polygon); - - const polygonCoord = polygon.geometry.coordinates[0].concat(); - polygonCoord.push(polygon.geometry.coordinates[0][0]); - - const obj = turf.polygon([polygonCoord]); - const centerOfMass = turf.centerOfMass(obj); - mapObject.setCenter(centerOfMass.geometry.coordinates); } - //포인트 생성 + // 포인트 생성 paths.forEach((p, i) => { const wayPoint = handlerCreatePoint(p, i, areas.areaType); point.push(wayPoint); @@ -318,11 +309,16 @@ export default function FlightArea({ centeredModal, setCenteredModal, page }) { ); point.forEach(p => previewGeo.features.push(p)); - //마커 삭제 + //지도 줌 좌표 설정 + fitZoomPaths = paths.concat(); + + // 마커 삭제 // const ele = document.getElementById('mapboxgl-popup'); // const eleArr = Array.from(ele); // eleArr?.forEach(marker => marker.remove()); } + handlerFitBounds(mapObject, fitZoomPaths, 50, areas.areaType); + mapObject.setPaintProperty('waypoint', 'circle-radius', 10); mapObject.getSource('preview').setData(previewGeo); } diff --git a/src/views/laanc/LaancAreaMap.js b/src/views/laanc/LaancAreaMap.js index 59fe6113..b5ffc482 100644 --- a/src/views/laanc/LaancAreaMap.js +++ b/src/views/laanc/LaancAreaMap.js @@ -26,6 +26,9 @@ import { mapInitAction } from '../../modules/control/map/actions/controlMapActions'; import { + FormattingCoord, + handlerFitBounds, + handlerGetCircleCoord, layerBuffer, layerGuideLine, layerPolygon, @@ -76,10 +79,28 @@ export default function LaancAreaMap({ centeredModal, mapContainer }) { areaCoordList[0].coordList[0]?.lon !== 0 ) { if (number === 0) { - mapObject.setCenter([ - areaCoordList[0].coordList[0].lon, - areaCoordList[0].coordList[0].lat - ]); + // 지도 줌 설정 + let paths = []; + const areas = areaCoordList[0]; + + areaCoordList[0].coordList.forEach(coord => + paths.push([coord.lon, coord.lat]) + ); + + if (areas.areaType === 'CIRCLE') { + const formatting = FormattingCoord([paths[0][0], paths[0][1]]); + const circleCoord = handlerGetCircleCoord( + formatting, + areas.bufferZone + ); + paths = circleCoord[0]; + } + handlerFitBounds(mapObject, paths, 100, areas.areaType); + + // mapObject.setCenter([ + // areaCoordList[0].coordList[0].lon, + // areaCoordList[0].coordList[0].lat + // ]); setNumber(number + 1); } }