|
|
|
@ -670,7 +670,13 @@ export const handlerStartMode = (mode, drawObj) => {
|
|
|
|
|
} |
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
export const handlerDrawEvents = (mapInstance, callback, refObj, drawObj) => { |
|
|
|
|
export const handlerDrawEvents = ( |
|
|
|
|
mapInstance, |
|
|
|
|
popupCallback, |
|
|
|
|
drawEndCallback, |
|
|
|
|
refObj, |
|
|
|
|
drawObj |
|
|
|
|
) => { |
|
|
|
|
const originLineClickHandler = MapboxDraw.modes.draw_line_string.onClick; |
|
|
|
|
const originPolygonClickHandler = MapboxDraw.modes.draw_polygon.onClick; |
|
|
|
|
const { totalDistanceRef, mouseCursorRef, totalAreaRef } = refObj; |
|
|
|
@ -688,7 +694,7 @@ export const handlerDrawEvents = (mapInstance, callback, refObj, drawObj) => {
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
const markerList = getDintancePointPopupList(drawObj); |
|
|
|
|
callback(mapInstance, markerList, drawObj); |
|
|
|
|
popupCallback(mapInstance, markerList, drawObj); |
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
MapboxDraw.modes.draw_polygon.onClick = function (state, e) { |
|
|
|
@ -703,9 +709,6 @@ export const handlerDrawEvents = (mapInstance, callback, refObj, drawObj) => {
|
|
|
|
|
totalAreaRef.current.style.display = 'block'; |
|
|
|
|
totalAreaRef.current.innerText = `면적 : ${area}m²`; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
// const markerList = getDintancePointPopupList(drawObj);
|
|
|
|
|
// callback(mapInstance, markerList, drawObj);
|
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
mapInstance.on('mousemove', e => { |
|
|
|
@ -717,7 +720,7 @@ export const handlerDrawEvents = (mapInstance, callback, refObj, drawObj) => {
|
|
|
|
|
// distanceMarkers.map(i => i.remove());
|
|
|
|
|
if (type.features[0].geometry.type === 'LineString') { |
|
|
|
|
const markerList = getDintancePointPopupList(drawObj); |
|
|
|
|
callback(mapInstance, markerList, drawObj); |
|
|
|
|
popupCallback(mapInstance, markerList, drawObj); |
|
|
|
|
const distance = getDrawDistance(drawObj, 'draw_line_string'); |
|
|
|
|
totalDistanceRef.current.innerText = `총 거리 : ${distance.toLocaleString()}m`; |
|
|
|
|
} else { |
|
|
|
@ -728,12 +731,7 @@ export const handlerDrawEvents = (mapInstance, callback, refObj, drawObj) => {
|
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
// if (drawMode === 'direct_select') {
|
|
|
|
|
// if (drawMode === 'draw_line_string') {
|
|
|
|
|
// const markerList = getDintancePointPopupList(drawObj);
|
|
|
|
|
// callback(mapInstance, markerList, drawObj);
|
|
|
|
|
// }
|
|
|
|
|
// }
|
|
|
|
|
|
|
|
|
|
if (drawMode === 'draw_line_string') { |
|
|
|
|
if (drawObj.getAll().features[0].geometry.coordinates.length === 1) { |
|
|
|
|
mouseCursorRef.current.style.display = 'block'; |
|
|
|
@ -742,25 +740,43 @@ export const handlerDrawEvents = (mapInstance, callback, refObj, drawObj) => {
|
|
|
|
|
mouseCursorRef.current.innerText = '시작점 선택'; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
if (drawMode === 'draw_polygon') { |
|
|
|
|
if (drawObj.getAll().features[0].geometry.coordinates[0].length === 2) { |
|
|
|
|
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 = '시작점 선택'; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
}); |
|
|
|
|
mapInstance.on('mouseout', e => { |
|
|
|
|
mouseCursorRef.current.style.display = 'none'; |
|
|
|
|
}); |
|
|
|
|
|
|
|
|
|
mapInstance.on('draw.create', () => { |
|
|
|
|
// totalDistanceRef.current.style.display = 'block';
|
|
|
|
|
// const distance = getDrawDistance(drawObj);
|
|
|
|
|
// totalDistanceRef.current.innerText = `총 거리 : ${distance.toLocaleString()}m`;
|
|
|
|
|
mapInstance.on('draw.create', e => { |
|
|
|
|
console.log(e); |
|
|
|
|
drawEndCallback(e.features.length); |
|
|
|
|
mouseCursorRef.current.style.display = 'none'; |
|
|
|
|
mouseCursorRef.current.style.innerText = ''; |
|
|
|
|
startPoint = null; |
|
|
|
|
}); |
|
|
|
|
|
|
|
|
|
mapInstance.on('draw.modechange', (obj, e) => { |
|
|
|
|
if (obj.mode === 'simple_select') { |
|
|
|
|
const featuresLength = drawObj.getAll().features.length; |
|
|
|
|
if (!featuresLength) { |
|
|
|
|
console.log('!?!?'); |
|
|
|
|
drawEndCallback(drawObj.getAll().features.length); |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
}); |
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
/** |
|
|
|
|
* |
|
|
|
|
* @param {MapboxDraw} drawObj |
|
|
|
|
* @returns 총 거리 : number |
|
|
|
|
* @returns 총 거리 : string |
|
|
|
|
*/ |
|
|
|
|
export const getDrawDistance = (drawObj, drawMode) => { |
|
|
|
|
const drawGeometry = drawObj.getAll().features[0]; |
|
|
|
@ -788,6 +804,11 @@ export const getDrawDistance = (drawObj, drawMode) => {
|
|
|
|
|
return distance; |
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
/** |
|
|
|
|
* |
|
|
|
|
* @param {MapboxDraw} drawObj |
|
|
|
|
* @returns 면적 : string |
|
|
|
|
*/ |
|
|
|
|
export const getArea = drawObj => { |
|
|
|
|
const drawGeometry = drawObj.getAll().features[0]; |
|
|
|
|
let area = 0; |
|
|
|
|