From 271e567280d82846499c6a78aebe162aa2ff3888 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?junh=5Feee=28=EC=9D=B4=EC=A4=80=ED=9D=AC=29?= Date: Tue, 2 Aug 2022 12:06:29 +0900 Subject: [PATCH] =?UTF-8?q?=EB=B9=84=ED=96=89=EA=B3=84=ED=9A=8D=EC=84=9C?= =?UTF-8?q?=20buffer=20=EC=9E=91=EC=97=85?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../flight/plan/FlightPlanAreaDetailForm.js | 5 - .../basis/flight/plan/FlightPlanAreaMap.js | 25 +- .../map/naver/draw/FlightPlanDrawTest.js | 507 +++++++----------- 3 files changed, 212 insertions(+), 325 deletions(-) diff --git a/src/components/basis/flight/plan/FlightPlanAreaDetailForm.js b/src/components/basis/flight/plan/FlightPlanAreaDetailForm.js index 0d72e22..64d466e 100644 --- a/src/components/basis/flight/plan/FlightPlanAreaDetailForm.js +++ b/src/components/basis/flight/plan/FlightPlanAreaDetailForm.js @@ -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 }) => { diff --git a/src/components/basis/flight/plan/FlightPlanAreaMap.js b/src/components/basis/flight/plan/FlightPlanAreaMap.js index 11ccd96..30c14d5 100644 --- a/src/components/basis/flight/plan/FlightPlanAreaMap.js +++ b/src/components/basis/flight/plan/FlightPlanAreaMap.js @@ -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} { > 초기화 - {/* - 적용 - */} - diff --git a/src/components/map/naver/draw/FlightPlanDrawTest.js b/src/components/map/naver/draw/FlightPlanDrawTest.js index 5a48971..6a59029 100644 --- a/src/components/map/naver/draw/FlightPlanDrawTest.js +++ b/src/components/map/naver/draw/FlightPlanDrawTest.js @@ -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 = '
'+ text +'
' + } else { + content = '
'+ text +'
' + } + + 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 ( <>