|
|
|
@ -1,6 +1,9 @@ |
|
|
|
|
|
|
|
import { useEffect, useRef, useState } from 'react'; |
|
|
|
|
|
|
|
import { useDispatch, useSelector } from 'react-redux'; |
|
|
|
|
|
|
|
import { Button, Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap'; |
|
|
|
|
|
|
|
// mapbox
|
|
|
|
import 'mapbox-gl/dist/mapbox-gl.css'; |
|
|
|
import 'mapbox-gl/dist/mapbox-gl.css'; |
|
|
|
import mapboxgl from 'mapbox-gl'; |
|
|
|
import mapboxgl from 'mapbox-gl'; |
|
|
|
import threebox from 'threebox-plugin'; |
|
|
|
|
|
|
|
import MapboxLanguage from '@mapbox/mapbox-gl-language'; |
|
|
|
import MapboxLanguage from '@mapbox/mapbox-gl-language'; |
|
|
|
import MapboxDraw from '@mapbox/mapbox-gl-draw'; |
|
|
|
import MapboxDraw from '@mapbox/mapbox-gl-draw'; |
|
|
|
import { |
|
|
|
import { |
|
|
|
@ -10,18 +13,6 @@ import { |
|
|
|
SimpleSelectMode |
|
|
|
SimpleSelectMode |
|
|
|
} from 'mapbox-gl-draw-circle'; |
|
|
|
} from 'mapbox-gl-draw-circle'; |
|
|
|
import { MAPBOX_TOKEN } from '../../../configs/constants'; |
|
|
|
import { MAPBOX_TOKEN } from '../../../configs/constants'; |
|
|
|
import { useEffect, useRef, useState } from 'react'; |
|
|
|
|
|
|
|
import { useDispatch, useSelector } from 'react-redux'; |
|
|
|
|
|
|
|
import { Button, Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap'; |
|
|
|
|
|
|
|
import { |
|
|
|
|
|
|
|
AREA_COORDINATE_LIST_SAVE, |
|
|
|
|
|
|
|
AREA_DETAIL_LIST_SAVE |
|
|
|
|
|
|
|
} from '../../../modules/basis/flight/actions/basisFlightAction'; |
|
|
|
|
|
|
|
import { |
|
|
|
|
|
|
|
drawTypeChangeAction, |
|
|
|
|
|
|
|
mapInitAction |
|
|
|
|
|
|
|
} from '../../../modules/control/map/actions/controlMapActions'; |
|
|
|
|
|
|
|
import LaancAreaMap from './LaancAreaMap'; |
|
|
|
|
|
|
|
import { |
|
|
|
import { |
|
|
|
InitFeature, |
|
|
|
InitFeature, |
|
|
|
handlerCreatePoint, |
|
|
|
handlerCreatePoint, |
|
|
|
@ -32,20 +23,26 @@ import { |
|
|
|
layerPolyline, |
|
|
|
layerPolyline, |
|
|
|
layerWayPoint |
|
|
|
layerWayPoint |
|
|
|
} from '../../../utility/DrawUtil'; |
|
|
|
} from '../../../utility/DrawUtil'; |
|
|
|
import flatGimpo from '../../map/geojson/flatGimpoAirportAirArea.json'; |
|
|
|
// actions
|
|
|
|
|
|
|
|
import { |
|
|
|
|
|
|
|
AREA_COORDINATE_LIST_SAVE, |
|
|
|
|
|
|
|
AREA_DETAIL_LIST_SAVE |
|
|
|
|
|
|
|
} from '../../../modules/basis/flight/actions/basisFlightAction'; |
|
|
|
|
|
|
|
import { |
|
|
|
|
|
|
|
drawTypeChangeAction, |
|
|
|
|
|
|
|
mapInitAction |
|
|
|
|
|
|
|
} from '../../../modules/control/map/actions/controlMapActions'; |
|
|
|
|
|
|
|
import * as LaancAction from '../../../modules/laanc/actions/laancActions'; |
|
|
|
|
|
|
|
// geojson
|
|
|
|
import gimpo from '../../map/geojson/gimpoAirportAirArea.json'; |
|
|
|
import gimpo from '../../map/geojson/gimpoAirportAirArea.json'; |
|
|
|
import geoJson from '../../map/geojson/airArea.json'; |
|
|
|
|
|
|
|
|
|
|
|
import threebox from 'threebox-plugin'; |
|
|
|
import { FeatureAirZone } from '../../map/mapbox/feature/FeatureAirZone'; |
|
|
|
import { FeatureAirZone } from '../../map/mapbox/feature/FeatureAirZone'; |
|
|
|
import { WeatherContainer } from '../../../containers/basis/flight/plan/WeatherContainer'; |
|
|
|
import { WeatherContainer } from '../../../containers/basis/flight/plan/WeatherContainer'; |
|
|
|
import { initFlightBas } from '../../../modules/laanc/models/laancModels'; |
|
|
|
import { initFlightBas } from '../../../modules/laanc/models/laancModels'; |
|
|
|
import * as LaancAction from '../../../modules/laanc/actions/laancActions'; |
|
|
|
import LaancAreaMap from './LaancAreaMap'; |
|
|
|
import LaancDrawModal from './LaancDrawModal'; |
|
|
|
import LaancDrawModal from './LaancDrawModal'; |
|
|
|
|
|
|
|
import { handlerCreateAirSpace } from './LaancComn'; |
|
|
|
const initialAddData = { |
|
|
|
|
|
|
|
isAddable: false, |
|
|
|
|
|
|
|
isViewAdd: false, |
|
|
|
|
|
|
|
overAdd: false |
|
|
|
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
export default function FlightArea({ |
|
|
|
export default function FlightArea({ |
|
|
|
centeredModal, |
|
|
|
centeredModal, |
|
|
|
@ -61,40 +58,65 @@ export default function FlightArea({ |
|
|
|
></script>; |
|
|
|
></script>; |
|
|
|
|
|
|
|
|
|
|
|
const dispatch = useDispatch(); |
|
|
|
const dispatch = useDispatch(); |
|
|
|
const { areaCoordList } = useSelector(state => state.flightState); |
|
|
|
// 비행구역 타입 및 공역 타입
|
|
|
|
const mapControl = useSelector(state => state.controlMapReducer); |
|
|
|
const mapControl = useSelector(state => state.controlMapReducer); |
|
|
|
|
|
|
|
|
|
|
|
const mapContainer = useRef(null); |
|
|
|
// 비행구역 정보 저장
|
|
|
|
|
|
|
|
const { areaCoordList } = useSelector(state => state.flightState); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// 지도
|
|
|
|
const [mapObject, setMapObject] = useState(); |
|
|
|
const [mapObject, setMapObject] = useState(); |
|
|
|
const [drawObj, setDrawObj] = useState(); |
|
|
|
const mapContainer = useRef(null); |
|
|
|
|
|
|
|
// 지도 로드 여부
|
|
|
|
const [isMapLoad, setIsMapLoad] = useState(false); |
|
|
|
const [isMapLoad, setIsMapLoad] = useState(false); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// 비행구역 그리기
|
|
|
|
|
|
|
|
const [drawObj, setDrawObj] = useState(); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// 미니맵 레이어
|
|
|
|
const [previewLayer, setPreviewLayer] = useState(); |
|
|
|
const [previewLayer, setPreviewLayer] = useState(); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// 날씨 모달
|
|
|
|
const [formModal, setFormModal] = useState(false); |
|
|
|
const [formModal, setFormModal] = useState(false); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// 비행구역 설정 관련 모달
|
|
|
|
const [modal, setModal] = useState({ |
|
|
|
const [modal, setModal] = useState({ |
|
|
|
title: '', |
|
|
|
title: '', |
|
|
|
desc: '', |
|
|
|
desc: '', |
|
|
|
isOpen: false |
|
|
|
isOpen: false |
|
|
|
}); |
|
|
|
}); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// 비행구역 저장 가능 여부
|
|
|
|
const [isSaveable, setIsSaveable] = useState(false); |
|
|
|
const [isSaveable, setIsSaveable] = useState(false); |
|
|
|
const [addData, setAddData] = useState(initialAddData); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// 비행구역 추가 가능 여부 판단
|
|
|
|
|
|
|
|
const [addData, setAddData] = useState({ |
|
|
|
|
|
|
|
isAddable: false, |
|
|
|
|
|
|
|
isViewAdd: false, |
|
|
|
|
|
|
|
overAdd: false |
|
|
|
|
|
|
|
}); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// 저장된 비행구역 데이터
|
|
|
|
const [saveData, setSaveData] = useState(); |
|
|
|
const [saveData, setSaveData] = useState(); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// 비행구역 고도
|
|
|
|
const [saveElev, setSaveElev] = useState(); |
|
|
|
const [saveElev, setSaveElev] = useState(); |
|
|
|
|
|
|
|
|
|
|
|
//날씨 임시 데이터
|
|
|
|
//날씨 위치 데이터
|
|
|
|
const [wheather, setWheather] = useState([]); |
|
|
|
const [wheather, setWheather] = useState([]); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// 미니맵에 표출되는 비행구역 정보
|
|
|
|
const previewGeo = { |
|
|
|
const previewGeo = { |
|
|
|
type: 'FeatureCollection', |
|
|
|
type: 'FeatureCollection', |
|
|
|
features: [] |
|
|
|
features: [] |
|
|
|
}; |
|
|
|
}; |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// 지도 초기 셋팅
|
|
|
|
useEffect(() => { |
|
|
|
useEffect(() => { |
|
|
|
handlerMapInit(); |
|
|
|
handlerMapInit(); |
|
|
|
}, []); |
|
|
|
}, []); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// 미니맵에 비행구역 표출 및 날씨 정보 저장
|
|
|
|
useEffect(() => { |
|
|
|
useEffect(() => { |
|
|
|
if (areaCoordList) { |
|
|
|
if (areaCoordList) { |
|
|
|
const area = areaCoordList[0]; |
|
|
|
const area = areaCoordList[0]; |
|
|
|
@ -105,78 +127,12 @@ export default function FlightArea({ |
|
|
|
} |
|
|
|
} |
|
|
|
}, [areaCoordList, centeredModal, previewLayer]); |
|
|
|
}, [areaCoordList, centeredModal, previewLayer]); |
|
|
|
|
|
|
|
|
|
|
|
const handlerCreateAirSpace = ( |
|
|
|
// 비행구역 설정 관련 모달 표출
|
|
|
|
map, |
|
|
|
|
|
|
|
useGeoJson = { |
|
|
|
|
|
|
|
...geoJson, |
|
|
|
|
|
|
|
...flatGimpo, |
|
|
|
|
|
|
|
features: [...geoJson.features, ...flatGimpo.features] |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
) => { |
|
|
|
|
|
|
|
if (map.getLayer('maine')) { |
|
|
|
|
|
|
|
map.removeLayer('maine'); |
|
|
|
|
|
|
|
map.removeSource('maine'); |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
let arrGeoJson = []; |
|
|
|
|
|
|
|
useGeoJson.features.map(item => { |
|
|
|
|
|
|
|
if (item.properties.type === '0001' && mapControl.area0001) { |
|
|
|
|
|
|
|
arrGeoJson.push({ |
|
|
|
|
|
|
|
...item, |
|
|
|
|
|
|
|
properties: { ...item.properties, color: '#FF3648' } |
|
|
|
|
|
|
|
}); |
|
|
|
|
|
|
|
} else if (item.properties.type === '0002' && mapControl.area0002) { |
|
|
|
|
|
|
|
arrGeoJson.push({ |
|
|
|
|
|
|
|
...item, |
|
|
|
|
|
|
|
properties: { ...item.properties, color: '#FFA1AA' } |
|
|
|
|
|
|
|
}); |
|
|
|
|
|
|
|
} else if (item.properties.type === '0003' && mapControl.area0003) { |
|
|
|
|
|
|
|
arrGeoJson.push({ |
|
|
|
|
|
|
|
...item, |
|
|
|
|
|
|
|
properties: { ...item.properties, color: '#FFA800' } |
|
|
|
|
|
|
|
}); |
|
|
|
|
|
|
|
} else if (item.properties.type === '0004' && mapControl.area0004) { |
|
|
|
|
|
|
|
arrGeoJson.push({ |
|
|
|
|
|
|
|
...item, |
|
|
|
|
|
|
|
properties: { ...item.properties, color: '#A16B00' } |
|
|
|
|
|
|
|
}); |
|
|
|
|
|
|
|
} else if (item.properties.type === '0005' && mapControl.area0005) { |
|
|
|
|
|
|
|
arrGeoJson.push({ |
|
|
|
|
|
|
|
...item, |
|
|
|
|
|
|
|
properties: { ...item.properties, color: '#AB40FF' } |
|
|
|
|
|
|
|
}); |
|
|
|
|
|
|
|
} else if (item.properties.type === '0006' && mapControl.area0006) { |
|
|
|
|
|
|
|
arrGeoJson.push({ |
|
|
|
|
|
|
|
...item, |
|
|
|
|
|
|
|
properties: { ...item.properties, color: '#009cad' } |
|
|
|
|
|
|
|
}); |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
}); |
|
|
|
|
|
|
|
useGeoJson.features = arrGeoJson.filter(i => i.geometry.type === 'Polygon'); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// 공역 생성 start
|
|
|
|
|
|
|
|
map.addSource('maine', { |
|
|
|
|
|
|
|
type: 'geojson', |
|
|
|
|
|
|
|
data: { |
|
|
|
|
|
|
|
...useGeoJson |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
}); |
|
|
|
|
|
|
|
map.addLayer({ |
|
|
|
|
|
|
|
id: 'maine', |
|
|
|
|
|
|
|
type: 'fill', |
|
|
|
|
|
|
|
source: 'maine', |
|
|
|
|
|
|
|
layout: {}, |
|
|
|
|
|
|
|
paint: { |
|
|
|
|
|
|
|
'fill-color': ['get', 'color'], |
|
|
|
|
|
|
|
// 'fill-extrusion-height': 3000,
|
|
|
|
|
|
|
|
'fill-opacity': 0.5 |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
}); |
|
|
|
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const handlerModal = () => { |
|
|
|
const handlerModal = () => { |
|
|
|
setModal(!modal); |
|
|
|
setModal(!modal); |
|
|
|
}; |
|
|
|
}; |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// 비행구역 타입 변경 시 그리기 모드 상태일 때 에러 표출
|
|
|
|
const handlerDrawType = val => { |
|
|
|
const handlerDrawType = val => { |
|
|
|
if (drawObj.getMode().includes('draw')) { |
|
|
|
if (drawObj.getMode().includes('draw')) { |
|
|
|
setModal({ |
|
|
|
setModal({ |
|
|
|
@ -195,6 +151,7 @@ export default function FlightArea({ |
|
|
|
} |
|
|
|
} |
|
|
|
}; |
|
|
|
}; |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// laanc계획서 비행구역 저장버튼 클릭 시 비행구역 정보 저장
|
|
|
|
const handlerSave = async () => { |
|
|
|
const handlerSave = async () => { |
|
|
|
if (areaCoordList) { |
|
|
|
if (areaCoordList) { |
|
|
|
console.log('save'); |
|
|
|
console.log('save'); |
|
|
|
@ -208,29 +165,28 @@ export default function FlightArea({ |
|
|
|
|
|
|
|
|
|
|
|
setCenteredModal(false); |
|
|
|
setCenteredModal(false); |
|
|
|
dispatch(AREA_DETAIL_LIST_SAVE(resultAreaDetail)); |
|
|
|
dispatch(AREA_DETAIL_LIST_SAVE(resultAreaDetail)); |
|
|
|
} else { |
|
|
|
|
|
|
|
alert('아무것도 작성 안함'); |
|
|
|
|
|
|
|
} |
|
|
|
} |
|
|
|
}; |
|
|
|
}; |
|
|
|
|
|
|
|
|
|
|
|
// 날씨 handler
|
|
|
|
// 날씨 모달 표출
|
|
|
|
const handlerWeather = () => { |
|
|
|
const handlerWeather = () => { |
|
|
|
setFormModal(!formModal); |
|
|
|
setFormModal(!formModal); |
|
|
|
}; |
|
|
|
}; |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// 지도 초기 셋팅
|
|
|
|
const handlerMapInit = () => { |
|
|
|
const handlerMapInit = () => { |
|
|
|
mapboxgl.accessToken = MAPBOX_TOKEN; |
|
|
|
mapboxgl.accessToken = MAPBOX_TOKEN; |
|
|
|
|
|
|
|
|
|
|
|
const map = new mapboxgl.Map({ |
|
|
|
const map = new mapboxgl.Map({ |
|
|
|
container: 'preview', // container ID
|
|
|
|
container: 'preview', |
|
|
|
style: 'mapbox://styles/mapbox/streets-v12', // style URL
|
|
|
|
style: 'mapbox://styles/mapbox/streets-v12', |
|
|
|
center: [126.612647, 37.519893], // starting position [lng, lat]
|
|
|
|
center: [126.612647, 37.519893], |
|
|
|
// zoom: !areaCoordList ? 14 : bufferZoom.bufferzoom, // starting zoom
|
|
|
|
|
|
|
|
zoom: 15, |
|
|
|
zoom: 15, |
|
|
|
antialias: true, |
|
|
|
antialias: true, |
|
|
|
attributionControl: false |
|
|
|
attributionControl: false |
|
|
|
}); |
|
|
|
}); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// 비행구역 상세맵 draw 정보 셋팅
|
|
|
|
const draw = new MapboxDraw({ |
|
|
|
const draw = new MapboxDraw({ |
|
|
|
displayControlsDefault: false, |
|
|
|
displayControlsDefault: false, |
|
|
|
userProperties: true, |
|
|
|
userProperties: true, |
|
|
|
@ -243,16 +199,14 @@ export default function FlightArea({ |
|
|
|
simple_select: SimpleSelectMode |
|
|
|
simple_select: SimpleSelectMode |
|
|
|
}, |
|
|
|
}, |
|
|
|
styles: [ |
|
|
|
styles: [ |
|
|
|
// line stroke
|
|
|
|
|
|
|
|
{ |
|
|
|
{ |
|
|
|
|
|
|
|
// polyline
|
|
|
|
id: 'gl-draw-line', |
|
|
|
id: 'gl-draw-line', |
|
|
|
type: 'line', |
|
|
|
type: 'line', |
|
|
|
filter: [ |
|
|
|
filter: [ |
|
|
|
'all', |
|
|
|
'all', |
|
|
|
['==', '$type', 'LineString'], |
|
|
|
['==', '$type', 'LineString'], |
|
|
|
['!=', 'mode', 'static'] |
|
|
|
['!=', 'mode', 'static'] |
|
|
|
// ['==', 'meta', 'feature'],
|
|
|
|
|
|
|
|
// ['==', 'active', 'false']
|
|
|
|
|
|
|
|
], |
|
|
|
], |
|
|
|
layout: { |
|
|
|
layout: { |
|
|
|
'line-cap': 'round', |
|
|
|
'line-cap': 'round', |
|
|
|
@ -264,28 +218,8 @@ export default function FlightArea({ |
|
|
|
'line-width': 2 |
|
|
|
'line-width': 2 |
|
|
|
} |
|
|
|
} |
|
|
|
}, |
|
|
|
}, |
|
|
|
// direct line stroke
|
|
|
|
|
|
|
|
// {
|
|
|
|
|
|
|
|
// id: 'gl-draw-line-active',
|
|
|
|
|
|
|
|
// type: 'line',
|
|
|
|
|
|
|
|
// filter: [
|
|
|
|
|
|
|
|
// 'all',
|
|
|
|
|
|
|
|
// ['==', '$type', 'LineString'],
|
|
|
|
|
|
|
|
// ['==', 'meta', 'feature'],
|
|
|
|
|
|
|
|
// ['==', 'active', 'true']
|
|
|
|
|
|
|
|
// ],
|
|
|
|
|
|
|
|
// layout: {
|
|
|
|
|
|
|
|
// 'line-cap': 'round',
|
|
|
|
|
|
|
|
// 'line-join': 'round'
|
|
|
|
|
|
|
|
// },
|
|
|
|
|
|
|
|
// paint: {
|
|
|
|
|
|
|
|
// 'line-color': '#000000',
|
|
|
|
|
|
|
|
// 'line-dasharray': [0.2, 2],
|
|
|
|
|
|
|
|
// 'line-width': 2
|
|
|
|
|
|
|
|
// }
|
|
|
|
|
|
|
|
// },
|
|
|
|
|
|
|
|
// polygon fill
|
|
|
|
|
|
|
|
{ |
|
|
|
{ |
|
|
|
|
|
|
|
// polygon fill
|
|
|
|
id: 'gl-draw-polygon-fill', |
|
|
|
id: 'gl-draw-polygon-fill', |
|
|
|
type: 'fill', |
|
|
|
type: 'fill', |
|
|
|
filter: ['all', ['==', '$type', 'Polygon'], ['!=', 'mode', 'static']], |
|
|
|
filter: ['all', ['==', '$type', 'Polygon'], ['!=', 'mode', 'static']], |
|
|
|
@ -295,18 +229,7 @@ export default function FlightArea({ |
|
|
|
'fill-opacity': 0.1 |
|
|
|
'fill-opacity': 0.1 |
|
|
|
} |
|
|
|
} |
|
|
|
}, |
|
|
|
}, |
|
|
|
// polygon mid points
|
|
|
|
// polygon outline
|
|
|
|
{ |
|
|
|
|
|
|
|
id: 'gl-draw-polygon-midpoint', |
|
|
|
|
|
|
|
type: 'circle', |
|
|
|
|
|
|
|
filter: ['all', ['==', '$type', 'Point'], ['==', 'meta', 'midpoint']], |
|
|
|
|
|
|
|
paint: { |
|
|
|
|
|
|
|
'circle-radius': 4, |
|
|
|
|
|
|
|
'circle-color': '#8a1c05' |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
}, |
|
|
|
|
|
|
|
// polygon outline stroke
|
|
|
|
|
|
|
|
// This doesn't style the first edge of the polygon, which uses the line stroke styling instead
|
|
|
|
|
|
|
|
{ |
|
|
|
{ |
|
|
|
id: 'gl-draw-polygon-stroke-active', |
|
|
|
id: 'gl-draw-polygon-stroke-active', |
|
|
|
type: 'line', |
|
|
|
type: 'line', |
|
|
|
@ -321,8 +244,8 @@ export default function FlightArea({ |
|
|
|
'line-width': 2 |
|
|
|
'line-width': 2 |
|
|
|
} |
|
|
|
} |
|
|
|
}, |
|
|
|
}, |
|
|
|
// vertex point halos
|
|
|
|
|
|
|
|
{ |
|
|
|
{ |
|
|
|
|
|
|
|
// vertex point halos
|
|
|
|
id: 'gl-draw-polygon-and-line-vertex-halo-active', |
|
|
|
id: 'gl-draw-polygon-and-line-vertex-halo-active', |
|
|
|
type: 'circle', |
|
|
|
type: 'circle', |
|
|
|
filter: [ |
|
|
|
filter: [ |
|
|
|
@ -333,11 +256,11 @@ export default function FlightArea({ |
|
|
|
], |
|
|
|
], |
|
|
|
paint: { |
|
|
|
paint: { |
|
|
|
'circle-radius': 8, |
|
|
|
'circle-radius': 8, |
|
|
|
'circle-color': '#fff' |
|
|
|
'circle-color': '#ffffff' |
|
|
|
} |
|
|
|
} |
|
|
|
}, |
|
|
|
}, |
|
|
|
// vertex points
|
|
|
|
|
|
|
|
{ |
|
|
|
{ |
|
|
|
|
|
|
|
// vertex points
|
|
|
|
id: 'gl-draw-polygon-and-line-vertex-active', |
|
|
|
id: 'gl-draw-polygon-and-line-vertex-active', |
|
|
|
type: 'circle', |
|
|
|
type: 'circle', |
|
|
|
filter: [ |
|
|
|
filter: [ |
|
|
|
@ -359,7 +282,6 @@ export default function FlightArea({ |
|
|
|
|
|
|
|
|
|
|
|
const language = new MapboxLanguage(); |
|
|
|
const language = new MapboxLanguage(); |
|
|
|
map.addControl(language); |
|
|
|
map.addControl(language); |
|
|
|
// map.addControl(draw);
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const tb = (window.tb = new threebox.Threebox( |
|
|
|
const tb = (window.tb = new threebox.Threebox( |
|
|
|
map, |
|
|
|
map, |
|
|
|
@ -396,7 +318,7 @@ export default function FlightArea({ |
|
|
|
} |
|
|
|
} |
|
|
|
}); |
|
|
|
}); |
|
|
|
|
|
|
|
|
|
|
|
handlerCreateAirSpace(map); |
|
|
|
handlerCreateAirSpace(map, mapControl); |
|
|
|
|
|
|
|
|
|
|
|
// 미니맵 표출
|
|
|
|
// 미니맵 표출
|
|
|
|
map.addSource('preview', { |
|
|
|
map.addSource('preview', { |
|
|
|
@ -417,6 +339,7 @@ export default function FlightArea({ |
|
|
|
dispatch(mapInitAction(map)); |
|
|
|
dispatch(mapInitAction(map)); |
|
|
|
}; |
|
|
|
}; |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// 저장된 비행구역 미니맵에 표출
|
|
|
|
const handlerPreviewDraw = () => { |
|
|
|
const handlerPreviewDraw = () => { |
|
|
|
if (areaCoordList) { |
|
|
|
if (areaCoordList) { |
|
|
|
const areas = areaCoordList[0]; |
|
|
|
const areas = areaCoordList[0]; |
|
|
|
@ -427,7 +350,6 @@ export default function FlightArea({ |
|
|
|
|
|
|
|
|
|
|
|
let fitZoomPaths = []; |
|
|
|
let fitZoomPaths = []; |
|
|
|
|
|
|
|
|
|
|
|
// 기존
|
|
|
|
|
|
|
|
if (areas.areaType) { |
|
|
|
if (areas.areaType) { |
|
|
|
if (areas.areaType === 'CIRCLE') { |
|
|
|
if (areas.areaType === 'CIRCLE') { |
|
|
|
const radius = areas.bufferZone; |
|
|
|
const radius = areas.bufferZone; |
|
|
|
@ -478,12 +400,8 @@ export default function FlightArea({ |
|
|
|
|
|
|
|
|
|
|
|
//지도 줌 좌표 설정
|
|
|
|
//지도 줌 좌표 설정
|
|
|
|
fitZoomPaths = paths.concat(); |
|
|
|
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); |
|
|
|
handlerFitBounds(mapObject, fitZoomPaths, 50, areas.areaType); |
|
|
|
|
|
|
|
|
|
|
|
mapObject.setPaintProperty('waypoint', 'circle-radius', 10); |
|
|
|
mapObject.setPaintProperty('waypoint', 'circle-radius', 10); |
|
|
|
@ -491,12 +409,13 @@ export default function FlightArea({ |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
const coordValue = []; |
|
|
|
const coordValue = []; |
|
|
|
const coord = paths?.map(coords => { |
|
|
|
paths?.map(coords => { |
|
|
|
coordValue.push({ |
|
|
|
coordValue.push({ |
|
|
|
lat: coords[1], |
|
|
|
lat: coords[1], |
|
|
|
lon: coords[0] |
|
|
|
lon: coords[0] |
|
|
|
}); |
|
|
|
}); |
|
|
|
}); |
|
|
|
}); |
|
|
|
|
|
|
|
|
|
|
|
if (page === 1) { |
|
|
|
if (page === 1) { |
|
|
|
naver.maps.Service.reverseGeocode( |
|
|
|
naver.maps.Service.reverseGeocode( |
|
|
|
{ |
|
|
|
{ |
|
|
|
@ -527,7 +446,6 @@ export default function FlightArea({ |
|
|
|
name: 'latlon', |
|
|
|
name: 'latlon', |
|
|
|
value: coordValue |
|
|
|
value: coordValue |
|
|
|
}); |
|
|
|
}); |
|
|
|
//스텝1에 반경도 글씨가 바뀌어야 함...!!
|
|
|
|
|
|
|
|
handleChange({ |
|
|
|
handleChange({ |
|
|
|
type: 'area', |
|
|
|
type: 'area', |
|
|
|
name: 'bufferZone', |
|
|
|
name: 'bufferZone', |
|
|
|
@ -537,38 +455,33 @@ export default function FlightArea({ |
|
|
|
} |
|
|
|
} |
|
|
|
}; |
|
|
|
}; |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// 비행구역 추가 버튼 클릭 시
|
|
|
|
const handlerAddClick = () => { |
|
|
|
const handlerAddClick = () => { |
|
|
|
if (!addData.isAddable || !addData.overAdd) { |
|
|
|
if (!addData.isAddable || !addData.overAdd) { |
|
|
|
handlerAddChange('isAddable', true); |
|
|
|
handlerAddChange('isAddable', true); |
|
|
|
const obj = drawObj |
|
|
|
|
|
|
|
.getAll() |
|
|
|
|
|
|
|
.features.filter(obj => obj.properties.id !== 'BUFFER'); |
|
|
|
|
|
|
|
// handlerDrawType(obj[0].properties.id);
|
|
|
|
|
|
|
|
} |
|
|
|
} |
|
|
|
}; |
|
|
|
}; |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// 비행구역 추가 관련 상태 변경
|
|
|
|
const handlerAddChange = (key, val) => { |
|
|
|
const handlerAddChange = (key, val) => { |
|
|
|
// const [addData, setAddData] = useState({
|
|
|
|
|
|
|
|
// isAddalbe: false,
|
|
|
|
|
|
|
|
// isViewAdd: false,
|
|
|
|
|
|
|
|
// overAdd: false
|
|
|
|
|
|
|
|
// })
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
setAddData(prev => ({ |
|
|
|
setAddData(prev => ({ |
|
|
|
...prev, |
|
|
|
...prev, |
|
|
|
[key]: val |
|
|
|
[key]: val |
|
|
|
})); |
|
|
|
})); |
|
|
|
}; |
|
|
|
}; |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// 비행구역 저장 가능 유무 체크
|
|
|
|
const handlerSaveCheck = save => { |
|
|
|
const handlerSaveCheck = save => { |
|
|
|
setIsSaveable(save); |
|
|
|
setIsSaveable(save); |
|
|
|
}; |
|
|
|
}; |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// 비행구역 데이터 초기화
|
|
|
|
const handlerInitCoordinates = () => { |
|
|
|
const handlerInitCoordinates = () => { |
|
|
|
const init = initFlightBas.initDetail.areaList.concat(); |
|
|
|
const init = initFlightBas.initDetail.areaList.concat(); |
|
|
|
dispatch(AREA_COORDINATE_LIST_SAVE(init)); |
|
|
|
dispatch(AREA_COORDINATE_LIST_SAVE(init)); |
|
|
|
}; |
|
|
|
}; |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// 비행구역 고도 저장
|
|
|
|
const handlerSaveElev = elev => { |
|
|
|
const handlerSaveElev = elev => { |
|
|
|
setSaveElev(elev); |
|
|
|
setSaveElev(elev); |
|
|
|
}; |
|
|
|
}; |
|
|
|
@ -604,7 +517,6 @@ export default function FlightArea({ |
|
|
|
</ModalHeader> |
|
|
|
</ModalHeader> |
|
|
|
<ModalBody> |
|
|
|
<ModalBody> |
|
|
|
<LaancAreaMap |
|
|
|
<LaancAreaMap |
|
|
|
centeredModal={centeredModal} |
|
|
|
|
|
|
|
mapContainer={mapContainer} |
|
|
|
mapContainer={mapContainer} |
|
|
|
drawObj={drawObj} |
|
|
|
drawObj={drawObj} |
|
|
|
handlerInitCoordinates={handlerInitCoordinates} |
|
|
|
handlerInitCoordinates={handlerInitCoordinates} |
|
|
|
@ -684,7 +596,6 @@ export default function FlightArea({ |
|
|
|
dispatch(LaancAction.LAANC_ALTITUDE.success(saveElev)); |
|
|
|
dispatch(LaancAction.LAANC_ALTITUDE.success(saveElev)); |
|
|
|
}} |
|
|
|
}} |
|
|
|
> |
|
|
|
> |
|
|
|
{/* 닫기 */} |
|
|
|
|
|
|
|
저장 |
|
|
|
저장 |
|
|
|
</Button> |
|
|
|
</Button> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
|
