|
|
|
@ -32,7 +32,6 @@ import geoJson from '../../map/geojson/airArea.json';
|
|
|
|
|
import { FeatureAirZone } from '../../map/mapbox/feature/FeatureAirZone'; |
|
|
|
|
import LaancMapSearch from './LaancMapSearch'; |
|
|
|
|
import { LaancDrawControl } from './LaancDrawControl'; |
|
|
|
|
import LaancModal from '../../map/mapbox/draw/LaancModal'; |
|
|
|
|
|
|
|
|
|
export default function LaancAreaMap({ |
|
|
|
|
centeredModal, |
|
|
|
@ -43,7 +42,8 @@ export default function LaancAreaMap({
|
|
|
|
|
addData, |
|
|
|
|
handlerInitCoordinates, |
|
|
|
|
setSaveData, |
|
|
|
|
handlerSaveElev |
|
|
|
|
handlerSaveElev, |
|
|
|
|
setModal |
|
|
|
|
}) { |
|
|
|
|
const dispatch = useDispatch(); |
|
|
|
|
const mapControl = useSelector(state => state.controlMapReducer); |
|
|
|
@ -57,11 +57,11 @@ export default function LaancAreaMap({
|
|
|
|
|
); |
|
|
|
|
|
|
|
|
|
const [number, setNumber] = useState(0); |
|
|
|
|
const [modal, setModal] = useState({ |
|
|
|
|
title: '', |
|
|
|
|
desc: '', |
|
|
|
|
isOpen: false |
|
|
|
|
}); |
|
|
|
|
// const [modal, setModal] = useState({
|
|
|
|
|
// title: '',
|
|
|
|
|
// desc: '',
|
|
|
|
|
// isOpen: false
|
|
|
|
|
// });
|
|
|
|
|
|
|
|
|
|
const [detailLayer, setDetailLayer] = useState(); |
|
|
|
|
|
|
|
|
@ -315,9 +315,9 @@ export default function LaancAreaMap({
|
|
|
|
|
dispatch(AREA_COORDINATE_LIST_SAVE(areaList)); |
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
const handlerModal = () => { |
|
|
|
|
setModal(!modal); |
|
|
|
|
}; |
|
|
|
|
// const handlerModal = () => {
|
|
|
|
|
// setModal(!modal);
|
|
|
|
|
// };
|
|
|
|
|
|
|
|
|
|
return ( |
|
|
|
|
<Card className='mb-0'> |
|
|
|
@ -325,73 +325,72 @@ export default function LaancAreaMap({
|
|
|
|
|
<div style={{ position: 'relative' }}> |
|
|
|
|
<LaancMapSearch mapObject={mapObject} /> |
|
|
|
|
<div className='d-flex coords-wrap'> |
|
|
|
|
{mapObject && viewCoordObj.length > 0 ? ( |
|
|
|
|
<div className='coords-box'> |
|
|
|
|
{/* {console.log(viewCoordObj, '----')} */} |
|
|
|
|
{viewCoordObj?.map((obj, i) => { |
|
|
|
|
let coord = |
|
|
|
|
obj.properties.id === 'LINE' |
|
|
|
|
? obj.geometry.coordinates |
|
|
|
|
: obj.geometry.coordinates[0]; |
|
|
|
|
if (obj.properties.id === 'POLYGON') { |
|
|
|
|
coord = coord.slice(0, coord.length - 1); |
|
|
|
|
} else if (obj.properties.id === 'CIRCLE') { |
|
|
|
|
coord = [obj.properties.center]; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
return ( |
|
|
|
|
<div |
|
|
|
|
key={i} |
|
|
|
|
onClick={() => { |
|
|
|
|
const allObj = drawObj |
|
|
|
|
.getAll() |
|
|
|
|
.features.filter(o => o.properties.id !== 'BUFFER'); |
|
|
|
|
|
|
|
|
|
drawObj.changeMode('direct_select', { |
|
|
|
|
featureId: allObj[i].id |
|
|
|
|
}); |
|
|
|
|
}} |
|
|
|
|
> |
|
|
|
|
<h6 className='ti'>비행구역 {i + 1}</h6> |
|
|
|
|
<div className='coords-box-scroll'> |
|
|
|
|
{coord?.map((co, idx) => { |
|
|
|
|
if (idx % 2 === 0) { |
|
|
|
|
const fCoord = FormattingCoord(co); |
|
|
|
|
const current = fCoord.join(', '); |
|
|
|
|
if (idx !== coord.length - 1) { |
|
|
|
|
const next = FormattingCoord(coord[idx + 1]).join( |
|
|
|
|
', ' |
|
|
|
|
); |
|
|
|
|
|
|
|
|
|
return ( |
|
|
|
|
<div className='coords-box-list' key={idx}> |
|
|
|
|
<span> |
|
|
|
|
<span>{current}</span> |
|
|
|
|
<span className='etc'>/</span> |
|
|
|
|
<span>{next}</span> |
|
|
|
|
</span> |
|
|
|
|
</div> |
|
|
|
|
); |
|
|
|
|
} else { |
|
|
|
|
return ( |
|
|
|
|
<div className='coords-box-list' key={idx}> |
|
|
|
|
<span> |
|
|
|
|
<span>{current}</span> |
|
|
|
|
</span> |
|
|
|
|
</div> |
|
|
|
|
); |
|
|
|
|
} |
|
|
|
|
{viewCoordObj?.map((obj, i) => { |
|
|
|
|
let coord = |
|
|
|
|
obj.properties.id === 'LINE' |
|
|
|
|
? obj.geometry.coordinates |
|
|
|
|
: obj.geometry.coordinates[0]; |
|
|
|
|
if (obj.properties.id === 'POLYGON') { |
|
|
|
|
coord = coord.slice(0, coord.length - 1); |
|
|
|
|
} else if (obj.properties.id === 'CIRCLE') { |
|
|
|
|
coord = [obj.properties.center]; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
return ( |
|
|
|
|
<div |
|
|
|
|
className='coords-box' |
|
|
|
|
key={i} |
|
|
|
|
onClick={() => { |
|
|
|
|
const allObj = drawObj |
|
|
|
|
.getAll() |
|
|
|
|
.features.filter(o => o.properties.id !== 'BUFFER'); |
|
|
|
|
|
|
|
|
|
drawObj.changeMode('direct_select', { |
|
|
|
|
featureId: allObj[i].id |
|
|
|
|
}); |
|
|
|
|
}} |
|
|
|
|
> |
|
|
|
|
<div> |
|
|
|
|
<h6 className='ti'>비행구역 {i + 1}</h6> |
|
|
|
|
<div className='coords-box-scroll'> |
|
|
|
|
{coord?.map((co, idx) => { |
|
|
|
|
if (idx % 2 === 0) { |
|
|
|
|
const fCoord = FormattingCoord(co); |
|
|
|
|
const current = fCoord.join(', '); |
|
|
|
|
if (idx !== coord.length - 1) { |
|
|
|
|
const next = FormattingCoord(coord[idx + 1]).join( |
|
|
|
|
', ' |
|
|
|
|
); |
|
|
|
|
|
|
|
|
|
return ( |
|
|
|
|
<div className='coords-box-list' key={idx}> |
|
|
|
|
<span> |
|
|
|
|
<span>{current}</span> |
|
|
|
|
<span className='etc'>/</span> |
|
|
|
|
<span>{next}</span> |
|
|
|
|
</span> |
|
|
|
|
</div> |
|
|
|
|
); |
|
|
|
|
} else { |
|
|
|
|
return null; |
|
|
|
|
return ( |
|
|
|
|
<div className='coords-box-list' key={idx}> |
|
|
|
|
<span> |
|
|
|
|
<span>{current}</span> |
|
|
|
|
</span> |
|
|
|
|
</div> |
|
|
|
|
); |
|
|
|
|
} |
|
|
|
|
})} |
|
|
|
|
</div> |
|
|
|
|
} else { |
|
|
|
|
return null; |
|
|
|
|
} |
|
|
|
|
})} |
|
|
|
|
</div> |
|
|
|
|
); |
|
|
|
|
})} |
|
|
|
|
</div> |
|
|
|
|
) : null} |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
); |
|
|
|
|
})} |
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
<div |
|
|
|
|
id='detail' |
|
|
|
|
ref={mapContainer} |
|
|
|
@ -417,9 +416,9 @@ export default function LaancAreaMap({
|
|
|
|
|
handlerSaveElev={handlerSaveElev} |
|
|
|
|
/> |
|
|
|
|
<FeatureAirZone map={mapObject} mapboxgl={mapboxgl} /> |
|
|
|
|
{modal ? ( |
|
|
|
|
{/* {modal ? ( |
|
|
|
|
<LaancModal modal={modal} handler={handlerModal} /> |
|
|
|
|
) : null} |
|
|
|
|
) : null} */} |
|
|
|
|
</> |
|
|
|
|
) : null} |
|
|
|
|
</div> |
|
|
|
|