|
|
|
@ -1,8 +1,7 @@
|
|
|
|
|
import { useDispatch, useSelector } from 'react-redux'; |
|
|
|
|
import { InfoModal } from '../../../modal/InfoModal'; |
|
|
|
|
import * as turf from '@turf/turf'; |
|
|
|
|
import { useEffect, useState } from 'react'; |
|
|
|
|
import MapboxDraw from '@mapbox/mapbox-gl-draw'; |
|
|
|
|
import { useCallback, useEffect, useState } from 'react'; |
|
|
|
|
|
|
|
|
|
export const MapBoxDraw = props => { |
|
|
|
|
const dispatch = useDispatch(); |
|
|
|
@ -12,11 +11,6 @@ export const MapBoxDraw = props => {
|
|
|
|
|
const isDone = props.isDone; |
|
|
|
|
const isDisabled = props.isDisabled; |
|
|
|
|
|
|
|
|
|
const [pastPolyline, setPastPolyline] = useState(); |
|
|
|
|
const [pastBuffer, setBuffer] = useState(); |
|
|
|
|
const [pastPolygon, setPastPolygon] = useState(); |
|
|
|
|
const [pastCircle, setCircle] = useState([]); |
|
|
|
|
|
|
|
|
|
const pastDragCircle = props.pastDragCircle; |
|
|
|
|
const setDragCircle = props.setDragCircle; |
|
|
|
|
|
|
|
|
@ -37,38 +31,54 @@ export const MapBoxDraw = props => {
|
|
|
|
|
|
|
|
|
|
let mode = props.mode; |
|
|
|
|
|
|
|
|
|
let areaInfo; |
|
|
|
|
let lastDistance; |
|
|
|
|
|
|
|
|
|
let polyline; |
|
|
|
|
let guideline; |
|
|
|
|
let bufferPolygon; |
|
|
|
|
|
|
|
|
|
let polygon; |
|
|
|
|
|
|
|
|
|
let circle; |
|
|
|
|
let radiusline; |
|
|
|
|
|
|
|
|
|
let event = { |
|
|
|
|
const eventListener = { |
|
|
|
|
clickEvent: '', |
|
|
|
|
mousedownEvent: '', |
|
|
|
|
mousemoveEvent: '', |
|
|
|
|
rightClickEvent: '' |
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
let dragCircle = []; |
|
|
|
|
let dragCircleEvent = []; |
|
|
|
|
const geojson = props.geojson; |
|
|
|
|
let wayPoint; |
|
|
|
|
let guideLine; |
|
|
|
|
let lineString; |
|
|
|
|
|
|
|
|
|
let distanceMarker = []; |
|
|
|
|
let polygon; |
|
|
|
|
|
|
|
|
|
useEffect(() => { |
|
|
|
|
setRadiusCircle(props.dragSize); |
|
|
|
|
}, [props.dragSize]); |
|
|
|
|
|
|
|
|
|
useEffect(() => { |
|
|
|
|
drawInit(); |
|
|
|
|
if (mapControl.drawType) drawInit(); |
|
|
|
|
}, [mapControl.drawType]); |
|
|
|
|
|
|
|
|
|
const initFeature = type => { |
|
|
|
|
return { |
|
|
|
|
type: 'Feature', |
|
|
|
|
geometry: { |
|
|
|
|
type: type, |
|
|
|
|
coordinates: [] |
|
|
|
|
}, |
|
|
|
|
properties: { id: '' } |
|
|
|
|
}; |
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
const drawInit = () => { |
|
|
|
|
wayPoint = initFeature('Point'); |
|
|
|
|
wayPoint.properties.id = 'point'; |
|
|
|
|
|
|
|
|
|
guideLine = initFeature('LineString'); |
|
|
|
|
guideLine.properties.id = 'guideline'; |
|
|
|
|
|
|
|
|
|
lineString = initFeature('LineString'); |
|
|
|
|
lineString.properties.id = 'polyline'; |
|
|
|
|
|
|
|
|
|
polygon = initFeature('Polygon'); |
|
|
|
|
polygon.properties.id = 'polygon'; |
|
|
|
|
|
|
|
|
|
const drawType = mapControl.drawType; |
|
|
|
|
handlerButtonClick(drawType); |
|
|
|
|
}; |
|
|
|
@ -85,55 +95,189 @@ export const MapBoxDraw = props => {
|
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
const handlerClearMode = () => { |
|
|
|
|
// if (pastPolyline) {
|
|
|
|
|
// pastP
|
|
|
|
|
// }
|
|
|
|
|
// geojson.features = [];
|
|
|
|
|
// wayPoint.geometry.coordinates = [];
|
|
|
|
|
// guideLine.geometry.coordinates = [];
|
|
|
|
|
// lineString.geometry.coordinates = [];
|
|
|
|
|
// mapObject.getSource('geojson').setData(geojson);
|
|
|
|
|
|
|
|
|
|
finishDraw(); |
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
const finishDraw = () => { |
|
|
|
|
removeListener(); |
|
|
|
|
|
|
|
|
|
// geojson.features = [];
|
|
|
|
|
// wayPoint.geometry.coordinates = [];
|
|
|
|
|
// guideLine.geometry.coordinates = [];
|
|
|
|
|
// lineString.geometry.coordinates = [];
|
|
|
|
|
// mapObject.getSource('geojson').setData(geojson);
|
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
const handlerStartMode = mode => { |
|
|
|
|
if (!mode) return; |
|
|
|
|
|
|
|
|
|
if (pastClickEvent) { |
|
|
|
|
mapObject.removeEventListener(pastClickEvent); |
|
|
|
|
eventListener.clickEvent = e => { |
|
|
|
|
if (mode === 'LINE') onClickPolyline(e); |
|
|
|
|
if (mode === 'POLYGON') onClickPolygon(e); |
|
|
|
|
if (mode === 'RESET') handlerClearMode(); |
|
|
|
|
}; |
|
|
|
|
mapObject.on('click', eventListener.clickEvent); |
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
const removeListener = () => { |
|
|
|
|
mapObject.off('click', eventListener.clickEvent); |
|
|
|
|
mapObject.off('mousemove', eventListener.mousemoveEvent); |
|
|
|
|
mapObject.off('contextmenu', eventListener.rightClickEvent); |
|
|
|
|
|
|
|
|
|
eventListener.clickEvent = ''; |
|
|
|
|
eventListener.mousemoveEvent = ''; |
|
|
|
|
eventListener.rightClickEvent = ''; |
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
const onClickPolyline = e => { |
|
|
|
|
const features = mapObject.queryRenderedFeatures(e.point, { |
|
|
|
|
layers: ['waypoint'] |
|
|
|
|
}); |
|
|
|
|
|
|
|
|
|
lineString.properties.id = 'polyline'; |
|
|
|
|
if (geojson.features.length > 1) { |
|
|
|
|
geojson.features = geojson.features.filter( |
|
|
|
|
geo => geo.properties?.id !== 'polyline' |
|
|
|
|
); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
// event.clickEvent = mapObject.addEventListener('click', function (e) {
|
|
|
|
|
// if (mode === 'LINE') {
|
|
|
|
|
// onClickPolyline(e);
|
|
|
|
|
// }
|
|
|
|
|
// else if (mode === 'POLYGON') {
|
|
|
|
|
// onClickPolygon(e);
|
|
|
|
|
// } else if (mode === 'CIRCLE') {
|
|
|
|
|
// onClickCircle(e);
|
|
|
|
|
// }
|
|
|
|
|
// });
|
|
|
|
|
if (mode === 'CIRCLE') setPastClickEvent(event.clickEvent); |
|
|
|
|
if (features.length) { |
|
|
|
|
const id = features[0].properties.id; |
|
|
|
|
geojson.features = geojson.features.filter( |
|
|
|
|
point => point.properties.id !== id |
|
|
|
|
); |
|
|
|
|
} else { |
|
|
|
|
const point = { |
|
|
|
|
type: 'Feature', |
|
|
|
|
geometry: { |
|
|
|
|
type: 'Point', |
|
|
|
|
coordinates: [e.lngLat.lng, e.lngLat.lat] |
|
|
|
|
}, |
|
|
|
|
properties: { id: 'point' } |
|
|
|
|
}; |
|
|
|
|
geojson.features.push(point); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
const removeListener = () => { |
|
|
|
|
mapObject.removeEventListener(event.clickEvent); |
|
|
|
|
mapObject.removeEventListener(pastClickEvent); |
|
|
|
|
setPastClickEvent(); |
|
|
|
|
guideLine.properties.id = 'guideline'; |
|
|
|
|
guideLine.geometry.coordinates = [[e.lngLat.lng, e.lngLat.lat]]; |
|
|
|
|
|
|
|
|
|
mapObject.removeEventListener(event.mousedownEvent); |
|
|
|
|
mapObject.removeEventListener(event.rightClickEvent); |
|
|
|
|
if (!circle) $(document).off('mousemove.measure'); |
|
|
|
|
if (geojson.features.length > 1) { |
|
|
|
|
//point들의 좌표만 뽑아서 polyline의 좌표로 넣어줌
|
|
|
|
|
lineString.geometry.coordinates = geojson.features |
|
|
|
|
.filter(point => point.properties?.id === 'point') |
|
|
|
|
.map(point => point.geometry.coordinates); |
|
|
|
|
|
|
|
|
|
geojson.features.push(lineString); |
|
|
|
|
console.log(lineString.geometry, '>>>lineString'); |
|
|
|
|
} else { |
|
|
|
|
eventListener.rightClickEvent = () => { |
|
|
|
|
finishDraw(); |
|
|
|
|
}; |
|
|
|
|
mapObject.on('contextmenu', eventListener.rightClickEvent); |
|
|
|
|
|
|
|
|
|
eventListener.mousemoveEvent = e => { |
|
|
|
|
onMouseMovePolyline(e); |
|
|
|
|
}; |
|
|
|
|
mapObject.on('mousemove', eventListener.mousemoveEvent); |
|
|
|
|
} |
|
|
|
|
mapObject.getSource('geojson').setData(geojson); |
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
// const handlerFinishDraw = () => {
|
|
|
|
|
// removeListener();
|
|
|
|
|
const onMouseMovePolyline = e => { |
|
|
|
|
if (guideLine.geometry.coordinates.length > 1) { |
|
|
|
|
guideLine.geometry.coordinates.pop(); |
|
|
|
|
|
|
|
|
|
// if(polyline) {
|
|
|
|
|
// if(guideline) {
|
|
|
|
|
// guideline
|
|
|
|
|
// }
|
|
|
|
|
// }
|
|
|
|
|
// }
|
|
|
|
|
//기존 guideline 제거
|
|
|
|
|
geojson.features = geojson.features.filter( |
|
|
|
|
point => point.properties?.id !== 'guideline' |
|
|
|
|
); |
|
|
|
|
//새로운 가이드라인 push
|
|
|
|
|
geojson.features.push(guideLine); |
|
|
|
|
} |
|
|
|
|
guideLine.geometry.coordinates.push([e.lngLat.lng, e.lngLat.lat]); |
|
|
|
|
|
|
|
|
|
const onClickPolyline = e => { |
|
|
|
|
const coord = e.coord; |
|
|
|
|
mapObject.getSource('geojson').setData(geojson); |
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
const onClickPolygon = e => { |
|
|
|
|
const features = mapObject.queryRenderedFeatures(e.point, { |
|
|
|
|
layers: ['waypoint'] |
|
|
|
|
}); |
|
|
|
|
|
|
|
|
|
polygon.properties.id = 'polygon'; |
|
|
|
|
if (geojson.features.length > 1) { |
|
|
|
|
geojson.features = geojson.features.filter( |
|
|
|
|
geo => geo.properties?.id !== 'polygon' |
|
|
|
|
); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
if (features.length) { |
|
|
|
|
const id = features[0].properties.id; |
|
|
|
|
geojson.features = geojson.features.filter( |
|
|
|
|
point => point.properties.id !== id |
|
|
|
|
); |
|
|
|
|
} else { |
|
|
|
|
const point = { |
|
|
|
|
type: 'Feature', |
|
|
|
|
geometry: { |
|
|
|
|
type: 'Point', |
|
|
|
|
coordinates: [e.lngLat.lng, e.lngLat.lat] |
|
|
|
|
}, |
|
|
|
|
properties: { id: 'point' } |
|
|
|
|
}; |
|
|
|
|
geojson.features.push(point); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
guideLine.properties.id = 'guideline'; |
|
|
|
|
guideLine.geometry.coordinates = [[e.lngLat.lng, e.lngLat.lat]]; |
|
|
|
|
|
|
|
|
|
if (geojson.features.length > 1) { |
|
|
|
|
//point들의 좌표만 뽑아서 Polygon의 좌표로 넣어줌
|
|
|
|
|
polygon.geometry.coordinates = [ |
|
|
|
|
geojson.features |
|
|
|
|
.filter(point => point.properties?.id === 'point') |
|
|
|
|
.map(point => point.geometry.coordinates) |
|
|
|
|
]; |
|
|
|
|
geojson.features.push(polygon); |
|
|
|
|
} else { |
|
|
|
|
eventListener.rightClickEvent = () => { |
|
|
|
|
finishDraw(); |
|
|
|
|
}; |
|
|
|
|
mapObject.on('contextmenu', eventListener.rightClickEvent); |
|
|
|
|
|
|
|
|
|
console.log(coord, '>>>coord'); |
|
|
|
|
eventListener.mousemoveEvent = e => { |
|
|
|
|
onMouseMovePolygon(e); |
|
|
|
|
}; |
|
|
|
|
mapObject.on('mousemove', eventListener.mousemoveEvent); |
|
|
|
|
} |
|
|
|
|
mapObject.getSource('geojson').setData(geojson); |
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
const onMouseMovePolygon = e => { |
|
|
|
|
if (polygon.geometry.coordinates.length > 0) { |
|
|
|
|
if (polygon.geometry.coordinates[0].length > 1) { |
|
|
|
|
if (guideLine.geometry.coordinates.length > 1) { |
|
|
|
|
guideLine.geometry.coordinates.pop(); |
|
|
|
|
polygon.geometry.coordinates[0].pop(); |
|
|
|
|
|
|
|
|
|
geojson.features = geojson.features.filter( |
|
|
|
|
point => point.properties?.id !== 'polygon' |
|
|
|
|
); |
|
|
|
|
|
|
|
|
|
geojson.features.push(polygon); |
|
|
|
|
} |
|
|
|
|
guideLine.geometry.coordinates.push([e.lngLat.lng, e.lngLat.lat]); |
|
|
|
|
polygon.geometry.coordinates[0].push([e.lngLat.lng, e.lngLat.lat]); |
|
|
|
|
|
|
|
|
|
mapObject.getSource('geojson').setData(geojson); |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
const addMileStone = (coord, text) => { |
|
|
|
|