diff --git a/src/containers/flight/OperationApprovalsContainer.js b/src/containers/flight/OperationApprovalsContainer.js
index b00b8f3b..73eb2f05 100644
--- a/src/containers/flight/OperationApprovalsContainer.js
+++ b/src/containers/flight/OperationApprovalsContainer.js
@@ -10,7 +10,8 @@ import {
flightlayerPolygon,
flightlayerBuffer,
handlerStartMode,
- handlerOnClickDrawLineString
+ handlerOnClickDrawLineString,
+ getDintancePointPopupList
} from '../../utility/MapUtils';
import { useHistory } from 'react-router-dom';
import useMapType from '@hooks/useMapType';
@@ -50,6 +51,7 @@ import mapboxgl from 'mapbox-gl';
import * as turf from '@turf/turf';
let distanceMarkers = [];
+
export default function OperationApprovalsContainer({ mode }) {
const dispatch = useDispatch();
const history = useHistory();
@@ -95,7 +97,8 @@ export default function OperationApprovalsContainer({ mode }) {
const [dataBlocks, setDataBlocks] = useState([]);
// 거리측정
- const [isDistanceStartPoint, setIsDistanceStartPoint] = useState(false);
+ const [isDistanceStartPoint, setIsDistanceStartPoint] = useState(true);
+ const [isResetDisabled, isSetResetDisabled] = useState(true);
const totalDistanceRef = useRef(null);
const mouseCursorRef = useRef(null);
const distanceBoxRef = useRef(null);
@@ -472,6 +475,7 @@ export default function OperationApprovalsContainer({ mode }) {
const handlerDrawObjInit = (obj, mapInstance) => {
setDrawObj(obj);
+
handlerOnClickDrawLineString(
mapInstance,
handlerDrawPopup,
@@ -492,32 +496,72 @@ export default function OperationApprovalsContainer({ mode }) {
const handlerDistanceClose = () => {
drawObj.deleteAll();
+ distanceMarkers.map(i => i.remove());
dispatch(clientChangeDrawType('simple_select'));
drawObj.changeMode('simple_select');
+ totalDistanceRef.current.innerText = '';
mouseCursorRef.current.style.display = 'none';
distanceBoxRef.current.style.display = 'none';
};
+ const handlerDrawReset = () => {
+ drawObj.deleteAll();
+ distanceMarkers.map(i => i.remove());
+ dispatch(clientChangeDrawType('LINE'));
+ drawObj.changeMode('draw_line_string');
+ isSetResetDisabled(true);
+ };
+
const handlerDistanceRevert = () => {
if (drawObj.getMode() === 'draw_line_string') {
const allFeatures = drawObj.getAll();
-
if (allFeatures.features.length > 0) {
- allFeatures.features[0].geometry.coordinates.pop(); // 마지막 좌표 제거
- allFeatures.features[0].geometry.coordinates.pop();
- allFeatures.features[0].geometry.coordinates.push(
- allFeatures.features[0].geometry.coordinates[
- allFeatures.features[0].geometry.coordinates.length - 1
- ]
- );
+ drawObj.deleteAll();
+ const coords = allFeatures.features[0].geometry.coordinates;
+
+ // 새로운 배열로 마지막 두 개의 값을 제거
+ if (coords.length > 1) {
+ // 최소한 두 개의 좌표가 있어야 함
+ const newCoords = coords.slice(0, -2); // 마지막 두 개의 값을 제거
- drawObj.set(allFeatures);
+ newCoords.push(newCoords[newCoords.length - 1]); // 마지막 값을 다시 추가
+
+ // 중복 배열 제거
+ const uniqueArray = Array.from(
+ new Set(newCoords.map(JSON.stringify))
+ ).map(JSON.parse);
+
+ if (uniqueArray.length === 1) {
+ uniqueArray.push(uniqueArray[uniqueArray.length - 1]);
+ }
+
+ drawObj.set({
+ type: 'FeatureCollection',
+ features: [
+ {
+ type: 'Feature',
+ properties: {},
+ id: 'pal_line_string',
+ geometry: { type: 'LineString', coordinates: [...uniqueArray] }
+ }
+ ]
+ });
+ const markerList = getDintancePointPopupList(drawObj);
+ handlerDrawPopup(mapObject, markerList, drawObj);
+ // 다시 이어그리기
+ let feature = drawObj.getAll().features[0];
+ drawObj.changeMode('draw_line_string', {
+ featureId: 'pal_line_string',
+ from: feature.geometry.coordinates[
+ feature.geometry.coordinates.length - 1
+ ]
+ });
+ }
}
}
};
- const handlerDrawPopup = (mapInstance, popupList) => {
- // setIsDistanceStartPoint(true);
+ const handlerDrawPopup = (mapInstance, popupList, draw = undefined) => {
if (distanceMarkers.length > 0) {
distanceMarkers.map(i => i.remove());
}
@@ -538,6 +582,13 @@ export default function OperationApprovalsContainer({ mode }) {
distanceMarkers.push(distanceMarker);
});
}
+
+ if (draw.getMode() === 'simple_select') {
+ setIsDistanceStartPoint(true);
+ isSetResetDisabled(false);
+ } else {
+ setIsDistanceStartPoint(false);
+ }
};
const handlerLogout = async () => {
@@ -842,14 +893,18 @@ export default function OperationApprovalsContainer({ mode }) {
className='btn-icon rounded-circle'
color='primary'
size='sm'
+ disabled={isResetDisabled}
+ onClick={handlerDrawReset}
>
diff --git a/src/utility/MapUtils.js b/src/utility/MapUtils.js
index 9678df7a..c222cebe 100644
--- a/src/utility/MapUtils.js
+++ b/src/utility/MapUtils.js
@@ -583,7 +583,7 @@ export const getDraw = mode => {
styles: [
{
// polyline
- id: 'gl-draw-line',
+ id: 'pal-gl-draw-line',
type: 'line',
filter: [
'all',
@@ -601,7 +601,7 @@ export const getDraw = mode => {
},
{
// polygon fill
- id: 'gl-draw-polygon-fill',
+ id: 'pal-gl-draw-polygon-fill',
type: 'fill',
filter: ['all', ['==', '$type', 'Polygon'], ['!=', 'mode', 'static']],
paint: {
@@ -612,7 +612,7 @@ export const getDraw = mode => {
},
// polygon outline
{
- id: 'gl-draw-polygon-stroke-active',
+ id: 'pal-gl-draw-polygon-stroke-active',
type: 'line',
filter: ['all', ['==', '$type', 'Polygon'], ['!=', 'mode', 'static']],
layout: {
@@ -627,7 +627,7 @@ export const getDraw = mode => {
},
{
// vertex point halos
- id: 'gl-draw-polygon-and-line-vertex-halo-active',
+ id: 'pal-gl-draw-polygon-and-line-vertex-halo-active',
type: 'circle',
filter: [
'all',
@@ -642,7 +642,7 @@ export const getDraw = mode => {
},
{
// vertex points
- id: 'gl-draw-polygon-and-line-vertex-active',
+ id: 'pal-gl-draw-polygon-and-line-vertex-active',
type: 'circle',
filter: ['all', ['==', '$type', 'Point']],
paint: {
@@ -678,18 +678,16 @@ export const handlerOnClickDrawLineString = (
drawObj
) => {
const originLineClickHandler = MapboxDraw.modes.draw_line_string.onClick;
- const { totalDistanceRef, mouseCursorRef, distanceBoxRef } = refObj;
+ const { totalDistanceRef, mouseCursorRef } = refObj;
let startPoint;
- let markerList = [];
- let distance = 0;
MapboxDraw.modes.draw_line_string.onClick = function (state, e) {
originLineClickHandler.call(this, state, e);
startPoint = e.lngLat;
const markerList = getDintancePointPopupList(drawObj);
- callback(mapInstance, markerList);
+ callback(mapInstance, markerList, drawObj);
};
mapInstance.on('mousemove', e => {
@@ -701,9 +699,9 @@ export const handlerOnClickDrawLineString = (
const distance = getDrawDistance(drawObj);
totalDistanceRef.current.innerText = `총 거리 : ${distance.toLocaleString()}m`;
}
- } else {
- if (drawObj.getMode() === 'draw_line_string') {
- console.log('@@@@');
+ }
+ if (drawObj.getMode() === 'draw_line_string') {
+ if (drawObj.getAll().features[0].geometry.coordinates.length === 1) {
mouseCursorRef.current.style.display = 'block';
mouseCursorRef.current.style.left = e.originalEvent.pageX + 'px';
mouseCursorRef.current.style.top = e.originalEvent.pageY + 45 + 'px';
@@ -720,7 +718,8 @@ export const handlerOnClickDrawLineString = (
mouseCursorRef.current.style.display = 'none';
mouseCursorRef.current.style.innerText = '';
const markerList = getDintancePointPopupList(drawObj);
- callback(mapInstance, markerList);
+ startPoint = null;
+ callback(mapInstance, markerList, drawObj);
} else if (obj.mode === 'direct_select') {
}
});
@@ -758,7 +757,7 @@ export const getDrawDistance = drawObj => {
*/
export const getDintancePointPopupList = drawObj => {
const drawGeometry = drawObj.getAll().features[0];
- console.log(drawObj.getAll().features[0]);
+
let markerList = [];
if (drawGeometry?.geometry) {
drawGeometry.geometry.coordinates.map((i, idx) => {
@@ -778,10 +777,12 @@ export const getDintancePointPopupList = drawObj => {
let distance = turf.length(obj, { units: 'kilometers' });
distance = distance * 1000;
distance = distance.toFixed(2);
- markerList.push({
- text: `${distance.toLocaleString()}m`,
- coord: [drawGeometry.geometry.coordinates[idx + 1]]
- });
+ if (distance !== '0.00') {
+ markerList.push({
+ text: `${distance.toLocaleString()}m`,
+ coord: [drawGeometry.geometry.coordinates[idx + 1]]
+ });
+ }
}
});
}