|
|
|
@ -573,16 +573,14 @@ export default function MapBoxMap({ handlerDrawObjInit }) {
|
|
|
|
|
}); |
|
|
|
|
|
|
|
|
|
map.on('click', e => { |
|
|
|
|
console.log(drawObj.getMode()); |
|
|
|
|
if (drawObj.getMode() === 'draw_line_string') { |
|
|
|
|
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 = '시작점 선택';
|
|
|
|
|
startPoint = e.lngLat; |
|
|
|
|
} |
|
|
|
|
}); |
|
|
|
|
|
|
|
|
|
map.on('mousemove', e => { |
|
|
|
|
let distance = 0; |
|
|
|
|
if (startPoint) { |
|
|
|
|
// console.log(drawObj.getAll());
|
|
|
|
|
const feature = []; |
|
|
|
@ -596,13 +594,34 @@ export default function MapBoxMap({ handlerDrawObjInit }) {
|
|
|
|
|
}, |
|
|
|
|
type: 'Feature' |
|
|
|
|
}; |
|
|
|
|
const distance = turf.length(obj); |
|
|
|
|
distance = turf.length(obj); |
|
|
|
|
mouseCursorRef.current.style.left = e.originalEvent.pageX + 'px'; |
|
|
|
|
mouseCursorRef.current.style.top = e.originalEvent.pageY + 45 + 'px'; |
|
|
|
|
mouseCursorRef.current.innerText = `${distance.toLocaleString()}km`; |
|
|
|
|
// const endPoint = e.lngLat;
|
|
|
|
|
// const distance = calculateDistance(startPoint, endPoint);
|
|
|
|
|
// mouseCursorRef.current.innerText = `Distance from start point: ${distance.toFixed(
|
|
|
|
|
// 2
|
|
|
|
|
// )} meters`;
|
|
|
|
|
if (drawObj.getMode() === 'simple_select') { |
|
|
|
|
// startPoint = null;
|
|
|
|
|
const box = document.getElementById('distance_box'); |
|
|
|
|
box.innerText = `${distance.toLocaleString()}km`; |
|
|
|
|
box.style.display = 'block'; |
|
|
|
|
mouseCursorRef.current.style.display = 'none'; |
|
|
|
|
mouseCursorRef.current.style.innerText = ''; |
|
|
|
|
} |
|
|
|
|
if (drawObj.getMode() === 'direct_select') { |
|
|
|
|
const box = document.getElementById('distance_box'); |
|
|
|
|
box.innerText = `${distance.toLocaleString()}km`; |
|
|
|
|
} |
|
|
|
|
} else { |
|
|
|
|
if (drawObj.getMode() === 'draw_line_string') { |
|
|
|
|
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 = '시작점 선택'; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
}); |
|
|
|
|
|
|
|
|
@ -636,6 +655,7 @@ export default function MapBoxMap({ handlerDrawObjInit }) {
|
|
|
|
|
fontWeight: 500 |
|
|
|
|
}} |
|
|
|
|
></div> |
|
|
|
|
|
|
|
|
|
{isMapLoaded && mapObject ? ( |
|
|
|
|
<> |
|
|
|
|
<DronToast /> |
|
|
|
|