pav
/
pav-fe-kac-pal
9
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

비행계획서 buffer 작업

pull/2/head
junh_eee(이준희) 2 years ago
parent
6dbc64678c
commit
271e567280
3 changed files with 212 additions and 325 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 5
      src/components/basis/flight/plan/FlightPlanAreaDetailForm.js
  2. 25
      src/components/basis/flight/plan/FlightPlanAreaMap.js
  3. 507
      src/components/map/naver/draw/FlightPlanDrawTest.js

5
src/components/basis/flight/plan/FlightPlanAreaDetailForm.js
Unescape View File

@ -9,11 +9,6 @@ import {
Row,
Button
} from 'reactstrap';
import { useDispatch, useSelector } from 'react-redux';
import { FeatureAirZone } from '../../../map/naver/feature/FeatureAirZone';
import { FlightPlanDraw } from '../../../map/naver/draw/FlightPlanDraw';
import { drawTypeChangeAction, drawCheckAction } from '../../../../modules/control/map/actions/controlMapActions';
import { FlightPlanDrawTest } from '../../../map/naver/draw/FlightPlanDrawTest';
const FlightPlanAreaDetailForm = ({ handleSave, handleClose, handleChange, handleBufferList, data }) => {

25
src/components/basis/flight/plan/FlightPlanAreaMap.js
Unescape View File

@ -10,6 +10,7 @@ import {
FormGroup
} from 'reactstrap';
import { useDispatch, useSelector } from 'react-redux';
import * as Actions from '../../../../modules/basis/flight/actions/basisFlightAction';
import { FeatureAirZone } from '../../../map/naver/feature/FeatureAirZone';
import { drawTypeChangeAction, drawCheckAction } from '../../../../modules/control/map/actions/controlMapActions';
import { FlightPlanDrawTest } from '../../../map/naver/draw/FlightPlanDrawTest';
@ -20,7 +21,6 @@ const FlightPlanAreaMap = (props) => {
const dispatch = useDispatch();
const naver = window.naver;
const airArea = props.airArea;
const mapControl = useSelector(state => state.controlMapReducer);
const { areaCoordList } = useSelector(state => state.flightState);
@ -45,6 +45,9 @@ const FlightPlanAreaMap = (props) => {
setMapAreaCoordList(areaCoordList)
}, [areaCoordList]);
const [areaDetail, setAreaDetail] = useState(initFlightBas.initDetail.areaList);
const ModeInit = () => {
setMode(mapControl.drawType)
}
@ -68,11 +71,11 @@ const FlightPlanAreaMap = (props) => {
const handlerDrawType = val => {
dispatch(drawTypeChangeAction(val));
};
const handlerDrawCheck = val => {
dispatch(drawCheckAction(val));
};
};
const handleBufferList = () => {
dispatch(Actions.FLIGHT_PLAN_AREA_BUFFER_LIST.request(areaDetail));
}
const handleInitCoordinates = () => {
const init = initFlightBas.initDetail.areaList.concat();
@ -128,7 +131,8 @@ const FlightPlanAreaMap = (props) => {
mode={mode}
areaCoordList={mapAreaCoordList}
handleCoordinates={handleCoordinates}
handleInitCoordinates={handleInitCoordinates}
handleInitCoordinates={handleInitCoordinates}
handleBufferList={handleBufferList}
/> : null}
<Button.Ripple
@ -145,13 +149,6 @@ const FlightPlanAreaMap = (props) => {
>
초기화
</Button.Ripple>
{/* <Button.Ripple
color='primary'
className='area-button'
>
적용
</Button.Ripple> */}
</div>
</div>

507
src/components/map/naver/draw/FlightPlanDrawTest.js
Unescape View File

@ -1,37 +1,25 @@
import $ from 'jquery';
import buffer from '@turf/buffer'
import { useEffect, useState } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { drawTypeChangeAction } from '../../../../modules/control/map/actions/controlMapActions';
import GeoJSONReader from 'jsts/org/locationtech/jts/io/GeoJSONReader';
import GeometryFactory from 'jsts/org/locationtech/jts/geom/GeometryFactory';
import { BufferOp } from 'jsts/org/locationtech/jts/operation/buffer';
import { DistanceOp } from 'jsts/org/locationtech/jts/operation/distance/DistanceOp';
import JSTSWKTReader from 'jsts/org/locationtech/jts/io/WKTReader';
import GeoJSONWriter from 'jsts/org/locationtech/jts/io/GeoJSONWriter';
import JSTSBufferOp from 'jsts/org/locationtech/jts/operation/buffer/BufferOp'
import JSTSBufferParameter from 'jsts/org/locationtech/jts/operation/buffer/BufferParameters';
export const FlightPlanDrawTest = props => {
const dispatch = useDispatch();
const mapControl = useSelector(state => state.controlMapReducer);
const draw = useSelector(state => state.basisFlightDrawReducer);
const [pastPolyline, setPolyline] = useState();
const [pastBuffer, setBuffer] = useState();
const [pastPolygon, setPolygon] = useState();
const [pastCircle, setCircle] = useState();
// const [pastCircle, setCircle] = useState();
const [pastCircle, setCircle] = useState([]);
const [pastEve, setEve] = useState();
const [pastDragCircle, setDragCircle] = useState([]);
const [pastMarker, setMarker] = useState([]);
const naver = props.naver;
const map = props.map;
const openModal = props.openModal;
let mode = props.mode;
let areaInfo;
@ -39,7 +27,7 @@ export const FlightPlanDrawTest = props => {
let polyline;
let guideline;
let bufferPolyline;
let bufferPolygon;
let polygon;
@ -57,6 +45,8 @@ export const FlightPlanDrawTest = props => {
let check;
let distanceMarker = [];
useEffect(() => {
drawInit();
}, [mapControl.drawType])
@ -65,20 +55,6 @@ export const FlightPlanDrawTest = props => {
handleDetailDrwa();
}, [props.areaCoordList])
const zoomChange = () => {
let change;
if (change) {
naver.maps.Event.removeListener(change);
} else {
change = naver.maps.Event.addListener(map, 'zoom_changed', function () {
if (dragCircle) {
// dragCircle.forEach(prev => prev.setRadius(map._mapOptions.zoom + 5));
// dragCircle.forEach(prev => prev.setRadius(prev.getRadius() * 1.25));
}
})
}
}
const drawInit = () => {
console.log(mapControl.drawType);
if (mapControl.drawType === 'LINE') {
@ -95,8 +71,6 @@ export const FlightPlanDrawTest = props => {
const onClickButton = (newMode) => {
console.log('onClickButton');
zoomChange();
clearMode(mode);
if (mode === newMode) {
@ -114,62 +88,38 @@ export const FlightPlanDrawTest = props => {
// if(!mode) return;
// clear mode는 전체를 다 초기화 하는게 맞지 않을까..? 무조건 drawType이 변할때마다 초기화해주기로..
if (pastPolyline) {
console.log('clrea polyline ', pastPolyline)
console.log('clear polyline ', pastPolyline)
pastPolyline.setMap(null);
pastDragCircle.forEach(c => c.setMap(null));
pastBuffer.setMap(null);
setPolyline();
setDragCircle([]);
setBuffer();
}
if (pastCircle) {
console.log('clrea circle ', pastCircle)
pastCircle.setMap(null);
console.log('clear circle ', pastCircle)
pastCircle.forEach(prev => prev.setMap(null))
naver.maps.Event.removeListener(pastEve);
setCircle();
// setCircle();
setCircle([]);
}
if (pastPolygon) {
console.log('clrea polygon ', pastPolygon)
console.log('clear polygon ', pastPolygon)
pastPolygon.setMap(null);
pastDragCircle.forEach(c => c.setMap(null));
setPolygon();
setDragCircle([]);
}
if (pastMarker) {
console.log('clear marker ', pastMarker)
pastMarker.forEach(m => m.setMap(null));
}
finishDraw();
props.handleInitCoordinates();
// if(mode === 'LINE' && pastPolyline) {
// pastPolyline.setMap(null);
// pastDragCircle.forEach(c => c.setMap(null));
// setPolyline({});
// setDragCircle([]);
// }
// if(mode === 'POLYGON' && pastPolygon) {
// pastPolygon.setMap(null);
// pastDragCircle.forEach(c => c.setMap(null));
// setPolygon({});
// setDragCircle([]);
// }
// if(mode === 'CIRCLE' && pastCircle) {
// pastCircle.setMap(null);
// naver.maps.Event.removeListener(pastEve);
// setCircle({});
// }
// if(mode === 'RESET') {
// if(pastPolyline) pastPolyline.setMap(null);
// if(pastCircle) pastCircle.setMap(null);
// if(pastPolygon) pastPolygon.setMap(null);
// }
props.handleInitCoordinates();
}
const startMode = (mode) => {
@ -200,66 +150,34 @@ export const FlightPlanDrawTest = props => {
const finishDraw = () => {
console.log('finishDraw')
removeListener();
if (polyline) {
let polypaths = polyline.getPath()._array;
if (polyline) {
if (guideline) {
guideline.setMap(null);
guideline = '';
}
if (polypaths.length >= 2) {
//꼭짓점 circle 생성
for (let index = 0; index < polypaths.length; index++) {
dragCircle.push(
new naver.maps.Circle({
strokeOpacity: 1,
strokeColor: '#000000',
fillColor: '#ffffff',
fillOpacity: 1,
center: polypaths[index],
radius: 10,
map: map,
clickable: true
})
)
let polypaths = polyline.getPath()._array;
dragCircleEve.push(naver.maps.Event.addListener(dragCircle[index], 'mousedown', function () { onMouseDownDrag(index) }))
}
setDragCircle(dragCircle);
if (polypaths.length >= 2) {
setPolyline(polyline);
setAreaInfo(polypaths);
} else {
polyline.setMap(null);
polyline = '';
}
polyline.setMap(null)
} else if (polygon) {
let path = polygon.getPath();
path.pop();
let polygonpaths = polygon.getPath()._array;
//꼭짓점 circle 생성
for (let index = 0; index < polygonpaths.length; index++) {
dragCircle.push(
new naver.maps.Circle({
strokeOpacity: 1,
strokeColor: '#000000',
fillColor: '#ffffff',
fillOpacity: 1,
center: polygonpaths[index],
radius: 10,
map: map,
clickable: true
})
)
dragCircleEve.push(naver.maps.Event.addListener(dragCircle[index], 'mousedown', function () { onMouseDownDrag(index) }))
}
setDragCircle(dragCircle);
setPolygon(polygon);
setAreaInfo(polygonpaths, '');
setAreaInfo(polygonpaths);
polygon.setMap(null)
}
}
@ -267,7 +185,7 @@ export const FlightPlanDrawTest = props => {
console.log('onClickPolyline')
var coord = e.coord;
if (!check) {
// if (!check) {
if (!polyline) {
//가이드라인
guideline = new naver.maps.Polyline({
@ -277,13 +195,14 @@ export const FlightPlanDrawTest = props => {
path: [coord],
map: map
});
// lastDistance = guideline.getDistance();
lastDistance = guideline.getDistance();
//실제 사용되는 라인
polyline = new naver.maps.Polyline({
strokeLineCap: 'round',
strokeLineJoin: 'round',
strokeColor: '#283046',
// strokeColor: '#283046',
strokeColor: '#ff0000',
strokeWeight: 3,
strokeOpacity: 1,
path: [coord],
@ -294,16 +213,16 @@ export const FlightPlanDrawTest = props => {
$(document).on('mousemove.measure', function (e) { onMouseMovePolyline(e); });
lastDistance = polyline.getDistance();
// this._addMileStone(coord, 'Start');
addMileStone(coord, 'Start')
} else {
guideline.setPath([e.coord]);
polyline.getPath().push(coord);
var distance = polyline.getDistance();
// addMileStone(coord, this._fromMetersToText(distance - this._lastDistance));
addMileStone(coord, fromMetersToText(distance - lastDistance));
lastDistance = distance;
}
}
// }
}
const onMouseMovePolyline = (e) => {
@ -359,40 +278,34 @@ export const FlightPlanDrawTest = props => {
console.log('onClickCircle')
var coord = e.coord;
if (!check) {
if (!circle) {
//가이드라인
radiusline = new naver.maps.Polyline({
// strokeStyle: [4, 4],
// strokeOpacity: 0.6,
path: [coord],
// map: map
});
lastDistance = radiusline.getDistance();
//실제 사용되는 원형
circle = new naver.maps.Circle({
strokeColor: '#283046',
strokeOpacity: 1,
fillColor: '#7367F0',
fillOpacity: 0.1,
center: coord,
radius: 100,
map: map,
clickable: true
});
if(!circle) {
radiusline = new naver.maps.Polyline({
strokeStyle: [4, 4],
strokeOpacity: 0.6,
path: [coord],
map: map
})
lastDistance = radiusline.getDistance();
Eve.mousedownEve = naver.maps.Event.addListener(circle, 'mousedown', function () { onMouseDownDrag(0); })
} else {
circle.setRadius(100);
circle.setCenter(coord);
circle = new naver.maps.Circle({
strokeColor: '#283046',
strokeOpacity: 1,
fillColor: '#7367F0',
fillOpacity: 0.1,
center: coord,
radius: 100,
// map: map,
clickable: true
})
radiusline.setPath([coord])
}
setCircle(circle);
setAreaInfo('', '');
Eve.mousedownEve = naver.maps.Event.addListener(circle, 'mousedown', function () { onMouseDownDrag(0); })
} else {
circle.setCenter(coord);
circle.setRadius(100);
}
// setCircle(circle);
setCircle(prev => ([...prev, circle]))
setAreaInfo('');
}
const onMouseDownDrag = (index) => {
@ -456,14 +369,16 @@ export const FlightPlanDrawTest = props => {
polygon.setPaths(movepath)
} else if (circle) {
var circlepath = radiusline.getPath(),
center = circle.getCenter(),
// var circlepath = radiusline.getPath(),
// center = circle.getCenter(),
// r = proj.getDistance(coord, center);
var center = circle.getCenter(),
r = proj.getDistance(coord, center);
if (circlepath.getLength() === 2) {
circlepath.pop();
}
circlepath.push(coord);
// if (circlepath.getLength() === 2) {
// circlepath.pop();
// }
// circlepath.push(coord);
circle.setRadius(r);
}
@ -486,14 +401,16 @@ export const FlightPlanDrawTest = props => {
})
if (polyline) {
bufferPolyline.setMap(null);
// bufferMove();
var path = polyline.getPath()._array;
setPolyline(polyline);
setAreaInfo(path);
props.handleBufferList();
}
if (polygon) {
var path = polygon.getPath()._array;
setPolygon(polygon);
// setAreaInfo(path, '');
setAreaInfo(path);
}
$(document).off('mousemove.measure');
@ -502,14 +419,15 @@ export const FlightPlanDrawTest = props => {
if (circle) {
// Eve.clickEve = naver.maps.Event.addListener(map, 'click', function(e) { onClickCircle(e); })
setEve(naver.maps.Event.addListener(map, 'click', function (e) { onClickCircle(e) }))
setCircle(circle);
setAreaInfo('', '');
// setCircle(circle);
setCircle(prev => ([...prev, circle]))
setAreaInfo('');
}
check = false;
}
const setAreaInfo = (path, bufferpath) => {
const setAreaInfo = (path) => {
areaInfo = {
coordinates: [],
bufferZone: 0,
@ -548,142 +466,6 @@ export const FlightPlanDrawTest = props => {
// console.log(areaInfo, 'areaInfo')
}
const bufferTest = () => {
let pol = polyline.getPath()._array; //latlng point 다 준건가?
let lineStringPaths = [];
for (let i = 0; i < pol.length; i++) {
// lineStringPaths.push(naver.maps.TransCoord.fromLatLngToEPSG3857(pol[i]))
// lineStringPaths.push(naver.maps.TransCoord.fromLatLngToNaver(pol[i]))
// lineStringPaths.push(naver.maps.TransCoord.fromLatLngToTM128(pol[i]))
// lineStringPaths.push(naver.maps.TransCoord.fromLatLngToUTMK(pol[i]))
// lineStringPaths.push(naver.maps.TransCoord.fromEPSG3857ToLatLng(naver.maps.Point(pol[i].x, pol[i].y)))
// lineStringPaths.push(naver.maps.TransCoord.fromEPSG3857ToNaver(naver.maps.Point(pol[i].x, pol[i].y)))
// lineStringPaths.push(naver.maps.TransCoord.fromEPSG3857ToTM128(naver.maps.Point(pol[i].x, pol[i].y)))
// lineStringPaths.push(naver.maps.TransCoord.fromEPSG3857ToUTMK(naver.maps.Point(pol[i].x, pol[i].y)))
lineStringPaths.push([pol[i].x, pol[i].y]);
}
// console.log(map.getProjection().getProjectionName());
// console.log(map.getProjection())
// console.log(map.getPrimitiveProjection())
// console.log(lineStringPaths)
//옆에 화면에 라이브러리 활용해서 제발 성공하자..
let bufferRadius = 100;
const wkt = 'LINESTRING (126.6061581 37.5218642, 126.6061581 37.518052)'
let coords = {
"type": "LineString",
"coordinates": lineStringPaths
};
const bufferCenter = new JSTSWKTReader().read(wkt)
const bufferResult = JSTSBufferOp.bufferOp(
bufferCenter,
bufferRadius
)
const bufferResultGeoJSON = new GeoJSONWriter().write(bufferResult)
// bufferPolyline = new naver.maps.Polyline({
// strokeColor: '#ff0000',
// strokeColor: '#283046',
// strokeWeight: 2,
// strokeStyle: [4, 4],
// strokeOpacity: 1,
// path : bufferPaths,
// // path: [
// // ],
// map: map
// });
}
const bufferMove = () => {
console.log('bufferMove')
//버퍼 생성에 필요한 coordinates 배열 변환
let pol = polyline.getPath()._array;
let lineStringPaths = [];
for (let i = 0; i < polyline.getPath().length; i++) {
lineStringPaths.push([pol[i].x, pol[i].y]);
}
console.log(lineStringPaths, 'polyline path')
// //버퍼 생성을 위한 line 객체
// const originalGeojson = {
// type: "FeatureCollection",
// features: [
// {
// type: "Feature",
// properties: {},
// geometry: {
// type: "LineString",
// coordinates: lineStringPaths
// }
// }
// ]
// };
// // console.log(originalGeojson, 'Feature type Object')
// //버퍼 객체
// const bufferObj = buffer(originalGeojson, 50, {units:'meters'});
// //버퍼 라인 생성
// let bufferPath = bufferObj.features[0].geometry.coordinates[0];
// // console.log(bufferPath, 'buffer path')
// bufferPolyline = new naver.maps.Polyline({
// // strokeColor: '#ff0000',
// strokeColor: '#283046',
// strokeWeight: 2,
// strokeStyle: [4, 4],
// strokeOpacity: 1,
// path : bufferPath,
// map: map
// });
//------------------------
let coords = {
"type": "LineString",
"coordinates": lineStringPaths
};
const reader = new GeoJSONReader();
const writer = new GeoJSONWriter();
const distance = (100 * 0.001) / 111.12; //100미터
const line = reader.read(coords);
const buffer = BufferOp.bufferOp(line, distance, 0, 3);
let bufferpath = buffer._shell._points._coordinates;
let bufferPaths = [];
for (let i = 0; i < bufferpath.length; i++) {
bufferPaths.push([bufferpath[i].x, bufferpath[i].y]);
}
console.log(bufferPaths, 'bufferPaths')
bufferPolyline = new naver.maps.Polyline({
strokeColor: '#ff0000',
strokeColor: '#283046',
strokeWeight: 2,
strokeStyle: [4, 4],
strokeOpacity: 1,
path: bufferPaths,
map: map
});
// setAreaInfo(polyline.getPath()._array, bufferPath);
setAreaInfo(polyline.getPath()._array, bufferPaths);
setPolyline(polyline);
setBuffer(bufferPolyline)
}
const onClickReset = () => {
console.log('onClickRest - ', mapControl.drawType);
if (mapControl.drawType === 'RESET') {
@ -692,8 +474,10 @@ export const FlightPlanDrawTest = props => {
}
const handleDetailDrwa = () => {
if (props.areaCoordList) {
console.log('>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>')
if (props.areaCoordList) {
const areas = props.areaCoordList[0];
const paths = [];
@ -705,6 +489,11 @@ export const FlightPlanDrawTest = props => {
});
if (areas.areaType && areas.areaType === 'LINE') {
//polyline 생성
if(pastPolyline) {
pastPolyline.setMap(null);
pastDragCircle.forEach(c => c.setMap(null));
}
polyline = new naver.maps.Polyline({
strokeLineCap: 'round',
strokeLineJoin: 'round',
@ -717,6 +506,25 @@ export const FlightPlanDrawTest = props => {
setPolyline(polyline)
//dragCircle 생성
for(let i = 0; i < paths.length; i++) {
dragCircle.push(
new naver.maps.Circle({
strokestrokeOpacity: 1,
strokeColor: '#000000',
fillColor: '#ffffff',
fillOpacity: 1,
center: paths[i],
radius: 15,
map: map,
clickable: true
})
)
dragCircleEve.push(naver.maps.Event.addListener(dragCircle[i], 'mousedown', function () { onMouseDownDrag(i) }))
}
setDragCircle(dragCircle);
if (areas.bufferCoordList) {
const bufferPaths = [];
@ -727,25 +535,31 @@ export const FlightPlanDrawTest = props => {
});
console.log('buffer test : ',areas.bufferCoordList);
if(pastPolygon) {
pastPolygon.setMap(null);
if(pastBuffer) {
pastBuffer.setMap(null);
}
polygon = new naver.maps.Polygon({
// console.log(bufferPaths)
//bufferline 생성
bufferPolygon = new naver.maps.Polyline({
strokeColor: '#283046',
strokeOpacity: 1,
fillColor: '#7367F0',
fillOpacity: 0.1,
paths: bufferPaths,
// fillColor: '#7367F0',
// fillOpacity: 0.1,
path: bufferPaths,
map: map
});
console.log(polygon);
setPolygon(polygon);
// console.log(bufferPolygon);
setBuffer(bufferPolygon);
}
}
if (areas.areaType && areas.areaType === 'POLYGON') {
//polygon 생성
if(pastPolygon) {
pastPolygon.setMap(null);
pastDragCircle.forEach(c => c.setMap(null));
}
polygon = new naver.maps.Polygon({
strokeColor: '#283046',
strokeOpacity: 1,
@ -756,12 +570,47 @@ export const FlightPlanDrawTest = props => {
});
setPolygon(polygon);
//dragCircle 생성
for(let i = 0; i < paths.length; i++) {
dragCircle.push(
new naver.maps.Circle({
strokestrokeOpacity: 1,
strokeColor: '#000000',
fillColor: '#ffffff',
fillOpacity: 1,
center: paths[i],
radius: 15,
map: map,
clickable: true
})
)
dragCircleEve.push(naver.maps.Event.addListener(dragCircle[i], 'mousedown', function () { onMouseDownDrag(i) }))
}
setDragCircle(dragCircle);
}
if (areas.areaType && areas.areaType === 'CIRCLE') {
//circle 생성
if(pastCircle) {
// pastCircle.setMap(null);
console.log(pastCircle)
pastCircle.forEach(prev => prev.setMap(null));
}
if(circle) {
circle.setMap(null);
}
// radiusline = new naver.maps.Polyline({
// strokeStyle: [4, 4],
// strokeOpacity: 0.6,
// path: [coord],
// map: map
// })
circle = new naver.maps.Circle({
strokeColor: '#283046',
strokeOpacity: 1,
// fillColor: '#ff0000',
fillColor: '#7367F0',
fillOpacity: 0.1,
center: paths[0],
@ -769,12 +618,58 @@ export const FlightPlanDrawTest = props => {
map: map,
clickable: true
});
Eve.mousedownEve = naver.maps.Event.addListener(circle, 'mousedown', function () { onMouseDownDrag(0); })
setCircle(circle);
setCircle([circle]);
}
}
}
const addMileStone = (coord, text, css) => {
if(distanceMarker) distanceMarker = [];
let content;
if(text == 'Start') {
content = '<div style="display:inline-block;padding:5px;text-align:center;background-color:#fff;border:1px solid #000;font-size:14px;color:#ff0000;"><span>'+ text +'</span></div>'
} else {
content = '<div style="display:inline-block;padding:5px;text-align:center;background-color:#fff;border:1px solid #000;color:#737373;"><span>'+ text +'</span></div>'
}
var _ms = new naver.maps.Marker({
position: coord,
icon: {
content: content,
anchor: new naver.maps.Point(-5, -5)
},
map: map
});
var msElement = $(_ms.getElement());
if(css) {
msElement.css(css);
} else {
msElement.css('font-size', '13px');
}
distanceMarker.push(_ms);
setMarker(prev => ([...prev, _ms]))
}
const fromMetersToText = (meters) => {
meters = meters || 0;
var km = 1000,
text = meters;
if(meters >= km) {
text = parseFloat((meters / km).toFixed(1)) + 'km';
} else {
text = parseFloat(meters.toFixed(1)) + 'm';
}
return text;
}
return (
<>
</>

Write Preview
Loading…
Cancel
Save