|
|
@ -1,5 +1,6 @@ |
|
|
|
import React, { useEffect, useState } from 'react'; |
|
|
|
import React, { useEffect, useState } from 'react'; |
|
|
|
import { Card, CardBody, Button, Input } from 'reactstrap'; |
|
|
|
import { Card, CardBody, Button, Input, Row, Col, InputGroup, InputGroupAddon, InputGroupText, FormGroup } from 'reactstrap'; |
|
|
|
|
|
|
|
import { Search } from 'react-feather' |
|
|
|
import { useDispatch, useSelector } from 'react-redux'; |
|
|
|
import { useDispatch, useSelector } from 'react-redux'; |
|
|
|
import { FeatureAirZone } from '../../../map/naver/feature/FeatureAirZone'; |
|
|
|
import { FeatureAirZone } from '../../../map/naver/feature/FeatureAirZone'; |
|
|
|
import { |
|
|
|
import { |
|
|
@ -28,7 +29,9 @@ const FlightPlanAreaMap = props => { |
|
|
|
initFlightBas.initDetail.areaList |
|
|
|
initFlightBas.initDetail.areaList |
|
|
|
); |
|
|
|
); |
|
|
|
|
|
|
|
|
|
|
|
const [query, setQuery] = useState(); |
|
|
|
const [query, setQuery] = useState(''); |
|
|
|
|
|
|
|
const [searchRes, setSearchRes] = useState([]); |
|
|
|
|
|
|
|
const [isSearch, setIsSearch] = useState(false); |
|
|
|
|
|
|
|
|
|
|
|
useEffect(() => { |
|
|
|
useEffect(() => { |
|
|
|
NaverMapInit(); |
|
|
|
NaverMapInit(); |
|
|
@ -144,6 +147,8 @@ const FlightPlanAreaMap = props => { |
|
|
|
|
|
|
|
|
|
|
|
const handleSearch = async () => { |
|
|
|
const handleSearch = async () => { |
|
|
|
const res = await flightPlanAPI.searchArea({query: query}); |
|
|
|
const res = await flightPlanAPI.searchArea({query: query}); |
|
|
|
|
|
|
|
setIsSearch(true); |
|
|
|
|
|
|
|
setSearchRes(res.data.items); |
|
|
|
}; |
|
|
|
}; |
|
|
|
|
|
|
|
|
|
|
|
const handleChange = e => { |
|
|
|
const handleChange = e => { |
|
|
@ -154,6 +159,19 @@ const FlightPlanAreaMap = props => { |
|
|
|
} |
|
|
|
} |
|
|
|
}; |
|
|
|
}; |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const handleCoord = (mapx, mapy) => { |
|
|
|
|
|
|
|
let utmk = naver.maps.TransCoord.fromTM128ToUTMK(naver.maps.Point(mapx, mapy)); |
|
|
|
|
|
|
|
let latlng = naver.maps.TransCoord.fromUTMKToLatLng(utmk); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
setIsSearch(false); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
let options = { |
|
|
|
|
|
|
|
duration: 800, |
|
|
|
|
|
|
|
easing: 'easeOutCubic' |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
map.morph(latlng, 16, options) |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
return ( |
|
|
|
return ( |
|
|
|
<Card className='mb-0'> |
|
|
|
<Card className='mb-0'> |
|
|
|
<CardBody> |
|
|
|
<CardBody> |
|
|
@ -180,7 +198,65 @@ const FlightPlanAreaMap = props => { |
|
|
|
/> |
|
|
|
/> |
|
|
|
) : null} |
|
|
|
) : null} |
|
|
|
|
|
|
|
|
|
|
|
<div className='map-comp'> |
|
|
|
<div className='search-comp'> |
|
|
|
|
|
|
|
<div className=''> |
|
|
|
|
|
|
|
<InputGroup className='search-feather'> |
|
|
|
|
|
|
|
<InputGroupAddon addonType='prepend'> |
|
|
|
|
|
|
|
<InputGroupText> |
|
|
|
|
|
|
|
<Search |
|
|
|
|
|
|
|
size={14} |
|
|
|
|
|
|
|
onClick={handleSearch} |
|
|
|
|
|
|
|
/> |
|
|
|
|
|
|
|
</InputGroupText> |
|
|
|
|
|
|
|
</InputGroupAddon> |
|
|
|
|
|
|
|
<Input |
|
|
|
|
|
|
|
type='text' |
|
|
|
|
|
|
|
id='searchInput' |
|
|
|
|
|
|
|
name='searchInput' |
|
|
|
|
|
|
|
placeholder='검색명을 입력하세요.' |
|
|
|
|
|
|
|
onChange={handleChange} |
|
|
|
|
|
|
|
bsSize='sm' |
|
|
|
|
|
|
|
autocomplete='off' |
|
|
|
|
|
|
|
/> |
|
|
|
|
|
|
|
</InputGroup> |
|
|
|
|
|
|
|
<div className='search-result-comp'> |
|
|
|
|
|
|
|
<ul> |
|
|
|
|
|
|
|
{searchRes?.length!=0 && isSearch? ( |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
searchRes?.map((prev, idx) => { |
|
|
|
|
|
|
|
let title = prev.title.replace('<b>',' '); |
|
|
|
|
|
|
|
title = title.replace('</b>',' '); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
return ( |
|
|
|
|
|
|
|
<> |
|
|
|
|
|
|
|
<li onClick={() => handleCoord(prev.mapx, prev.mapy)}> |
|
|
|
|
|
|
|
<a> |
|
|
|
|
|
|
|
<div className='search-result'> |
|
|
|
|
|
|
|
<div className='title'> |
|
|
|
|
|
|
|
<span> |
|
|
|
|
|
|
|
<strong>{title}</strong> |
|
|
|
|
|
|
|
</span> |
|
|
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
<div className='address'> |
|
|
|
|
|
|
|
{/* <span>{prev.address}</span> */} |
|
|
|
|
|
|
|
<span>{prev.roadAddress}</span> |
|
|
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
</a> |
|
|
|
|
|
|
|
</li> |
|
|
|
|
|
|
|
</> |
|
|
|
|
|
|
|
) |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
}) |
|
|
|
|
|
|
|
):( |
|
|
|
|
|
|
|
<></> |
|
|
|
|
|
|
|
)} |
|
|
|
|
|
|
|
</ul> |
|
|
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
{/* <div className='map-comp'> |
|
|
|
<Input |
|
|
|
<Input |
|
|
|
type='text' |
|
|
|
type='text' |
|
|
|
id='searchInput' |
|
|
|
id='searchInput' |
|
|
@ -198,21 +274,9 @@ const FlightPlanAreaMap = props => { |
|
|
|
> |
|
|
|
> |
|
|
|
검색 |
|
|
|
검색 |
|
|
|
</Button.Ripple> |
|
|
|
</Button.Ripple> |
|
|
|
{/* <Button.Ripple |
|
|
|
</div> */} |
|
|
|
color='primary' |
|
|
|
|
|
|
|
className='area-button' |
|
|
|
|
|
|
|
onClick={e => handlerDrawType('RESET')} |
|
|
|
|
|
|
|
// {...props.test? (
|
|
|
|
|
|
|
|
// {}
|
|
|
|
|
|
|
|
// ):(
|
|
|
|
|
|
|
|
// {disabled:false}
|
|
|
|
|
|
|
|
// )}
|
|
|
|
|
|
|
|
disabled={props.test} |
|
|
|
|
|
|
|
size='sm' |
|
|
|
|
|
|
|
> |
|
|
|
|
|
|
|
초기화 |
|
|
|
|
|
|
|
</Button.Ripple> */} |
|
|
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
|
|