diff --git a/src/components/map/mapbox/feature/FeatureAirZone.js b/src/components/map/mapbox/feature/FeatureAirZone.js index 09ebd1f..5d3d1a6 100644 --- a/src/components/map/mapbox/feature/FeatureAirZone.js +++ b/src/components/map/mapbox/feature/FeatureAirZone.js @@ -1,4 +1,11 @@ import '../../../../assets/css/custom.css'; +import { useEffect, useState } from 'react'; +import geoJson from '../../geojson/airArea.json'; +import * as turf from '@turf/turf'; +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'; import { useEffect } from 'react'; import geoJson from '../../geojson/airArea.json'; import * as turf from '@turf/turf'; @@ -26,12 +33,34 @@ const airPort = [ ]; export const FeatureAirZone = props => { + const [bufferGeoJson, setBufferGeoJson] = useState(); + const [uamGeoJson, setUamGeoJson] = useState({ + ...uamRouteArea, + ...uamTowerArea, + features: [...uamRouteArea.features, ...uamTowerArea.features] + }); + + const [number, setNumber] = useState(0); + let popup; useEffect(() => { featureAirZoneInit(); + uamAirAreaInit(); }, []); + // 얻은 버퍼 좌표로 버퍼 도형 생성 후 지도에 반영 + useEffect(() => { + if (bufferGeoJson) { + const obj = { + ...uamGeoJson, + features: [...uamGeoJson.features, bufferGeoJson] + }; + setUamGeoJson(obj); + props.map.getSource('uam').setData(obj); + } + }, [bufferGeoJson]); + // 공역 정보 표출 window 생성 const infowindowOpen = data => { const content = @@ -318,5 +347,141 @@ 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 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 c4417d2..ef1aed2 100644 --- a/src/modules/basis/flight/reducers/basisFlightReducer.ts +++ b/src/modules/basis/flight/reducers/basisFlightReducer.ts @@ -171,3 +171,10 @@ export const flightReducer = createReducer( draft.inAirArea = data; }) ); +// uam 노선 버퍼 영역 조회 +//.handleAction(Actions.FLIGHT_UAM_BUFFER_LIST.success, (state, action) => +// produce(state, draft => { +// const data = action.payload; +// draft.uamBufferList = data; +// }) +// );