|
|
|
@ -1,6 +1,7 @@
|
|
|
|
|
import * as turf from '@turf/turf'; |
|
|
|
|
import mapboxgl from 'mapbox-gl'; |
|
|
|
|
import MapboxDraw from '@mapbox/mapbox-gl-draw'; |
|
|
|
|
import * as MapboxDrawWaypoint from 'mapbox-gl-draw-waypoint'; |
|
|
|
|
import { |
|
|
|
|
CircleMode, |
|
|
|
|
DragCircleMode, |
|
|
|
@ -477,8 +478,9 @@ export const flightlayerBuffer = source => {
|
|
|
|
|
|
|
|
|
|
// 비행구역 상세맵 draw 정보 셋팅
|
|
|
|
|
export const getDraw = mode => { |
|
|
|
|
let drawObj = null; |
|
|
|
|
if (mode === 'laanc') { |
|
|
|
|
return new MapboxDraw({ |
|
|
|
|
drawObj = new MapboxDraw({ |
|
|
|
|
displayControlsDefault: false, |
|
|
|
|
userProperties: true, |
|
|
|
|
boxSelect: false, |
|
|
|
@ -568,16 +570,17 @@ export const getDraw = mode => {
|
|
|
|
|
] |
|
|
|
|
}); |
|
|
|
|
} else { |
|
|
|
|
return new MapboxDraw({ |
|
|
|
|
let modes = MapboxDraw.modes; |
|
|
|
|
modes = MapboxDrawWaypoint.enable(modes); |
|
|
|
|
|
|
|
|
|
drawObj = new MapboxDraw({ |
|
|
|
|
displayControlsDefault: false, |
|
|
|
|
userProperties: true, |
|
|
|
|
boxSelect: false, |
|
|
|
|
modes: { |
|
|
|
|
...MapboxDraw.modes, |
|
|
|
|
...modes, |
|
|
|
|
draw_circle: CircleMode, |
|
|
|
|
drag_circle: DragCircleMode, |
|
|
|
|
direct_select: DirectMode, |
|
|
|
|
simple_select: SimpleSelectMode |
|
|
|
|
drag_circle: DragCircleMode |
|
|
|
|
}, |
|
|
|
|
styles: [ |
|
|
|
|
{ |
|
|
|
@ -643,6 +646,7 @@ export const getDraw = mode => {
|
|
|
|
|
// vertex points
|
|
|
|
|
id: 'gl-draw-polygon-and-line-vertex-active', |
|
|
|
|
type: 'circle', |
|
|
|
|
filter: ['all', ['==', '$type', 'Point']], |
|
|
|
|
paint: { |
|
|
|
|
'circle-radius': 6, |
|
|
|
|
'circle-color': '#8a1c05' |
|
|
|
@ -651,6 +655,8 @@ export const getDraw = mode => {
|
|
|
|
|
] |
|
|
|
|
}); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
return drawObj; |
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
/** |
|
|
|
@ -666,3 +672,86 @@ export const handlerStartMode = (mode, drawObj) => {
|
|
|
|
|
drawObj.changeMode('draw_circle', { initialRadiusInKm: 100 / 1000 }); |
|
|
|
|
} |
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
export const handlerOnClickDrawLineString = (mapInstance, callback) => { |
|
|
|
|
const originClickHandler = MapboxDraw.modes.draw_line_string.onClick; |
|
|
|
|
const originMouseMoveHandler = MapboxDraw.modes.draw_line_string.onMouseMove; |
|
|
|
|
let startPoint; |
|
|
|
|
let markerList = []; |
|
|
|
|
|
|
|
|
|
MapboxDraw.modes.draw_line_string.onClick = function (state, e) { |
|
|
|
|
originClickHandler.call(this, state, e); |
|
|
|
|
startPoint = e.lngLat; |
|
|
|
|
state.line.coordinates.map((i, idx) => { |
|
|
|
|
if ( |
|
|
|
|
i[0] !== state.line.coordinates[state.line.coordinates.length - 1][0] |
|
|
|
|
) { |
|
|
|
|
const obj = { |
|
|
|
|
geometry: { |
|
|
|
|
coordinates: [i, state.line.coordinates[idx + 1]], |
|
|
|
|
type: 'LineString' |
|
|
|
|
}, |
|
|
|
|
type: 'Feature' |
|
|
|
|
}; |
|
|
|
|
let distance = turf.length(obj, { units: 'kilometers' }); |
|
|
|
|
distance = distance * 1000; |
|
|
|
|
distance = distance.toFixed(2); |
|
|
|
|
markerList.push({ |
|
|
|
|
text: `${distance.toLocaleString()}m`, |
|
|
|
|
coord: [state.line.coordinates[idx + 1]] |
|
|
|
|
}); |
|
|
|
|
} |
|
|
|
|
}); |
|
|
|
|
callback(mapInstance, markerList, startPoint); |
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
MapboxDraw.modes.draw_line_string.onMouseMove = function (state, e) { |
|
|
|
|
originMouseMoveHandler.call(this, state, e); |
|
|
|
|
let distance = 0; |
|
|
|
|
console.log; |
|
|
|
|
if (startPoint) { |
|
|
|
|
console.log(state); |
|
|
|
|
|
|
|
|
|
const drawGeometry = state.line.coordinates; |
|
|
|
|
if (drawGeometry) { |
|
|
|
|
const feature = []; |
|
|
|
|
drawGeometry.map(i => feature.push(i)); |
|
|
|
|
const obj = { |
|
|
|
|
geometry: { |
|
|
|
|
coordinates: [...feature], |
|
|
|
|
type: 'LineString' |
|
|
|
|
}, |
|
|
|
|
type: 'Feature' |
|
|
|
|
}; |
|
|
|
|
distance = turf.length(obj, { units: 'kilometers' }); |
|
|
|
|
distance = distance * 1000; |
|
|
|
|
distance = distance.toFixed(2); |
|
|
|
|
// mouseCursorRef.current.style.display = 'none';
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
// if (drawObj.getMode() === 'simple_select') {
|
|
|
|
|
// // startPoint = null;
|
|
|
|
|
// const totalDistance = document.getElementById('total_distance');
|
|
|
|
|
// totalDistance.style.display = 'block';
|
|
|
|
|
// totalDistance.innerText = `총 거리 : ${distance.toLocaleString()}m`;
|
|
|
|
|
// mouseCursorRef.current.style.display = 'none';
|
|
|
|
|
// mouseCursorRef.current.style.innerText = '';
|
|
|
|
|
// }
|
|
|
|
|
// if (drawObj.getMode() === 'direct_select') {
|
|
|
|
|
// distanceMarkers.map(i => i.remove());
|
|
|
|
|
// distanceMarkers = [];
|
|
|
|
|
// const totalDistance = document.getElementById('total_distance');
|
|
|
|
|
// totalDistance.innerText = `총 거리 : ${distance.toLocaleString()}m`;
|
|
|
|
|
// }
|
|
|
|
|
} |
|
|
|
|
// else {
|
|
|
|
|
// if (drawObj.getMode() === 'draw_line_string') {
|
|
|
|
|
// document.getElementById('distance_box').style.display = 'block';
|
|
|
|
|
// mouseCursorRef.current.style.display = 'block';
|
|
|
|
|
// mouseCursorRef.current.style.left = e.originalEvent.pageX + 'px';
|
|
|
|
|
// mouseCursorRef.current.style.top = e.originalEvent.pageY + 45 + 'px';
|
|
|
|
|
// mouseCursorRef.current.innerText = '시작점 선택';
|
|
|
|
|
// }
|
|
|
|
|
// }
|
|
|
|
|
}; |
|
|
|
|
}; |
|
|
|
|