- 비행 구역 설정
- setCenteredModal(!centeredModal)}>
+ setCenteredModal(!centeredModal)}
+ >
자세히보기
diff --git a/src/views/laanc/LaancAreaMap.js b/src/views/laanc/LaancAreaMap.js
new file mode 100644
index 0000000..7440052
--- /dev/null
+++ b/src/views/laanc/LaancAreaMap.js
@@ -0,0 +1,255 @@
+import 'mapbox-gl/dist/mapbox-gl.css';
+import mapboxgl from 'mapbox-gl';
+import MapboxLanguage from '@mapbox/mapbox-gl-language';
+import { MAPBOX_TOKEN } from '../../configs/constants';
+import { useEffect, useRef, useState } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import {
+ Card,
+ CardBody,
+ Input,
+ InputGroup,
+ InputGroupAddon,
+ InputGroupText
+} from 'reactstrap';
+import { Search } from 'react-feather';
+import { initFlightBas } from '../../modules/basis/flight/models/basisFlightModel';
+import {
+ AREA_COORDINATE_LIST_SAVE,
+ AREA_DETAIL_INIT,
+ FLIGHT_PLAN_AREA_BUFFER_LIST
+} from '../../modules/basis/flight/actions/basisFlightAction';
+import { flightPlanAPI } from '../../modules/basis/flight/apis/basisFlightApi';
+import { LanncDraw } from '../../components/map/mapbox/draw/LanncDraw';
+import { drawTypeChangeAction } from '../../modules/control/map/actions/controlMapActions';
+
+export default function LaancAreaMap({
+ centeredModal,
+ handlerMapInit,
+ mapObject
+}) {
+ const dispatch = useDispatch();
+ const mapControl = useSelector(state => state.controlMapReducer);
+ const { areaCoordList } = useSelector(state => state.flightState);
+
+ const mapContainer = useRef(null);
+ const [isMapLoad, setIsMapLoad] = useState(false);
+ const [mode, setMode] = useState();
+ const [mapAreaCoordList, setMapAreaCoordList] = useState(
+ initFlightBas.initDetail.areaList
+ );
+
+ const [query, setQuery] = useState('');
+ const [searchRes, setSearchRes] = useState([]);
+ const [isSearch, setIsSearch] = useState(false);
+
+ const [number, setNumber] = useState(0);
+
+ const geojson = {
+ type: 'FeatureCollection',
+ features: []
+ };
+
+ useEffect(() => {
+ handlerMapInit('detail');
+
+ return () => {
+ dispatch(AREA_DETAIL_INIT());
+ };
+ }, []);
+
+ useEffect(() => {
+ setMode(mapControl.drawType);
+ }, [mapControl.drawType]);
+
+ useEffect(() => {
+ if (areaCoordList && mapObject) {
+ if (
+ areaCoordList[0].coordList[0].lat !== 0 &&
+ areaCoordList[0].coordList[0].lon !== 0
+ ) {
+ if (number === 0) {
+ mapObject.setCenter([
+ areaCoordList[0].coordList[0].lon,
+ areaCoordList[0].coordList[0].lat
+ ]);
+ setNumber(number + 1);
+ }
+ }
+ setMapAreaCoordList(areaCoordList);
+ }
+ }, [areaCoordList, mapObject, number]);
+
+ //지역 검색
+ const handlerSearch = async () => {
+ const res = await flightPlanAPI.searchArea({ query: query });
+ setIsSearch(true);
+ setSearchRes(res.data.items);
+ };
+
+ const handlerChange = e => {
+ const { name, value } = e.target;
+
+ if (name == 'searchInput') {
+ setQuery(value);
+ }
+ };
+
+ const handlerEnter = e => {
+ if (e.key == 'Enter') {
+ handlerSearch();
+ }
+ };
+
+ const handlerCoord = (mapx, mapy) => {
+ const numberString = [mapx, mapy];
+ const latlng = [];
+
+ numberString.map(coord => {
+ let digits = coord.split('');
+
+ if (digits[0] !== '1') {
+ digits.splice(2, 0, '.');
+ } else {
+ digits.splice(3, 0, '.');
+ }
+
+ latlng.push(Number(digits.join('')));
+ });
+
+ setIsSearch(false);
+ mapObject.setCenter(latlng);
+ mapObject.setZoom(15);
+ };
+
+ const handlerDrawType = val => {
+ dispatch(drawTypeChangeAction(val));
+ };
+
+ const handlerInitCoordinates = () => {
+ const init = initFlightBas.initDetail.areaList.concat();
+ dispatch(AREA_COORDINATE_LIST_SAVE(init));
+ };
+
+ const handlerCoordinates = areaInfo => {
+ const initAreaList = initFlightBas.initDetail.areaList.concat();
+ const coordList = [];
+
+ areaInfo.coordinates.forEach((c, idx) => {
+ const coord = Object.assign({}, initFlightBas['coord']);
+ coord.lat = c.lat;
+ coord.lon = c.lon;
+
+ coordList.push(coord);
+ });
+
+ const areaList = initAreaList.map((area, idx) => {
+ return {
+ ...area,
+ bufferZone: areaInfo.bufferZone,
+ areaType: areaInfo.areaType,
+ coordList: coordList
+ };
+ });
+
+ if (areaInfo.areaType === 'LINE' || areaInfo.areaType === 'POLYGON') {
+ dispatch(FLIGHT_PLAN_AREA_BUFFER_LIST.request(areaList));
+ } else {
+ setMapAreaCoordList(areaList);
+ }
+ };
+
+ const handlerConfirm = areaList => {
+ if (areaList === undefined) {
+ alert('영역을 설정해 주세요.');
+ return false;
+ }
+
+ dispatch(AREA_COORDINATE_LIST_SAVE(areaList));
+ };
+
+ return (
+
+
+
+
+ {isMapLoad && mapObject ? (
+
+ ) : null}
+
+
+
+
+
+
+
+
+
+
+
+ {searchRes?.length !== 0 && isSearch ? (
+ searchRes?.map(search => {
+ const title = search.title
+ .replaceAll('', '')
+ .replaceAll(' ', '');
+
+ return (
+
+ handlerCoord(search.mapx, search.mapy)
+ }
+ >
+
+
+
+
+ {title}
+
+
+
+ {search.roadAddress}
+
+
+
+ );
+ })
+ ) : (
+ <>
+ )}
+
+
+
+
+
+
+
+ );
+}