|
|
@ -1,4 +1,4 @@ |
|
|
|
import { useEffect, useState } from 'react'; |
|
|
|
import { useEffect, useRef, useState } from 'react'; |
|
|
|
import { InfoModal } from '../../modal/InfoModal'; |
|
|
|
import { InfoModal } from '../../modal/InfoModal'; |
|
|
|
import { ErrorModal } from '../../modal/ErrorModal'; |
|
|
|
import { ErrorModal } from '../../modal/ErrorModal'; |
|
|
|
import { useDispatch, useSelector } from 'react-redux'; |
|
|
|
import { useDispatch, useSelector } from 'react-redux'; |
|
|
@ -13,7 +13,11 @@ import { |
|
|
|
} from '../../../utility/DrawUtil'; |
|
|
|
} from '../../../utility/DrawUtil'; |
|
|
|
import { drawTypeChangeAction } from '../../../modules/control/map/actions/controlMapActions'; |
|
|
|
import { drawTypeChangeAction } from '../../../modules/control/map/actions/controlMapActions'; |
|
|
|
import MapboxDraw from '@mapbox/mapbox-gl-draw'; |
|
|
|
import MapboxDraw from '@mapbox/mapbox-gl-draw'; |
|
|
|
import { CircleMode } from 'mapbox-gl-draw-circle'; |
|
|
|
import { |
|
|
|
|
|
|
|
CircleMode, |
|
|
|
|
|
|
|
DirectMode, |
|
|
|
|
|
|
|
SimpleSelectMode |
|
|
|
|
|
|
|
} from 'mapbox-gl-draw-circle'; |
|
|
|
import axios from '../../../modules/utils/customAxiosUtil'; |
|
|
|
import axios from '../../../modules/utils/customAxiosUtil'; |
|
|
|
|
|
|
|
|
|
|
|
export const LaancDrawControl = props => { |
|
|
|
export const LaancDrawControl = props => { |
|
|
@ -47,25 +51,54 @@ export const LaancDrawControl = props => { |
|
|
|
// if (areaType !== drawType) drawInit();
|
|
|
|
// if (areaType !== drawType) drawInit();
|
|
|
|
}, [mapControl.drawType]); |
|
|
|
}, [mapControl.drawType]); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const originClickRef = useRef(null); |
|
|
|
|
|
|
|
|
|
|
|
useEffect(() => { |
|
|
|
useEffect(() => { |
|
|
|
if (mapObject) { |
|
|
|
if (mapObject) { |
|
|
|
mapObject.on('draw.update', handlerUpdateSetting); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const DrawLineStringMode = MapboxDraw.modes.draw_line_string; |
|
|
|
const DrawLineStringMode = MapboxDraw.modes.draw_line_string; |
|
|
|
const DrawPolygonMode = MapboxDraw.modes.draw_polygon; |
|
|
|
const DrawPolygonMode = MapboxDraw.modes.draw_polygon; |
|
|
|
const DrawCircleMode = CircleMode; |
|
|
|
const DrawCircleMode = CircleMode; |
|
|
|
const modeArr = [DrawLineStringMode, DrawPolygonMode, DrawCircleMode]; |
|
|
|
const modeArr = [DrawLineStringMode, DrawPolygonMode, DrawCircleMode]; |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const cleanUp = () => { |
|
|
|
|
|
|
|
modeArr.forEach(m => { |
|
|
|
|
|
|
|
m.onStop = null; |
|
|
|
|
|
|
|
m.onClick = originClickRef.current; |
|
|
|
|
|
|
|
}); |
|
|
|
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
mapObject.on('draw.update', handlerUpdateSetting); |
|
|
|
|
|
|
|
|
|
|
|
modeArr.forEach(m => { |
|
|
|
modeArr.forEach(m => { |
|
|
|
m.onStop = state => handlerFinishDraw(state); |
|
|
|
m.onStop = state => handlerFinishDraw(state); |
|
|
|
|
|
|
|
|
|
|
|
// onClick 이벤트 오버라이드
|
|
|
|
// onClick 이벤트 오버라이드
|
|
|
|
const origin = m.onClick; |
|
|
|
const mOriginClick = m.onClick; |
|
|
|
m.onClick = function (state, e) { |
|
|
|
m.onClick = function (state, e) { |
|
|
|
origin.call(this, state, e); |
|
|
|
mOriginClick.call(this, state, e); |
|
|
|
handlerCustomOnClick(state, e); |
|
|
|
handlerCustomOnClick(state, e); |
|
|
|
}; |
|
|
|
}; |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
if (originClickRef.current === null) { |
|
|
|
|
|
|
|
originClickRef.current = mOriginClick; |
|
|
|
|
|
|
|
} |
|
|
|
}); |
|
|
|
}); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
return () => { |
|
|
|
|
|
|
|
mapObject.off('draw.update', handlerUpdateSetting); |
|
|
|
|
|
|
|
cleanUp(); |
|
|
|
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// const DirectSelect = DirectMode;
|
|
|
|
|
|
|
|
// console.log(DirectSelect, '---');
|
|
|
|
|
|
|
|
// const originSetup = DirectSelect.toDisplayFeatures;
|
|
|
|
|
|
|
|
// DirectSelect.toDisplayFeatures = function (state, geojson, push) {
|
|
|
|
|
|
|
|
// originSetup.call(this, state, geojson, push);
|
|
|
|
|
|
|
|
// // console.log(state, geojson, push, '----');
|
|
|
|
|
|
|
|
// if (geojson.properties.active === 'true') {
|
|
|
|
|
|
|
|
// console.log(state, geojson, push, '------');
|
|
|
|
|
|
|
|
// }
|
|
|
|
|
|
|
|
// };
|
|
|
|
} |
|
|
|
} |
|
|
|
}, [mapObject]); |
|
|
|
}, [mapObject]); |
|
|
|
|
|
|
|
|
|
|
@ -121,10 +154,12 @@ export const LaancDrawControl = props => { |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
if (state.currentVertexPosition > 6) { |
|
|
|
if (state.currentVertexPosition > 6) { |
|
|
|
|
|
|
|
if (obj) { |
|
|
|
drawObj.changeMode('direct_select', { |
|
|
|
drawObj.changeMode('direct_select', { |
|
|
|
featureId: obj.id |
|
|
|
featureId: obj.id |
|
|
|
}); |
|
|
|
}); |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
} |
|
|
|
}; |
|
|
|
}; |
|
|
|
|
|
|
|
|
|
|
|
// 도형 그리기 완료 시
|
|
|
|
// 도형 그리기 완료 시
|
|
|
|