|
|
@ -19,6 +19,9 @@ import { |
|
|
|
SimpleSelectMode |
|
|
|
SimpleSelectMode |
|
|
|
} from 'mapbox-gl-draw-circle'; |
|
|
|
} from 'mapbox-gl-draw-circle'; |
|
|
|
import axios from '../../../modules/utils/customAxiosUtil'; |
|
|
|
import axios from '../../../modules/utils/customAxiosUtil'; |
|
|
|
|
|
|
|
import createSupplementaryPointsForCircle from 'mapbox-gl-draw-circle/lib/utils/create_supplementary_points_circle'; |
|
|
|
|
|
|
|
import createSupplementaryPoints from 'mapbox-gl-draw-circle/node_modules/@mapbox/mapbox-gl-draw/src/lib/create_supplementary_points'; |
|
|
|
|
|
|
|
import Constants from 'mapbox-gl-draw-circle/node_modules/@mapbox/mapbox-gl-draw/src/constants'; |
|
|
|
|
|
|
|
|
|
|
|
export const LaancDrawControl = props => { |
|
|
|
export const LaancDrawControl = props => { |
|
|
|
const dispatch = useDispatch(); |
|
|
|
const dispatch = useDispatch(); |
|
|
@ -47,7 +50,17 @@ export const LaancDrawControl = props => { |
|
|
|
|
|
|
|
|
|
|
|
useEffect(() => { |
|
|
|
useEffect(() => { |
|
|
|
if (mapControl.drawType === 'DONE') { |
|
|
|
if (mapControl.drawType === 'DONE') { |
|
|
|
drawObj.changeMode('simple_select'); |
|
|
|
// 구역 생성 후 바로 directMode
|
|
|
|
|
|
|
|
if (number !== 0) { |
|
|
|
|
|
|
|
const obj = drawObj |
|
|
|
|
|
|
|
.getAll() |
|
|
|
|
|
|
|
.features.filter(o => o.properties.id !== 'BUFFER'); |
|
|
|
|
|
|
|
if (obj.length > 0) { |
|
|
|
|
|
|
|
drawObj.changeMode('direct_select', { |
|
|
|
|
|
|
|
featureId: obj[obj.length - 1]?.id |
|
|
|
|
|
|
|
}); |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
} |
|
|
|
} else { |
|
|
|
} else { |
|
|
|
drawInit(); |
|
|
|
drawInit(); |
|
|
|
} |
|
|
|
} |
|
|
@ -85,6 +98,59 @@ export const LaancDrawControl = props => { |
|
|
|
originClickRef.current = mOriginClick; |
|
|
|
originClickRef.current = mOriginClick; |
|
|
|
} |
|
|
|
} |
|
|
|
}); |
|
|
|
}); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// 버퍼 select 모드 방지를 위한 오버라이드
|
|
|
|
|
|
|
|
const SimpleSelect = SimpleSelectMode; |
|
|
|
|
|
|
|
SimpleSelect.toDisplayFeatures = function (state, geojson, display) { |
|
|
|
|
|
|
|
geojson.properties.active = this.isSelected(geojson.properties.id) |
|
|
|
|
|
|
|
? Constants.activeStates.ACTIVE |
|
|
|
|
|
|
|
: Constants.activeStates.INACTIVE; |
|
|
|
|
|
|
|
display(geojson); |
|
|
|
|
|
|
|
this.fireActionable(); |
|
|
|
|
|
|
|
if ( |
|
|
|
|
|
|
|
geojson.properties.active !== Constants.activeStates.ACTIVE || |
|
|
|
|
|
|
|
geojson.geometry.type === Constants.geojsonTypes.POINT |
|
|
|
|
|
|
|
) |
|
|
|
|
|
|
|
return; |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// 버퍼 select 모드 방지
|
|
|
|
|
|
|
|
if (geojson.properties?.user_id !== 'BUFFER') { |
|
|
|
|
|
|
|
const supplementaryPoints = geojson.properties.user_isCircle |
|
|
|
|
|
|
|
? createSupplementaryPointsForCircle(geojson) |
|
|
|
|
|
|
|
: createSupplementaryPoints(geojson); |
|
|
|
|
|
|
|
supplementaryPoints.forEach(display); |
|
|
|
|
|
|
|
// 바로 direct 모드로 돌입
|
|
|
|
|
|
|
|
drawObj.changeMode('direct_select', { |
|
|
|
|
|
|
|
featureId: geojson.properties.id |
|
|
|
|
|
|
|
}); |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// 버퍼 select 모드 방지, midPoint 생성 방지를 위한 오버라이드
|
|
|
|
|
|
|
|
const DirectSelect = DirectMode; |
|
|
|
|
|
|
|
DirectSelect.toDisplayFeatures = function (state, geojson, push) { |
|
|
|
|
|
|
|
if (state.featureId === geojson.properties.id) { |
|
|
|
|
|
|
|
geojson.properties.active = Constants.activeStates.ACTIVE; |
|
|
|
|
|
|
|
push(geojson); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// 버퍼 select 모드 방지
|
|
|
|
|
|
|
|
if (geojson.properties?.user_id !== 'BUFFER') { |
|
|
|
|
|
|
|
const supplementaryPoints = geojson.properties.user_isCircle |
|
|
|
|
|
|
|
? createSupplementaryPointsForCircle(geojson) |
|
|
|
|
|
|
|
: createSupplementaryPoints(geojson, { |
|
|
|
|
|
|
|
map: this.map, |
|
|
|
|
|
|
|
midpoints: false, // midPoint 생성 방지
|
|
|
|
|
|
|
|
selectedPaths: state.selectedCoordPaths |
|
|
|
|
|
|
|
}); |
|
|
|
|
|
|
|
supplementaryPoints.forEach(push); |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
} else { |
|
|
|
|
|
|
|
geojson.properties.active = Constants.activeStates.INACTIVE; |
|
|
|
|
|
|
|
push(geojson); |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
this.fireActionable(state); |
|
|
|
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
|
|
setNumber(number + 1); |
|
|
|
setNumber(number + 1); |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
@ -93,17 +159,6 @@ export const LaancDrawControl = props => { |
|
|
|
mapObject.off('draw.update', handlerUpdateSetting); |
|
|
|
mapObject.off('draw.update', handlerUpdateSetting); |
|
|
|
cleanUp(); |
|
|
|
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]); |
|
|
|
|
|
|
|
|
|
|
|