|
|
@ -4,15 +4,10 @@ import { useDispatch, useSelector } from '@src/redux/store'; |
|
|
|
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 MapboxLanguage from '@mapbox/mapbox-gl-language'; |
|
|
|
import MapboxLanguage from '@mapbox/mapbox-gl-language'; |
|
|
|
import MapboxDraw from '@mapbox/mapbox-gl-draw'; |
|
|
|
|
|
|
|
import { |
|
|
|
|
|
|
|
CircleMode, |
|
|
|
|
|
|
|
DragCircleMode, |
|
|
|
|
|
|
|
DirectMode, |
|
|
|
|
|
|
|
SimpleSelectMode |
|
|
|
|
|
|
|
} from 'mapbox-gl-draw-circle'; |
|
|
|
|
|
|
|
import { MAPBOX_TOKEN } from '../../../configs/constants'; |
|
|
|
import { MAPBOX_TOKEN } from '../../../configs/constants'; |
|
|
|
import threebox from 'threebox-plugin'; |
|
|
|
import threebox from 'threebox-plugin'; |
|
|
|
|
|
|
|
import { getDraw } from '@src/utility/MapUtils'; |
|
|
|
// mapUtils
|
|
|
|
// mapUtils
|
|
|
|
import { |
|
|
|
import { |
|
|
|
InitFeature, |
|
|
|
InitFeature, |
|
|
@ -95,98 +90,7 @@ export default function LaancMap({ page, handleChange, data }) { |
|
|
|
attributionControl: false |
|
|
|
attributionControl: false |
|
|
|
}); |
|
|
|
}); |
|
|
|
|
|
|
|
|
|
|
|
// 비행구역 상세맵 draw 정보 셋팅
|
|
|
|
setDrawObj(getDraw()); |
|
|
|
const draw = new MapboxDraw({ |
|
|
|
|
|
|
|
displayControlsDefault: false, |
|
|
|
|
|
|
|
userProperties: true, |
|
|
|
|
|
|
|
boxSelect: false, |
|
|
|
|
|
|
|
modes: { |
|
|
|
|
|
|
|
...MapboxDraw.modes, |
|
|
|
|
|
|
|
draw_circle: CircleMode, |
|
|
|
|
|
|
|
drag_circle: DragCircleMode, |
|
|
|
|
|
|
|
direct_select: DirectMode, |
|
|
|
|
|
|
|
simple_select: SimpleSelectMode |
|
|
|
|
|
|
|
}, |
|
|
|
|
|
|
|
styles: [ |
|
|
|
|
|
|
|
{ |
|
|
|
|
|
|
|
// polyline
|
|
|
|
|
|
|
|
id: 'gl-draw-line', |
|
|
|
|
|
|
|
type: 'line', |
|
|
|
|
|
|
|
filter: [ |
|
|
|
|
|
|
|
'all', |
|
|
|
|
|
|
|
['==', '$type', 'LineString'], |
|
|
|
|
|
|
|
['!=', 'mode', 'static'] |
|
|
|
|
|
|
|
], |
|
|
|
|
|
|
|
layout: { |
|
|
|
|
|
|
|
'line-cap': 'round', |
|
|
|
|
|
|
|
'line-join': 'round' |
|
|
|
|
|
|
|
}, |
|
|
|
|
|
|
|
paint: { |
|
|
|
|
|
|
|
'line-color': '#8a1c05', |
|
|
|
|
|
|
|
'line-dasharray': [0.2, 2], |
|
|
|
|
|
|
|
'line-width': 2 |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
}, |
|
|
|
|
|
|
|
{ |
|
|
|
|
|
|
|
// polygon fill
|
|
|
|
|
|
|
|
id: 'gl-draw-polygon-fill', |
|
|
|
|
|
|
|
type: 'fill', |
|
|
|
|
|
|
|
filter: ['all', ['==', '$type', 'Polygon'], ['!=', 'mode', 'static']], |
|
|
|
|
|
|
|
paint: { |
|
|
|
|
|
|
|
'fill-color': '#8a1c05', |
|
|
|
|
|
|
|
'fill-outline-color': '#8a1c05', |
|
|
|
|
|
|
|
'fill-opacity': 0.1 |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
}, |
|
|
|
|
|
|
|
// polygon outline
|
|
|
|
|
|
|
|
{ |
|
|
|
|
|
|
|
id: 'gl-draw-polygon-stroke-active', |
|
|
|
|
|
|
|
type: 'line', |
|
|
|
|
|
|
|
filter: ['all', ['==', '$type', 'Polygon'], ['!=', 'mode', 'static']], |
|
|
|
|
|
|
|
layout: { |
|
|
|
|
|
|
|
'line-cap': 'round', |
|
|
|
|
|
|
|
'line-join': 'round' |
|
|
|
|
|
|
|
}, |
|
|
|
|
|
|
|
paint: { |
|
|
|
|
|
|
|
'line-color': '#8a1c05', |
|
|
|
|
|
|
|
'line-dasharray': [0.2, 2], |
|
|
|
|
|
|
|
'line-width': 2 |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
}, |
|
|
|
|
|
|
|
{ |
|
|
|
|
|
|
|
// vertex point halos
|
|
|
|
|
|
|
|
id: 'gl-draw-polygon-and-line-vertex-halo-active', |
|
|
|
|
|
|
|
type: 'circle', |
|
|
|
|
|
|
|
filter: [ |
|
|
|
|
|
|
|
'all', |
|
|
|
|
|
|
|
['==', 'meta', 'vertex'], |
|
|
|
|
|
|
|
['==', '$type', 'Point'], |
|
|
|
|
|
|
|
['!=', 'mode', 'static'] |
|
|
|
|
|
|
|
], |
|
|
|
|
|
|
|
paint: { |
|
|
|
|
|
|
|
'circle-radius': 8, |
|
|
|
|
|
|
|
'circle-color': '#ffffff' |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
}, |
|
|
|
|
|
|
|
{ |
|
|
|
|
|
|
|
// vertex points
|
|
|
|
|
|
|
|
id: 'gl-draw-polygon-and-line-vertex-active', |
|
|
|
|
|
|
|
type: 'circle', |
|
|
|
|
|
|
|
filter: [ |
|
|
|
|
|
|
|
'all', |
|
|
|
|
|
|
|
['==', 'meta', 'vertex'], |
|
|
|
|
|
|
|
['==', '$type', 'Point'], |
|
|
|
|
|
|
|
['!=', 'mode', 'static'] |
|
|
|
|
|
|
|
], |
|
|
|
|
|
|
|
paint: { |
|
|
|
|
|
|
|
'circle-radius': 6, |
|
|
|
|
|
|
|
'circle-color': '#8a1c05' |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
] |
|
|
|
|
|
|
|
}); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
setDrawObj(draw); |
|
|
|
|
|
|
|
map.dragRotate.disable(); |
|
|
|
map.dragRotate.disable(); |
|
|
|
|
|
|
|
|
|
|
|
const language = new MapboxLanguage(); |
|
|
|
const language = new MapboxLanguage(); |
|
|
|