From bd6cf64da72ac48dcbfde9b8024b526cf288425b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?junh=5Feee=28=EC=9D=B4=EC=A4=80=ED=9D=AC=29?= Date: Tue, 26 Sep 2023 17:11:08 +0900 Subject: [PATCH] =?UTF-8?q?laanc=20=EA=B7=B8=EB=A0=A4=EC=A7=84=20=EB=8F=84?= =?UTF-8?q?=ED=98=95=EC=97=90=20=EB=A7=9E=EC=B6=94=EC=96=B4=20=EC=A7=80?= =?UTF-8?q?=EB=8F=84=20=EC=84=BC=ED=84=B0=20=EB=B0=8F=20=EC=A4=8C=20?= =?UTF-8?q?=EC=84=A4=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/map/mapbox/draw/LanncDraw.js | 12 ++------- src/utility/DrawUtil.js | 18 +++++++++++++ src/views/laanc/FlightArea.js | 28 +++++++++----------- src/views/laanc/LaancAreaMap.js | 29 ++++++++++++++++++--- 4 files changed, 57 insertions(+), 30 deletions(-) diff --git a/src/components/map/mapbox/draw/LanncDraw.js b/src/components/map/mapbox/draw/LanncDraw.js index 5e21859..53e7edd 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 9ccb072..1a10545 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 d4a3e94..6a37ce5 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 59fe611..b5ffc48 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); } }