|
|
@ -3,6 +3,7 @@ import mapboxgl from 'mapbox-gl'; |
|
|
|
import threebox from 'threebox-plugin'; |
|
|
|
import threebox from 'threebox-plugin'; |
|
|
|
import MapboxLanguage from '@mapbox/mapbox-gl-language'; |
|
|
|
import MapboxLanguage from '@mapbox/mapbox-gl-language'; |
|
|
|
import { MAPBOX_TOKEN } from '../../../configs/constants'; |
|
|
|
import { MAPBOX_TOKEN } from '../../../configs/constants'; |
|
|
|
|
|
|
|
import { Swiper, SwiperSlide } from 'swiper/react'; |
|
|
|
import { useEffect, useMemo, useState } from 'react'; |
|
|
|
import { useEffect, useMemo, useState } from 'react'; |
|
|
|
import { useDispatch, useSelector } from 'react-redux'; |
|
|
|
import { useDispatch, useSelector } from 'react-redux'; |
|
|
|
import { Card, CardBody } from 'reactstrap'; |
|
|
|
import { Card, CardBody } from 'reactstrap'; |
|
|
@ -326,6 +327,127 @@ export default function LaancAreaMap({ |
|
|
|
<CardBody> |
|
|
|
<CardBody> |
|
|
|
<div style={{ position: 'relative' }}> |
|
|
|
<div style={{ position: 'relative' }}> |
|
|
|
<LaancMapSearch mapObject={mapObject} /> |
|
|
|
<LaancMapSearch mapObject={mapObject} /> |
|
|
|
|
|
|
|
<div className='d-flex coords-wrap'> |
|
|
|
|
|
|
|
<Swiper direction='horizontal' loop={false} grabCursor={true}> |
|
|
|
|
|
|
|
<SwiperSlide |
|
|
|
|
|
|
|
// style={{
|
|
|
|
|
|
|
|
// display: 'inline-block',
|
|
|
|
|
|
|
|
// verticalAlign: 'top',
|
|
|
|
|
|
|
|
// marginRight: '10px'
|
|
|
|
|
|
|
|
// }}
|
|
|
|
|
|
|
|
> |
|
|
|
|
|
|
|
<div className='coords-box'> |
|
|
|
|
|
|
|
<div> |
|
|
|
|
|
|
|
<h6 className='ti'>비행구역 1</h6> |
|
|
|
|
|
|
|
<div className='coords-box-scroll'> |
|
|
|
|
|
|
|
<div className='coords-box-list'> |
|
|
|
|
|
|
|
<span> |
|
|
|
|
|
|
|
<span>126.6058737, 37.5220027</span> |
|
|
|
|
|
|
|
<span className='etc'>/</span> |
|
|
|
|
|
|
|
<span>126.6058093, 37.5188038</span> |
|
|
|
|
|
|
|
</span> |
|
|
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
<div className='coords-box-list'> |
|
|
|
|
|
|
|
<span> |
|
|
|
|
|
|
|
<span>126.6058737, 37.5220027</span> |
|
|
|
|
|
|
|
<span className='etc'>/</span> |
|
|
|
|
|
|
|
<span>126.6058093, 37.5188038</span> |
|
|
|
|
|
|
|
</span> |
|
|
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
</SwiperSlide> |
|
|
|
|
|
|
|
<SwiperSlide |
|
|
|
|
|
|
|
// style={{
|
|
|
|
|
|
|
|
// display: 'inline-block',
|
|
|
|
|
|
|
|
// verticalAlign: 'top',
|
|
|
|
|
|
|
|
// marginRight: '10px'
|
|
|
|
|
|
|
|
// }}
|
|
|
|
|
|
|
|
> |
|
|
|
|
|
|
|
<div className='coords-box'> |
|
|
|
|
|
|
|
<div> |
|
|
|
|
|
|
|
<h6 className='ti'>비행구역 1</h6> |
|
|
|
|
|
|
|
<div className='coords-box-scroll'> |
|
|
|
|
|
|
|
<div className='coords-box-list'> |
|
|
|
|
|
|
|
<span> |
|
|
|
|
|
|
|
<span>126.6058737, 37.5220027</span> |
|
|
|
|
|
|
|
<span className='etc'>/</span> |
|
|
|
|
|
|
|
<span>126.6058093, 37.5188038</span> |
|
|
|
|
|
|
|
</span> |
|
|
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
<div className='coords-box-list'> |
|
|
|
|
|
|
|
<span> |
|
|
|
|
|
|
|
<span>126.6058737, 37.5220027</span> |
|
|
|
|
|
|
|
<span className='etc'>/</span> |
|
|
|
|
|
|
|
<span>126.6058093, 37.5188038</span> |
|
|
|
|
|
|
|
</span> |
|
|
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
</SwiperSlide> |
|
|
|
|
|
|
|
<SwiperSlide |
|
|
|
|
|
|
|
// style={{
|
|
|
|
|
|
|
|
// display: 'inline-block',
|
|
|
|
|
|
|
|
// verticalAlign: 'top',
|
|
|
|
|
|
|
|
// marginRight: '10px'
|
|
|
|
|
|
|
|
// }}
|
|
|
|
|
|
|
|
> |
|
|
|
|
|
|
|
<div className='coords-box'> |
|
|
|
|
|
|
|
<div> |
|
|
|
|
|
|
|
<h6 className='ti'>비행구역 1</h6> |
|
|
|
|
|
|
|
<div className='coords-box-scroll'> |
|
|
|
|
|
|
|
<div className='coords-box-list'> |
|
|
|
|
|
|
|
<span> |
|
|
|
|
|
|
|
<span>126.6058737, 37.5220027</span> |
|
|
|
|
|
|
|
<span className='etc'>/</span> |
|
|
|
|
|
|
|
<span>126.6058093, 37.5188038</span> |
|
|
|
|
|
|
|
</span> |
|
|
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
<div className='coords-box-list'> |
|
|
|
|
|
|
|
<span> |
|
|
|
|
|
|
|
<span>126.6058737, 37.5220027</span> |
|
|
|
|
|
|
|
<span className='etc'>/</span> |
|
|
|
|
|
|
|
<span>126.6058093, 37.5188038</span> |
|
|
|
|
|
|
|
</span> |
|
|
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
</SwiperSlide> |
|
|
|
|
|
|
|
<SwiperSlide |
|
|
|
|
|
|
|
// style={{
|
|
|
|
|
|
|
|
// display: 'inline-block',
|
|
|
|
|
|
|
|
// verticalAlign: 'top',
|
|
|
|
|
|
|
|
// marginRight: '10px'
|
|
|
|
|
|
|
|
// }}
|
|
|
|
|
|
|
|
> |
|
|
|
|
|
|
|
<div className='coords-box'> |
|
|
|
|
|
|
|
<div> |
|
|
|
|
|
|
|
<h6 className='ti'>비행구역 1</h6> |
|
|
|
|
|
|
|
<div className='coords-box-scroll'> |
|
|
|
|
|
|
|
<div className='coords-box-list'> |
|
|
|
|
|
|
|
<span> |
|
|
|
|
|
|
|
<span>126.6058737, 37.5220027</span> |
|
|
|
|
|
|
|
<span className='etc'>/</span> |
|
|
|
|
|
|
|
<span>126.6058093, 37.5188038</span> |
|
|
|
|
|
|
|
</span> |
|
|
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
<div className='coords-box-list'> |
|
|
|
|
|
|
|
<span> |
|
|
|
|
|
|
|
<span>126.6058737, 37.5220027</span> |
|
|
|
|
|
|
|
<span className='etc'>/</span> |
|
|
|
|
|
|
|
<span>126.6058093, 37.5188038</span> |
|
|
|
|
|
|
|
</span> |
|
|
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
</SwiperSlide> |
|
|
|
|
|
|
|
</Swiper> |
|
|
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
|
|
<div className='d-flex coords-wrap'> |
|
|
|
<div className='d-flex coords-wrap'> |
|
|
|
{viewCoordObj?.map((obj, i) => { |
|
|
|
{viewCoordObj?.map((obj, i) => { |
|
|
|
let coord = |
|
|
|
let coord = |
|
|
|