|
|
@ -621,7 +621,6 @@ export const getDraw = mode => { |
|
|
|
}, |
|
|
|
}, |
|
|
|
paint: { |
|
|
|
paint: { |
|
|
|
'line-color': '#8a1c05', |
|
|
|
'line-color': '#8a1c05', |
|
|
|
'line-dasharray': [0.2, 2], |
|
|
|
|
|
|
|
'line-width': 2 |
|
|
|
'line-width': 2 |
|
|
|
} |
|
|
|
} |
|
|
|
}, |
|
|
|
}, |
|
|
@ -671,13 +670,9 @@ export const handlerStartMode = (mode, drawObj) => { |
|
|
|
} |
|
|
|
} |
|
|
|
}; |
|
|
|
}; |
|
|
|
|
|
|
|
|
|
|
|
export const handlerOnClickDrawLineString = ( |
|
|
|
export const handlerDrawEvents = (mapInstance, callback, refObj, drawObj) => { |
|
|
|
mapInstance, |
|
|
|
|
|
|
|
callback, |
|
|
|
|
|
|
|
refObj, |
|
|
|
|
|
|
|
drawObj |
|
|
|
|
|
|
|
) => { |
|
|
|
|
|
|
|
const originLineClickHandler = MapboxDraw.modes.draw_line_string.onClick; |
|
|
|
const originLineClickHandler = MapboxDraw.modes.draw_line_string.onClick; |
|
|
|
|
|
|
|
const originPolygonClickHandler = MapboxDraw.modes.draw_polygon.onClick; |
|
|
|
const { totalDistanceRef, mouseCursorRef } = refObj; |
|
|
|
const { totalDistanceRef, mouseCursorRef } = refObj; |
|
|
|
|
|
|
|
|
|
|
|
let startPoint; |
|
|
|
let startPoint; |
|
|
@ -686,6 +681,20 @@ export const handlerOnClickDrawLineString = ( |
|
|
|
originLineClickHandler.call(this, state, e); |
|
|
|
originLineClickHandler.call(this, state, e); |
|
|
|
startPoint = e.lngLat; |
|
|
|
startPoint = e.lngLat; |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const distance = getDrawDistance(drawObj); |
|
|
|
|
|
|
|
if (typeof distance === 'string') { |
|
|
|
|
|
|
|
totalDistanceRef.current.style.display = 'block'; |
|
|
|
|
|
|
|
totalDistanceRef.current.innerText = `총 거리 : ${distance.toLocaleString()}m`; |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const markerList = getDintancePointPopupList(drawObj); |
|
|
|
|
|
|
|
callback(mapInstance, markerList, drawObj); |
|
|
|
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
MapboxDraw.modes.draw_polygon.onClick = function (state, e) { |
|
|
|
|
|
|
|
originPolygonClickHandler.call(this, state, e); |
|
|
|
|
|
|
|
startPoint = e.lngLat; |
|
|
|
|
|
|
|
|
|
|
|
const markerList = getDintancePointPopupList(drawObj); |
|
|
|
const markerList = getDintancePointPopupList(drawObj); |
|
|
|
callback(mapInstance, markerList, drawObj); |
|
|
|
callback(mapInstance, markerList, drawObj); |
|
|
|
}; |
|
|
|
}; |
|
|
@ -717,15 +726,10 @@ export const handlerOnClickDrawLineString = ( |
|
|
|
mouseCursorRef.current.style.display = 'none'; |
|
|
|
mouseCursorRef.current.style.display = 'none'; |
|
|
|
}); |
|
|
|
}); |
|
|
|
|
|
|
|
|
|
|
|
// mapInstance.on('draw.modechange', obj => {
|
|
|
|
|
|
|
|
// if (obj.mode === 'simple_select') {
|
|
|
|
|
|
|
|
// }
|
|
|
|
|
|
|
|
// });
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
mapInstance.on('draw.create', () => { |
|
|
|
mapInstance.on('draw.create', () => { |
|
|
|
totalDistanceRef.current.style.display = 'block'; |
|
|
|
// totalDistanceRef.current.style.display = 'block';
|
|
|
|
const distance = getDrawDistance(drawObj); |
|
|
|
// const distance = getDrawDistance(drawObj);
|
|
|
|
totalDistanceRef.current.innerText = `총 거리 : ${distance.toLocaleString()}m`; |
|
|
|
// totalDistanceRef.current.innerText = `총 거리 : ${distance.toLocaleString()}m`;
|
|
|
|
mouseCursorRef.current.style.display = 'none'; |
|
|
|
mouseCursorRef.current.style.display = 'none'; |
|
|
|
mouseCursorRef.current.style.innerText = ''; |
|
|
|
mouseCursorRef.current.style.innerText = ''; |
|
|
|
startPoint = null; |
|
|
|
startPoint = null; |
|
|
@ -753,6 +757,7 @@ export const getDrawDistance = drawObj => { |
|
|
|
distance = turf.length(obj, { units: 'kilometers' }); |
|
|
|
distance = turf.length(obj, { units: 'kilometers' }); |
|
|
|
distance = distance * 1000; |
|
|
|
distance = distance * 1000; |
|
|
|
distance = distance.toFixed(2); |
|
|
|
distance = distance.toFixed(2); |
|
|
|
|
|
|
|
if (distance === '0.00') return; |
|
|
|
} |
|
|
|
} |
|
|
|
return distance; |
|
|
|
return distance; |
|
|
|
}; |
|
|
|
}; |
|
|
@ -764,34 +769,54 @@ export const getDrawDistance = drawObj => { |
|
|
|
*/ |
|
|
|
*/ |
|
|
|
export const getDintancePointPopupList = drawObj => { |
|
|
|
export const getDintancePointPopupList = drawObj => { |
|
|
|
const drawGeometry = drawObj.getAll().features[0]; |
|
|
|
const drawGeometry = drawObj.getAll().features[0]; |
|
|
|
|
|
|
|
|
|
|
|
let markerList = []; |
|
|
|
let markerList = []; |
|
|
|
|
|
|
|
|
|
|
|
if (drawGeometry?.geometry) { |
|
|
|
if (drawGeometry?.geometry) { |
|
|
|
drawGeometry.geometry.coordinates.map((i, idx) => { |
|
|
|
const coordinates = drawGeometry.geometry.coordinates; |
|
|
|
if ( |
|
|
|
if (drawGeometry.geometry.type === 'LineString') { |
|
|
|
i[0] !== |
|
|
|
coordinates.map((i, idx) => { |
|
|
|
drawGeometry.geometry.coordinates[ |
|
|
|
if (i[0] !== coordinates[coordinates.length - 1][0]) { |
|
|
|
drawGeometry.geometry.coordinates.length - 1 |
|
|
|
const obj = { |
|
|
|
][0] |
|
|
|
geometry: { |
|
|
|
) { |
|
|
|
coordinates: [i, coordinates[idx + 1]], |
|
|
|
const obj = { |
|
|
|
type: 'LineString' |
|
|
|
geometry: { |
|
|
|
}, |
|
|
|
coordinates: [i, drawGeometry.geometry.coordinates[idx + 1]], |
|
|
|
type: 'Feature' |
|
|
|
type: 'LineString' |
|
|
|
}; |
|
|
|
}, |
|
|
|
let distance = turf.length(obj, { units: 'kilometers' }); |
|
|
|
type: 'Feature' |
|
|
|
distance = distance * 1000; |
|
|
|
}; |
|
|
|
distance = distance.toFixed(2); |
|
|
|
let distance = turf.length(obj, { units: 'kilometers' }); |
|
|
|
if (distance !== '0.00') { |
|
|
|
distance = distance * 1000; |
|
|
|
markerList.push({ |
|
|
|
distance = distance.toFixed(2); |
|
|
|
text: `${distance.toLocaleString()}m`, |
|
|
|
if (distance !== '0.00') { |
|
|
|
coord: [coordinates[idx + 1]] |
|
|
|
markerList.push({ |
|
|
|
}); |
|
|
|
text: `${distance.toLocaleString()}m`, |
|
|
|
} |
|
|
|
coord: [drawGeometry.geometry.coordinates[idx + 1]] |
|
|
|
|
|
|
|
}); |
|
|
|
|
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
}); |
|
|
|
}); |
|
|
|
} else if (drawGeometry.geometry.type === 'Polygon') { |
|
|
|
|
|
|
|
const polygonCoords = coordinates[0]; // Assuming first ring is the outer boundary
|
|
|
|
|
|
|
|
polygonCoords.map((i, idx) => { |
|
|
|
|
|
|
|
if (idx < polygonCoords.length - 1) { |
|
|
|
|
|
|
|
const obj = { |
|
|
|
|
|
|
|
geometry: { |
|
|
|
|
|
|
|
coordinates: [i, polygonCoords[idx + 1]], |
|
|
|
|
|
|
|
type: 'LineString' |
|
|
|
|
|
|
|
}, |
|
|
|
|
|
|
|
type: 'Feature' |
|
|
|
|
|
|
|
}; |
|
|
|
|
|
|
|
let distance = turf.length(obj, { units: 'kilometers' }); |
|
|
|
|
|
|
|
distance = distance * 1000; |
|
|
|
|
|
|
|
distance = distance.toFixed(2); |
|
|
|
|
|
|
|
if (distance !== '0.00') { |
|
|
|
|
|
|
|
markerList.push({ |
|
|
|
|
|
|
|
text: `${distance.toLocaleString()}m`, |
|
|
|
|
|
|
|
coord: [polygonCoords[idx + 1]] |
|
|
|
|
|
|
|
}); |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
}); |
|
|
|
|
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
return markerList; |
|
|
|
return markerList; |
|
|
|