From 0ba565ef990f4788332123c279bec9b78f7f7552 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: Thu, 14 Dec 2023 18:33:57 +0900 Subject: [PATCH] =?UTF-8?q?=EB=93=9C=EB=A1=A0=EA=B5=90=ED=86=B5=EA=B4=80?= =?UTF-8?q?=EB=A6=AC=20uam=EB=85=B8=EC=84=A0,=20=EC=86=A1=EC=A0=84?= =?UTF-8?q?=ED=83=91=20=EC=A3=BC=EC=84=9D=20=ED=95=B4=EC=A0=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../map/mapbox/feature/FeatureAirZone.js | 311 +++++++++--------- .../flight/reducers/basisFlightReducer.ts | 2 +- 2 files changed, 157 insertions(+), 156 deletions(-) diff --git a/src/components/map/mapbox/feature/FeatureAirZone.js b/src/components/map/mapbox/feature/FeatureAirZone.js index e872ac8..214dab3 100644 --- a/src/components/map/mapbox/feature/FeatureAirZone.js +++ b/src/components/map/mapbox/feature/FeatureAirZone.js @@ -1,12 +1,11 @@ import '../../../../assets/css/custom.css'; import { useEffect, useState } from 'react'; -import { useDispatch, useSelector } from 'react-redux'; import geoJson from '../../geojson/airArea.json'; import * as turf from '@turf/turf'; -// import { FLIGHT_UAM_BUFFER_LIST } from '../../../../modules/basis/flight/actions/basisFlightAction'; -// import towerImg from '../../../../assets/images/transmission_tower_icon.png'; -// import uamRouteArea from '../../geojson/uamRouteArea.json'; -// import uamTowerArea from '../../geojson/uamTowerArea.json'; +import towerImg from '../../../../assets/images/transmission_tower_icon.png'; +import uamRouteArea from '../../geojson/uamRouteArea.json'; +import uamTowerArea from '../../geojson/uamTowerArea.json'; +import axios from '../../../../modules/utils/customAxiosUtil'; // 격자 공역 Source const airPort = [ @@ -31,51 +30,33 @@ const airPort = [ ]; export const FeatureAirZone = props => { - const dispatch = useDispatch(); - // const { uamBufferList } = useSelector(state => state.flightState); + const [bufferGeoJson, setBufferGeoJson] = useState(); + const [uamGeoJson, setUamGeoJson] = useState({ + ...uamRouteArea, + ...uamTowerArea, + features: [...uamRouteArea.features, ...uamTowerArea.features] + }); - // const [uamGeoJson, setUamGeoJson] = useState({ - // ...uamRouteArea, - // ...uamTowerArea, - // features: [...uamRouteArea.features, ...uamTowerArea.features] - // }); - // const [number, setNumber] = useState(0); + const [number, setNumber] = useState(0); let popup; useEffect(() => { featureAirZoneInit(); - // uamAirAreaInit(); + uamAirAreaInit(); }, []); // 얻은 버퍼 좌표로 버퍼 도형 생성 후 지도에 반영 - // useEffect(() => { - // if (uamBufferList.length > 0) { - // const paths = []; - // uamBufferList.map(buffer => { - // const path = [buffer.x, buffer.y]; - // paths.push(path); - // }); - - // const bufferObj = { - // type: 'Feature', - // geometry: { - // type: 'LineString', - // coordinates: paths - // }, - // properties: { - // type: 'routeBuffer' - // } - // }; - - // const obj = { - // ...uamGeoJson, - // features: [...uamGeoJson.features, bufferObj] - // }; - // setUamGeoJson(obj); - // props.map.getSource('uam').setData(obj); - // } - // }, [uamBufferList]); + useEffect(() => { + if (bufferGeoJson) { + const obj = { + ...uamGeoJson, + features: [...uamGeoJson.features, bufferGeoJson] + }; + setUamGeoJson(obj); + props.map.getSource('uam').setData(obj); + } + }, [bufferGeoJson]); // 공역 정보 표출 window 생성 const infowindowOpen = data => { @@ -364,120 +345,140 @@ export const FeatureAirZone = props => { }; // uam 셋팅 함수 - // const uamAirAreaInit = () => { - // if (number === 0) { - // // uam노선 features - // const routeFeatures = uamRouteArea.features; - - // // [경도, 위도] -> [{x: 경도, y: 위도}] 포맷팅 - // const routeLine = routeFeatures - // .filter(route => route.geometry.type === 'LineString') - // .map(line => { - // return line.geometry.coordinates.map(p => { - // return { x: p[0], y: p[1] }; - // }); - // }); - - // // uam노선 버퍼 좌표 요청 - // const bufferRequest = async coords => { - // await axios; - // }; - // routeLine.forEach(coords => { - // // dispatch( - // // FLIGHT_UAM_BUFFER_LIST.request({ - // // buffer: 50, - // // coordinates: coords - // // }) - // // ); - // }); - - // // 송전선 features - // const towerFeatures = uamTowerArea.features; - - // // 송전탑 마커 생성 - // towerFeatures - // .filter(tower => tower.properties.type === 'towerPoint') - // .map((point, idx) => { - // const el = document.createElement('img'); - // el.id = `tower${idx}`; - // el.src = towerImg; - // el.style.width = '20px'; - // el.style.height = '20px'; - - // new props.mapboxgl.Marker({ - // element: el - // }) - // .setLngLat( - // props.mapboxgl.LngLat.convert(point.geometry.coordinates) - // ) - // .addTo(props.map); - // }); - - // // uam 관련 Source, Layer - // props.map.addSource('uam', { - // type: 'geojson', - // data: uamGeoJson - // }); - // props.map.addLayer({ - // id: 'routeLine', - // type: 'line', - // source: 'uam', - // layout: { - // 'line-cap': 'butt', - // 'line-join': 'round' - // }, - // paint: { - // 'line-color': '#FF1493', - // 'line-width': 3, - // 'line-dasharray': [1, 1] - // }, - // filter: ['==', ['get', 'type'], 'routeLine'] - // }); - // props.map.addLayer({ - // id: 'routeBuffer', - // type: 'line', - // source: 'uam', - // layout: { - // 'line-cap': 'round', - // 'line-join': 'round' - // }, - // paint: { - // 'line-color': '#000000', - // 'line-width': 1, - // 'line-dasharray': [3, 3] - // }, - // filter: ['==', ['get', 'type'], 'routeBuffer'] - // }); - // props.map.addLayer({ - // id: 'routePoint', - // type: 'circle', - // source: 'uam', - // paint: { - // 'circle-radius': 5, - // 'circle-color': '#ffffff', - // 'circle-stroke-color': '#000000', - // 'circle-stroke-width': 1 - // }, - // filter: ['==', ['get', 'type'], 'routePoint'] - // }); - // props.map.addLayer({ - // id: 'towerLine', - // type: 'line', - // source: 'uam', - // layout: { - // 'line-cap': 'round', - // 'line-join': 'round' - // }, - // paint: { - // 'line-color': '#960018', - // 'line-width': 1 - // }, - // filter: ['==', ['get', 'type'], 'towerLine'] - // }); - // } - - // setNumber(number + 1); - // }; + const uamAirAreaInit = () => { + if (number === 0) { + // uam노선 features + const routeFeatures = uamRouteArea.features; + + // [경도, 위도] -> [{x: 경도, y: 위도}] 포맷팅 + const routeLine = routeFeatures + .filter(route => route.geometry.type === 'LineString') + .map(line => { + return line.geometry.coordinates.map(p => { + return { x: p[0], y: p[1] }; + }); + }); + + // uam노선 버퍼 좌표 요청 + const bufferCreate = async coords => { + const bufferList = await axios.post( + `http://211.253.11.189:8080/api/bas/flight/adex/buffer`, + { + buffer: 50, + coordinates: coords + } + ); + + const paths = []; + bufferList.map(buffer => { + const path = [buffer.x, buffer.y]; + paths.push(path); + }); + + const bufferObj = { + type: 'Feature', + geometry: { + type: 'LineString', + coordinates: paths + }, + properties: { + type: 'routeBuffer' + } + }; + setBufferGeoJson(bufferObj); + }; + + routeLine.forEach(coords => { + bufferCreate(coords); + }); + + // 송전선 features + const towerFeatures = uamTowerArea.features; + + // 송전탑 마커 생성 + towerFeatures + .filter(tower => tower.properties.type === 'towerPoint') + .map((point, idx) => { + const el = document.createElement('img'); + el.id = `tower${idx}`; + el.src = towerImg; + el.style.width = '20px'; + el.style.height = '20px'; + + new props.mapboxgl.Marker({ + element: el + }) + .setLngLat( + props.mapboxgl.LngLat.convert(point.geometry.coordinates) + ) + .addTo(props.map); + }); + + // uam 관련 Source, Layer + props.map.addSource('uam', { + type: 'geojson', + data: uamGeoJson + }); + props.map.addLayer({ + id: 'routeLine', + type: 'line', + source: 'uam', + layout: { + 'line-cap': 'butt', + 'line-join': 'round' + }, + paint: { + 'line-color': '#FF1493', + 'line-width': 3, + 'line-dasharray': [1, 1] + }, + filter: ['==', ['get', 'type'], 'routeLine'] + }); + props.map.addLayer({ + id: 'routeBuffer', + type: 'line', + source: 'uam', + layout: { + 'line-cap': 'round', + 'line-join': 'round' + }, + paint: { + 'line-color': '#000000', + 'line-width': 1, + 'line-dasharray': [3, 3] + }, + filter: ['==', ['get', 'type'], 'routeBuffer'] + }); + props.map.addLayer({ + id: 'routePoint', + type: 'circle', + source: 'uam', + paint: { + 'circle-radius': 5, + 'circle-color': '#ffffff', + 'circle-stroke-color': '#000000', + 'circle-stroke-width': 1 + }, + filter: ['==', ['get', 'type'], 'routePoint'] + }); + props.map.addLayer({ + id: 'towerLine', + type: 'line', + source: 'uam', + layout: { + 'line-cap': 'round', + 'line-join': 'round' + }, + paint: { + 'line-color': '#960018', + 'line-width': 1 + }, + filter: ['==', ['get', 'type'], 'towerLine'] + }); + } + + setNumber(number + 1); + }; return null; }; diff --git a/src/modules/basis/flight/reducers/basisFlightReducer.ts b/src/modules/basis/flight/reducers/basisFlightReducer.ts index a3c97f5..ef1aed2 100644 --- a/src/modules/basis/flight/reducers/basisFlightReducer.ts +++ b/src/modules/basis/flight/reducers/basisFlightReducer.ts @@ -172,7 +172,7 @@ export const flightReducer = createReducer( }) ); // uam 노선 버퍼 영역 조회 -// .handleAction(Actions.FLIGHT_UAM_BUFFER_LIST.success, (state, action) => +//.handleAction(Actions.FLIGHT_UAM_BUFFER_LIST.success, (state, action) => // produce(state, draft => { // const data = action.payload; // draft.uamBufferList = data;