From 65a97f7e858592f31eb3003e26950f6a593a2695 Mon Sep 17 00:00:00 2001 From: sanguu516 Date: Tue, 2 Apr 2024 13:52:08 +0900 Subject: [PATCH] =?UTF-8?q?=EB=B9=84=ED=96=89=20=EC=8A=B9=EC=9D=B8=20?= =?UTF-8?q?=EC=BB=A8=ED=85=8C=EC=9D=B4=EB=84=88=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../flight/flightApprovalsContainer.js | 187 ++++-------------- 1 file changed, 39 insertions(+), 148 deletions(-) diff --git a/src/containers/flight/flightApprovalsContainer.js b/src/containers/flight/flightApprovalsContainer.js index 7c64580c..06a780ac 100644 --- a/src/containers/flight/flightApprovalsContainer.js +++ b/src/containers/flight/flightApprovalsContainer.js @@ -20,7 +20,11 @@ import { InitFeature, handlerCreatePoint, handlerFitBounds, - handlerGetCircleCoord + handlerGetCircleCoord, + layerPolyline, + layerPolygon, + layerBuffer, + layerWayPoint } from '../../utility/MapUtils'; import { MapControl } from '../../components/map/MapControl'; import { clientSetIsMapLoading } from '@src/redux/features/laanc/laancSlice'; @@ -32,7 +36,7 @@ export default function FlightApprovalsContainer() { // 오른쪽 사이드 메뉴 표출 여부 const [openSetting, setOpenSetting] = useState(true); - const [data, setData] = useState([ + const [res, setRes] = useState([ { planSno: '321', complaint: '15000', @@ -176,7 +180,7 @@ export default function FlightApprovalsContainer() { const [areaCoordList, setAreaCoordList] = useState([]); const map = useSelector(state => state.mapState.map); - const previewGeo = { + const previewGeo2 = { type: 'FeatureCollection', features: [] }; @@ -214,117 +218,34 @@ export default function FlightApprovalsContainer() { }, [map]); const handlerMapInit = () => { - mapboxgl.accessToken = MAPBOX_TOKEN; + map.on('style.load', () => { + map.addSource('preview', { + type: 'geojson', + data: previewGeo2 + }); + map.addLayer(layerPolyline('preview')); + map.addLayer(layerPolygon('preview')); + map.addLayer(layerBuffer('preview')); + map.addLayer(layerWayPoint('preview')); - // 비행구역 상세맵 draw 정보 셋팅 - const draw = new MapboxDraw({ - displayControlsDefault: false, - userProperties: true, - boxSelect: false, - modes: { - ...MapboxDraw.modes, - draw_circle: CircleMode, - drag_circle: DragCircleMode, - direct_select: DirectMode, - simple_select: SimpleSelectMode - }, - styles: [ - { - // polyline - id: 'gl-draw-line', - type: 'line', - filter: [ - 'all', - ['==', '$type', 'LineString'], - ['!=', 'mode', 'static'] - ], - layout: { - 'line-cap': 'round', - 'line-join': 'round' - }, - paint: { - 'line-color': '#8a1c05', - 'line-dasharray': [0.2, 2], - 'line-width': 2 - } - }, - { - // polygon fill - id: 'gl-draw-polygon-fill', - type: 'fill', - filter: ['all', ['==', '$type', 'Polygon'], ['!=', 'mode', 'static']], - paint: { - 'fill-color': '#8a1c05', - 'fill-outline-color': '#8a1c05', - 'fill-opacity': 0.1 - } - }, - // polygon outline - { - id: 'gl-draw-polygon-stroke-active', - type: 'line', - filter: ['all', ['==', '$type', 'Polygon'], ['!=', 'mode', 'static']], - layout: { - 'line-cap': 'round', - 'line-join': 'round' - }, - paint: { - 'line-color': '#8a1c05', - 'line-dasharray': [0.2, 2], - 'line-width': 2 - } - }, - { - // vertex point halos - id: 'gl-draw-polygon-and-line-vertex-halo-active', - type: 'circle', - filter: [ - 'all', - ['==', 'meta', 'vertex'], - ['==', '$type', 'Point'], - ['!=', 'mode', 'static'] - ], - paint: { - 'circle-radius': 8, - 'circle-color': '#ffffff' - } - }, - { - // vertex points - id: 'gl-draw-polygon-and-line-vertex-active', - type: 'circle', - filter: [ - 'all', - ['==', 'meta', 'vertex'], - ['==', '$type', 'Point'], - ['!=', 'mode', 'static'] - ], - paint: { - 'circle-radius': 6, - 'circle-color': '#8a1c05' - } - } - ] - }); - setDrawObj(draw); - map.dragRotate.disable(); - - // dispatch(clientMapInit(map)); - // 김포 3d 공역 + setDrawObj(draw); + map.dragRotate.disable(); - dispatch(clientSetIsMapLoading(true)); + dispatch(clientSetIsMapLoading(true)); - setIsMapLoading(true); - setMapObject(map); - dispatch(clientMapInit(map)); + setIsMapLoading(true); + setMapObject(map); + dispatch(clientMapInit(map)); + }); }; - const handlerPreviewDraw = () => { if (areaCoordList) { const areas = areaCoordList[0]; const paths = []; areas.coordList.forEach(coord => paths.push([coord.lon, coord.lat])); + previewGeo2.features = []; + let fitZoomPaths = []; if (areas.areaType) { @@ -336,6 +257,8 @@ export default function FlightApprovalsContainer() { circle.properties.center = paths[0]; circle.geometry.coordinates = circleCoords; + previewGeo2.features.push(circle); + mapObject.setCenter(circle.properties.center); fitZoomPaths = circleCoords[0]; @@ -346,6 +269,7 @@ export default function FlightApprovalsContainer() { const point = []; if (areas.areaType === 'LINE') { lineString.geometry.coordinates = paths; + previewGeo2features.push(lineString); //버퍼 생성 if (areas.bufferCoordList) { @@ -356,24 +280,31 @@ export default function FlightApprovalsContainer() { ); bufferPolyline.geometry.coordinates = bufferPaths; + previewGeo2features.push(bufferPolyline); } } else if (areas.areaType === 'POLYGON') { polygon.geometry.coordinates = [paths]; + previewGeo2features.push(polygon); } // 포인트 생성 paths.forEach((p, i) => { const wayPoint = handlerCreatePoint(p, i, areas.areaType); point.push(wayPoint); }); + previewGeo2features = previewGeo2features.filter( + geo => geo.properties.id !== 'point' + ); + point.forEach(p => previewGeo2features.push(p)); //지도 줌 좌표 설정 fitZoomPaths = paths.concat(); } - console.log('>>>', mapObject); - handlerFitBounds(map, fitZoomPaths, 50, areas.areaType); + handlerFitBounds(mapObject, fitZoomPaths, 50, areas.areaType); - map.setPaintProperty('waypoint', 'circle-radius', 10); + console.log('>>>', map.getSource('preview')); + mapObject.setPaintProperty('waypoint', 'circle-radius', 10); + mapObject.getSource('preview').setData(previewGeo2); } } }; @@ -395,7 +326,7 @@ export default function FlightApprovalsContainer() {
)} - {/*
- -
- 관활기관 신청 결과 건수 -
-
-
- 서울지방항공청 1건 -
-
- 김포공항관리사무소 3건 -
-
- 청주공항출장소 2건 -
- -
-
- 부산지방공청 1건 -
-
- 제주지방항공청 1건 -
-
-
- -
*/} ); }