diff --git a/src/components/map/mapbox/MapBoxMap.js b/src/components/map/mapbox/MapBoxMap.js
index 7dbfcf10..d90fccaf 100644
--- a/src/components/map/mapbox/MapBoxMap.js
+++ b/src/components/map/mapbox/MapBoxMap.js
@@ -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
}}
>
+
{isMapLoaded && mapObject ? (
<>