From 54bff5060c50ffd96ecc4970a42f0d484247824b Mon Sep 17 00:00:00 2001 From: JANGHYUNn Date: Fri, 13 Oct 2023 14:07:33 +0900 Subject: [PATCH] =?UTF-8?q?=EB=93=9C=EB=A1=A0=EA=B5=90=ED=86=B5=20?= =?UTF-8?q?=EC=8B=9C=EC=8A=A4=ED=85=9C(=EC=84=A0=ED=98=95,=20=EA=B2=A9?= =?UTF-8?q?=EC=9E=90=20=EB=85=B8=EC=B6=9C=20=EC=8A=A4=EC=9C=84=EC=B9=AD)?= =?UTF-8?q?=20=EC=9E=91=EC=97=85?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/map/mapbox/MapBoxMap.js | 84 ++++++++++++++++++- .../map/mapbox/feature/FeatureAirZone.js | 5 +- .../control/map/reducers/controlMapReducer.ts | 6 ++ src/views/control/setting/ControlSetting.js | 10 +-- 4 files changed, 95 insertions(+), 10 deletions(-) diff --git a/src/components/map/mapbox/MapBoxMap.js b/src/components/map/mapbox/MapBoxMap.js index ec7d967..6a4635a 100644 --- a/src/components/map/mapbox/MapBoxMap.js +++ b/src/components/map/mapbox/MapBoxMap.js @@ -14,6 +14,9 @@ import { FeatureAirZone } from './feature/FeatureAirZone'; import geoJson from '../../map/geojson/airArea.json'; // import gimPo from '../../map/geojson/gimpoAirportAirArea.json'; import gimPo from '../../map/geojson/gimpoAirportAirArea.json'; +// 김포 격자 공역 +import gimPoGrid from '../../../components/map/geojson/airportAirArea.json'; +// 김포 선형 공역 import flatGimpo from '../../map/geojson/flatGimpoAirportAirArea.json'; // import DronPlan from './dron/DronPlan'; // import NewDronPlan from './dron/NewDronPlan'; @@ -211,6 +214,9 @@ const uamPosition = { ] }; +let gridCoords = []; +let altitudeMarker = []; + export default function MapBoxMap() { const naver = window.naver; @@ -260,7 +266,8 @@ export default function MapBoxMap() { mapControl.area0003, mapControl.area0004, mapControl.area0005, - mapControl.area0006 + mapControl.area0006, + mapControl.liner ]); const handlerCreateAirSpace = ( @@ -271,10 +278,83 @@ export default function MapBoxMap() { features: [...geoJson.features, ...flatGimpo.features] } ) => { + useGeoJson = mapControl.liner + ? { + ...geoJson, + ...flatGimpo, + features: [...geoJson.features, ...flatGimpo.features] + } + : { + ...geoJson, + ...gimPoGrid, + features: [...geoJson.features, ...gimPoGrid.features] + }; if (map.getLayer('maine')) { map.removeLayer('maine'); map.removeSource('maine'); } + + if (altitudeMarker.length > 0) { + altitudeMarker.map(i => { + i.remove(); + }); + gridCoords = []; + } + + if (!mapControl.liner) { + if (gridCoords.length <= 0) { + gimPoGrid.features.map(air => { + gridCoords.push({ + lat: + (Math.max( + air.geometry.coordinates[0][0][1], + air.geometry.coordinates[0][1][1], + air.geometry.coordinates[0][2][1], + air.geometry.coordinates[0][3][1] + ) + + Math.min( + air.geometry.coordinates[0][0][1], + air.geometry.coordinates[0][1][1], + air.geometry.coordinates[0][2][1], + air.geometry.coordinates[0][3][1] + )) / + 2, + lng: + (Math.max( + air.geometry.coordinates[0][0][0], + air.geometry.coordinates[0][1][0], + air.geometry.coordinates[0][2][0], + air.geometry.coordinates[0][3][0] + ) + + Math.min( + air.geometry.coordinates[0][0][0], + air.geometry.coordinates[0][1][0], + air.geometry.coordinates[0][2][0], + air.geometry.coordinates[0][3][0] + )) / + 2, + airspace: air.properties.airspace, + type: air.properties.type + }); + }); + gridCoords.map(val => { + if (mapControl[`area${val.type}`]) { + const el = document.createElement('div'); + el.style.color = '#000000'; + el.style.fontSize = '10px'; + el.innerText = val.airspace; + const marker = new mapboxgl.Marker({ + element: el + }) + .setLngLat([val.lng.toFixed(6), val.lat.toFixed(6)]) + .addTo(map); + marker.type = val.type; + altitudeMarker.push(marker); + } + }); + } + } + let arrGeoJson = []; useGeoJson.features.map(item => { if (item.properties.type === '0001' && mapControl.area0001) { @@ -362,7 +442,7 @@ export default function MapBoxMap() { const labelLayerId = layers.find( layer => layer.type === 'symbol' && layer.layout['text-field'] ).id; - console.log('?@?@?@'); + // 지형 3d start map.addSource('mapbox-dem', { type: 'raster-dem', diff --git a/src/components/map/mapbox/feature/FeatureAirZone.js b/src/components/map/mapbox/feature/FeatureAirZone.js index 3cf029c..a976a54 100644 --- a/src/components/map/mapbox/feature/FeatureAirZone.js +++ b/src/components/map/mapbox/feature/FeatureAirZone.js @@ -2,7 +2,6 @@ import { useEffect, useState } from 'react'; import { useSelector } from 'react-redux'; import * as turf from '@turf/turf'; import geoJson from '../../../../components/map/geojson/airArea.json'; -import gimPo from '../../../../components/map/geojson/airportAirArea.json'; import '../../../../assets/css/custom.css'; // 격자 공역 Source @@ -151,13 +150,13 @@ export const FeatureAirZone = props => { }); // 격자 공역 생성 - airPort.map(air => polyArea(air)); + airPort.map((air, idx) => polyArea(air, idx)); // 마우스 오버 이벤트 생성 featureAirEvent(markers); }; // 격자 공역 셋팅 함수 - const polyArea = air => { + const polyArea = (air, idx) => { const polyArr = []; const radius = air.buffer; const position = air.center; diff --git a/src/modules/control/map/reducers/controlMapReducer.ts b/src/modules/control/map/reducers/controlMapReducer.ts index 2f6e16d..b7af070 100644 --- a/src/modules/control/map/reducers/controlMapReducer.ts +++ b/src/modules/control/map/reducers/controlMapReducer.ts @@ -10,6 +10,7 @@ const initialState = { area0004: true, // 비행장(군사) area0005: true, // 이착륙장(RC비행장) area0006: true, // 초경량비행장치 + liner: true, sensor: 'dust', isLaanc: false, drawType: null, @@ -61,6 +62,11 @@ const controlReducerReducer = (state = initialState, action) => { ...state, area0006: !state.area0006 }; + } else if (action.value === 'liner') { + return { + ...state, + liner: !state.liner + }; } else { return { state diff --git a/src/views/control/setting/ControlSetting.js b/src/views/control/setting/ControlSetting.js index 667d3bc..54ea936 100644 --- a/src/views/control/setting/ControlSetting.js +++ b/src/views/control/setting/ControlSetting.js @@ -184,17 +184,17 @@ const ControlSetting = props => {
- 선형 + {mapControl.liner ? '선형' : '격자'}
handlerAreaClick('0006')} + onClick={e => handlerAreaClick('liner')} className='custom-control-primary' type='switch' - id='test06' - name='test06' + id='test07' + name='test07' inline - defaultChecked={mapControl.area0006} + defaultChecked={mapControl.liner} />