From c025fc37fd88a3fb97ecb80bd4d60226a8aeab30 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: Wed, 3 Aug 2022 17:06:51 +0900 Subject: [PATCH] =?UTF-8?q?buffer=20=ED=83=80=EC=9E=85=20=EC=B4=88?= =?UTF-8?q?=EA=B8=B0=ED=99=94?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../basis/flight/plan/FlightPlanAreaMap.js | 23 +- .../map/naver/draw/FlightPlanDraw.js | 1129 +++++++++-------- .../map/naver/draw/FlightPlanDrawTest.js | 676 ---------- .../map/naver/draw/FlightPlanDraw_JQuery.js | 652 ++++++++++ 4 files changed, 1239 insertions(+), 1241 deletions(-) delete mode 100644 src/components/map/naver/draw/FlightPlanDrawTest.js create mode 100644 src/components/map/naver/draw/FlightPlanDraw_JQuery.js diff --git a/src/components/basis/flight/plan/FlightPlanAreaMap.js b/src/components/basis/flight/plan/FlightPlanAreaMap.js index 30c14d5..2fcc370 100644 --- a/src/components/basis/flight/plan/FlightPlanAreaMap.js +++ b/src/components/basis/flight/plan/FlightPlanAreaMap.js @@ -3,17 +3,12 @@ import { Card, CardBody, Button, - Row, - Label, - Input, - Col, - 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'; +import { FlightPlanDraw } from '../../../map/naver/draw/FlightPlanDraw'; import { initFlight, initFlightBas } from '../../../../modules/basis/flight/models/basisFlightModel'; import { AREA_COORDINATE_LIST_SAVE } from '../../../../modules/basis/flight/actions/basisFlightAction'; @@ -73,23 +68,23 @@ const FlightPlanAreaMap = (props) => { dispatch(drawTypeChangeAction(val)); }; - const handleBufferList = () => { - dispatch(Actions.FLIGHT_PLAN_AREA_BUFFER_LIST.request(areaDetail)); - } + // const handleBufferList = () => { + // dispatch(Actions.FLIGHT_PLAN_AREA_BUFFER_LIST.request(areaDetail)); + // } const handleInitCoordinates = () => { const init = initFlightBas.initDetail.areaList.concat(); + console.log(init, '<<<<< { + + const handleCoordinates = (areaInfo) => { const initAreaList = initFlightBas.initDetail.areaList.concat() const coordList = []; // radius = 10; areaInfo.coordinates.forEach((c, i) => { const coord = Object.assign({}, initFlightBas['coord']); - coord.lat = c.lat; coord.lon = c.lon; @@ -125,14 +120,14 @@ const FlightPlanAreaMap = (props) => {
- {isMapLoad ? : null} { - const {naver} = props; - const {map} = props; - - - var Measure = function(buttons) { - this.$btnLine = buttons.line; - this.$btnPolygon = buttons.polygon; - this.$btnCircle = buttons.circle; - this.$btnRectangle = buttons.rectangle; - - this._mode = null; - - this._bindDOMEvents(); - }; - - $.extend( - Measure.prototype,{ - constructor: Measure, - - setMap: function(map) { - console.log('setMap') - if (this.map) { - this._unbindMap(this.map); - } - - this.map = map; - - if (map) { - this._bindMap(map); - } - }, - - startMode: function(mode) { - console.log('startMode') - if (!mode) return; - - if (mode === 'line') { - this._startDistance(); - } if (mode === 'polygon') { - this._startArea(); - } if (mode === 'circle') { - this._startCircle(); - } if (mode === 'rectangle') { - this._startRectangle(); - } - }, - - _startDistance: function() { - console.log('startDistance') - var map = this.map; - this._distanceListeners = [ - naver.maps.Event.addListener(map, 'click', this._onClickDistance.bind(this)) - ]; - }, - - _startArea: function() { - console.log('startArea') - var map = this.map; - - this._areaListeners = [ - naver.maps.Event.addListener(map, 'click', this._onClickArea.bind(this)), - naver.maps.Event.addListener(map, 'rightclick', this._finishArea.bind(this)) - ]; - - $(document).on('mousemove.measure', this._onMouseMoveArea.bind(this)); - }, - - _startCircle: function() { - console.log('startCircle') - var map = this.map; - this._circleListeners = [ - naver.maps.Event.addListener(map, 'click', this._onClickCircle.bind(this)), - naver.maps.Event.addListener(map, 'rightclick', this._finishCircle.bind(this)) - ]; - }, - - _startRectangle: function() { - console.log('startRectangle') - var map = this.map; - this._rectangleListeners = [ - naver.maps.Event.addListener(map, 'click', this._onClickRectangle.bind(this)), - naver.maps.Event.addListener(map, 'rightclick', this._finishRectangle.bind(this)) - ] - }, - - _finishDistance: function() { - console.log('finishDistance') - - naver.maps.Event.removeListener(this._distanceListeners); - delete this._distanceListeners; - - $(document).off('mousemove.measure'); - - if (this._guideline) { - this._guideline.setMap(null); - delete this._guideline; - } - - if (this._polyline) { - // console.log(this._polyline.getPath()._array, 'path') - let polypaths = this._polyline.getPath()._array; - - //파싱 - let polypathJSON = new Array(); - for(let i = 0; i< polypaths.length; i++) { + const mapControl = useSelector(state => state.controlMapReducer); - //파싱 - let obj = new Object(); + const [pastPolyline, setPolyline] = useState(); + const [pastBuffer, setBuffer] = useState(); - obj.x = '' + polypaths[i]._lng + ''; - obj.y = '' + polypaths[i]._lat + ''; + const [pastPolygon, setPolygon] = useState(); - obj = JSON.stringify(obj); - polypathJSON.push(JSON.parse(obj)); - } - console.log(polypathJSON, 'json polyline path') + // const [pastCircle, setCircle] = useState(); + const [pastCircle, setCircle] = useState([]); + const [pastClickEve, setClickEve] = useState(); + const [pastDragCircle, setDragCircle] = useState([]); - //버퍼 생성에 필요한 coordinates 배열 변환 - let lineStringPaths = []; - for(let i = 0; i < this._polyline.getPath().length; i++) { - lineStringPaths.push([this._polyline.getPath()._array[i].x, this._polyline.getPath()._array[i].y]); - } - console.log(lineStringPaths, 'polyline path') - - //버퍼 생성을 위한 line 객체 - const originalGeojson = { - type: "FeatureCollection", - features: [ - { - type: "Feature", - properties: {}, - geometry: { - type: "LineString", - coordinates: lineStringPaths - } - } - ] - }; - console.log(originalGeojson) - - //버퍼 객체 - const bufferObj = buffer(originalGeojson, 50, {units:'meters'}); - - //버퍼 라인 생성 - let bufferPath = bufferObj.features[0].geometry.coordinates[0]; - console.log(bufferPath, 'buffer path') - - this.bufferPolyline = new naver.maps.Polyline({ - strokeColor: '#ff0000', - strokeWeight: 2, - strokeStyle: [4, 4], - strokeOpacity: 0.6, - path : bufferPath, - map: map - }); + const [pastMarker, setMarker] = useState([]); - // 이거 하면 그동안 한거 싹 사라짐 -> 얘를 통해서 drawType이 바뀌면 다 날라가는 걸로 해보면 될듯 - // this._polyline.setMap(null) - delete this._polyline; + const naver = props.naver; + const map = props.map; + let mode = props.mode; - } - //onfocus()의 반대기능 = blur() - this.$btnLine.removeClass('control-on').blur(); + let areaInfo; + let lastDistance; - this._mode = null; - }, + let polyline; + let guideline; + let bufferPolygon; - _finishArea: function() { - console.log('finishArea') - naver.maps.Event.removeListener(this._areaListeners); - delete this._areaListeners; + let polygon; - $(document).off('mousemove.measure'); + let circle; + let radiusline; - if (this._polygon) { - var path = this._polygon.getPath(); - path.pop(); + let Eve = { + clickEve: '', + mousedownEve: '', + rightclickEve: '' + } - delete this._polygon; - } + let dragCircle = []; + let dragCircleEve = []; - this.$btnPolygon.removeClass('control-on').blur(); + let check; - this._mode = null; - }, + let distanceMarker = []; - _finishCircle: function() { - console.log('finishCircle') + useEffect(() => { + drawInit(); + }, [mapControl.drawType]) - naver.maps.Event.removeListener(this._circleListeners); - delete this._circleListeners; + useEffect(() => { + handleDetailDrwa(); + }, [props.areaCoordList]) - $(document).off('mousemove.measure'); + const drawInit = () => { + console.log(mapControl.drawType); + if (mapControl.drawType === 'LINE') { + onClickButton('LINE'); + } else if (mapControl.drawType === 'CIRCLE') { + onClickButton('CIRCLE'); + } else if (mapControl.drawType === 'POLYGON') { + onClickButton('POLYGON'); + } else if (mapControl.drawType === 'RESET') { + onClickReset('RESET') + } + } - if(this._guidecircle) { - this._guidecircle.setMap(null); - this._radius.setMap(null); - delete this._raidus; - delete this._guidecircle; - } - - if (this._circle) { - // this._circle.setMap(null); - delete this._circle; - } + const onClickButton = (newMode) => { + console.log('onClickButton'); - this.$btnCircle.removeClass('control-on').blur(); + clearMode(mode); - // delete this._lastDistance; - this._mode = null; - }, + if (mode === newMode) { + mode = null; + return; + } - _finishRectangle: function() { - console.log('finishRectangle') + // mode = newMode; - naver.maps.Event.removeListener(this._rectangleListeners); - delete this._rectangleListeners; + startMode(newMode); + } - $(document).off('mousemove.measure'); + const clearMode = (mode) => { + console.log('clearMode') - if(this._rectangle) { - this._guiderectangle.setMap(null); - delete this._guiderectangle; - } + // if(!mode) return; - this.$btnRectangle.removeClass('control-on').blur(); + if (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('clear circle ', pastCircle) + pastCircle.forEach(prev => prev.setMap(null)) + naver.maps.Event.removeListener(pastClickEve); - this._mode = null; - }, + // setCircle(); + setCircle([]); + } + if (pastPolygon) { + console.log('clear polygon ', pastPolygon) + pastPolygon.setMap(null); + pastDragCircle.forEach(c => c.setMap(null)); - finishMode: function(mode) { - console.log('finishMode') - if (!mode) return; + setPolygon(); + setDragCircle([]); + } + if (pastMarker) { + console.log('clear marker ', pastMarker) + pastMarker.forEach(m => m.setMap(null)); + } - if (mode === 'line') { - this._finishDistance(); - } if (mode === 'polygon') { - this._finishArea(); - } if (mode === 'circle') { - this._finishCircle(); - } if (mode === 'rectangle') { - this._finishRectangle(); - } - }, + finishDraw(); + props.handleInitCoordinates(); + } - _fromMetersToText: function(meters) { - meters = meters || 0; + const startMode = (mode) => { + console.log('startMode') - var km = 1000, - text = meters; + if (!mode) return; - if(meters >= km) { - text = parseFloat((meters / km).toFixed(1)) + 'km'; - } else { - text = parseFloat(meters.toFixed(1)) + 'm'; + if(pastClickEve) { + console.log('<>>') + naver.maps.Event.removeListener(pastClickEve); + } + if (mode === 'LINE') { + setClickEve(naver.maps.Event.addListener(map, 'click', function (e) { onClickPolyline(e) })) + } else if (mode === 'POLYGON') { + setClickEve(naver.maps.Event.addListener(map, 'click', function (e) { onClickPolygon(e) })) + } else if (mode === 'CIRCLE') { + setClickEve(naver.maps.Event.addListener(map, 'click', function (e) { onClickCircle(e) })) + } + } + + const removeListener = () => { + console.log('removeListener') + + naver.maps.Event.removeListener(Eve.clickEve); + naver.maps.Event.removeListener(Eve.mousedownEve); + naver.maps.Event.removeListener(Eve.rightclickEve); + if (!circle) $(document).off('mousemove.measure'); + naver.maps.Event.removeListener(pastClickEve); + } + + const finishDraw = () => { + console.log('finishDraw') + removeListener(); + + if (polyline) { + if (guideline) { + guideline.setMap(null); + guideline = ''; } - return text; - }, + let polypaths = polyline.getPath()._array; - _addMileStone: function(coord, text, css) { - if(!this._ms) this._ms = []; - - let content; - if(text == 'Start') { - content = '
'+ text +'
' + if (polypaths.length >= 2) { + setPolyline(polyline); + setAreaInfo(polypaths); } else { - content = '
'+ text +'
' + polyline.setMap(null); + polyline = ''; } - var ms = new naver.maps.Marker({ - position: coord, - icon: { - content: content, - anchor: new naver.maps.Point(-5, -5) - }, - map: this.map - }); + polyline.setMap(null) + } else if (polygon) { + let path = polygon.getPath(); + path.pop(); - var msElement = $(ms.getElement()); + let polygonpaths = polygon.getPath()._array; - if(css) { - msElement.css(css); - } else { - msElement.css('font-size', '13px'); - } + setPolygon(polygon); + setAreaInfo(polygonpaths); - this._ms.push(ms); - }, + polygon.setMap(null) + } + } - _onClickDistance: function(e) { - console.log('onClickDistance') - var map = this.map, - coord = e.coord; + const onClickPolyline = (e) => { + console.log('onClickPolyline') + var coord = e.coord; - if (!this._polyline) { - // 임시로 보여줄 점선 폴리라인을 생성합니다. - this._guideline = new naver.maps.Polyline({ - strokeColor: '#0000ff', - strokeWeight: 3, - strokeStyle: [4, 4], - strokeOpacity: 0.2, + // if (!check) { + if (!polyline) { + //가이드라인 + guideline = new naver.maps.Polyline({ + strokeColor: '#283046', + strokeWeight: 2, + strokeOpacity: 0.3, path: [coord], map: map }); + lastDistance = guideline.getDistance(); - // this._lastDistance = this._guideline.getDistance(); - - $(document).on('mousemove.measure', this._onMouseMoveDistance.bind(this)); - this._distanceListeners.push(naver.maps.Event.addListener(map, 'rightclick', this._finishDistance.bind(this))); - - // 실제 거리재기에 사용되는 폴리라인을 생성합니다. - this._polyline = new naver.maps.Polyline({ + //실제 사용되는 라인 + polyline = new naver.maps.Polyline({ strokeLineCap: 'round', strokeLineJoin: 'round', - strokeColor: '#0000ff', + // strokeColor: '#283046', + strokeColor: '#ff0000', strokeWeight: 3, - strokeOpacity: 0.6, + strokeOpacity: 1, path: [coord], map: map }); - this._lastDistance = this._polyline.getDistance(); - this._addMileStone(coord, 'Start'); + Eve.rightclickEve = naver.maps.Event.addListener(map, 'rightclick', function () { finishDraw() }) + $(document).on('mousemove.measure', function (e) { onMouseMovePolyline(e); }); + lastDistance = polyline.getDistance(); + addMileStone(coord, 'Start') } else { - this._guideline.setPath([e.coord]); - this._polyline.getPath().push(coord); + guideline.setPath([e.coord]); + polyline.getPath().push(coord); - var distance = this._polyline.getDistance(); - this._addMileStone(coord, this._fromMetersToText(distance - this._lastDistance)); - this._lastDistance = distance; - } - }, - - _onMouseMoveDistance: function(e) { - console.log('onMouseMoveDistance') - var map = this.map, - proj = this.map.getProjection(), - coord = proj.fromPageXYToCoord(new naver.maps.Point(e.pageX, e.pageY)), - path = this._guideline.getPath(); - - if (path.getLength() === 2) { - //맨 뒷 값 삭제 = 기존클릭좌표만 남겨둬라 = 실시간으로 좌표들어가야 하니까 - path.pop(); + var distance = polyline.getDistance(); + addMileStone(coord, fromMetersToText(distance - lastDistance)); + lastDistance = distance; } + // } + } - // [기존 클릭 좌표, 실시간 좌표] - path.push(coord); - }, - - _onClickArea: function(e) { - console.log('onClickArea') - var map = this.map, - coord = e.coord; - - if (!this._polygon) { - this._polygon = new naver.maps.Polygon({ - strokeOpacity: 0.8, - fillColor: '#0000ff', - fillOpacity: 0.1, - paths: [coord], - map: map - }); - } else { - this._polygon.getPath().push(coord); - } - }, + const onMouseMovePolyline = (e) => { + console.log('onMouseMovePolyline') + var proj = map.getProjection(), + coord = proj.fromPageXYToCoord(new naver.maps.Point(e.pageX, e.pageY)), + path = guideline.getPath(); - _onMouseMoveArea: function(e) { - console.log('onMouseMoveArea') - if (!this._polygon) return; + if (path.getLength() === 2) { + path.pop(); + } - var map = this.map, - proj = this.map.getProjection(), - coord = proj.fromPageXYToCoord(new naver.maps.Point(e.pageX, e.pageY)), - path = this._polygon.getPath(); + path.push(coord); + } + + const onClickPolygon = (e) => { + console.log('onClickPolygon') + var coord = e.coord; + + if (!polygon) { + polygon = new naver.maps.Polygon({ + strokeColor: '#283046', + strokeOpacity: 1, + fillColor: '#7367F0', + fillOpacity: 0.1, + paths: [coord], + map: map + }); - if (path.getLength() >= 2) { - path.pop(); - } + Eve.rightclickEve = naver.maps.Event.addListener(map, 'rightclick', function () { finishDraw() }) + $(document).on('mousemove.measure', function (e) { onMouseMovePolygon(e) }); + } else { + polygon.getPath().push(coord); + } + } - path.push(coord); - }, + const onMouseMovePolygon = (e) => { + console.log('onMouseMovePolygon') + if (!polygon) return; - _onClickCircle: function(e) { - console.log('onClickCircle') - var map = this.map, - coord = e.coord; + var proj = map.getProjection(), + coord = proj.fromPageXYToCoord(new naver.maps.Point(e.pageX, e.pageY)), + path = polygon.getPath(); - if(!this._circle) { + if (path.getLength() >= 2) { + path.pop(); + } - //가이드 라인 - this._radius = new naver.maps.Polyline({ - strokeStyle: [4, 4], - strokeOpacity: 0.6, - path: [coord], - map: map - }); - this._lastDistance = this._radius.getDistance(); + path.push(coord); + } + + const onClickCircle = (e) => { + console.log('onClickCircle') + var coord = e.coord; + + 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 + }) + + 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(''); + } - // 임시로 보여줄 원형 - this._guidecircle = new naver.maps.Circle({ - strokeOpacity: 0.8, - strokeStyle: [4, 4], - fillColor: '#0000ff', - fillOpacity: 0.1, - center: coord, - radius: this._lastDistance, - map: map - }); + const onMouseDownDrag = (index) => { + console.log('onMouseDownDrag') - $(document).on('mousemove.measure', this._onMouseMoveCircle.bind(this)); - this._circleListeners.push(naver.maps.Event.addListener(map, 'rightclick', this._finishCircle.bind(this))); - - // 실제 사용되는 원형 - this._circle = new naver.maps.Circle({ - strokeOpacity: 0.8, - fillColor: '#0000ff', - fillOpacity: 0.1, - center: coord, - radius: this._lastDistance, - map: map - }); + if (circle) { + naver.maps.Event.removeListener(Eve.clickEve); + } - } else { - // this._guidecircle.setCenter(e.coord); - // this._circle.setCenter(coord); - // if(this._radius.getPath().length() === 2) { - // this._radius.getPath().pop(); - // } - - // this._radius.getPath().push(coord); + map.setOptions({ + draggable: false, + pinchZoom: false, + scrollWheel: false, + keyboardShortcuts: false, + disableDoubleTapZoom: true, + disableDoubleClickZoom: true, + disableTwoFingerTapZoom: true + }) + + $(document).on('mousemove.measure', function (e) { onMouseMoveDrag(e, index) }); + $(document).on('mouseup.measure', function () { onMouseUpDrag() }); + } + + const onMouseMoveDrag = (e, index) => { + console.log('onMouseMoveDrag') + + check = true; + + var proj = map.getProjection(), + coord = proj.fromPageXYToCoord(new naver.maps.Point(e.pageX, e.pageY)); + + if (polyline) { + var polypaths = polyline.getPath()._array; + + let movepath = []; + for (let i = 0; i < polypaths.length; i++) { + let path; + if (i === index) { + path = coord; + } else { + path = polypaths[i] + } + movepath.push(path); + } - var distance = this._radius.getDistance(); - this._lastDistance = distance; - this._circle.setRadius(this._lastDistance); + polyline.setPath(movepath); + } else if (polygon) { + var polygonpaths = polygon.getPath()._array; + let movepath = []; + for (let i = 0; i < polygonpaths.length; i++) { + let path; + if (i === index) { + path = coord; + } else { + path = polygonpaths[i] + } + movepath.push(path); } - }, + polygon.setPaths(movepath) + + } else if (circle) { + // 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); + circle.setRadius(r); + } - _onMouseMoveCircle: function(e) { - console.log('onMouseMoveCircle') - if(!this._circle) return; + if (!circle) { + dragCircle[index].setCenter(coord); + } + } + + const onMouseUpDrag = () => { + console.log('onMouseUpDrag') + + map.setOptions({ + draggable: true, + pinchZoom: true, + scrollWheel: true, + keyboardShortcuts: true, + disableDoubleTapZoom: false, + disableDoubleClickZoom: false, + disableTwoFingerTapZoom: false + }) + + if (polyline) { + var path = polyline.getPath()._array; + setPolyline(polyline); + setAreaInfo(path); + // props.handleBufferList(); + } - var map = this.map, - proj = this.map.getProjection(), - coord = proj.fromPageXYToCoord(new naver.maps.Point(e.pageX, e.pageY)), - path = this._radius.getPath(), - center = this._guidecircle.getCenter(), //LatLng으로 나옴 - r = proj.getDistance(coord, center); + if (polygon) { + var path = polygon.getPath()._array; + setPolygon(polygon); + setAreaInfo(path); + } - if(path.getLength() === 2) { - path.pop(); - } - path.push(coord); - this._guidecircle.setRadius(r); - }, - - _onClickRectangle: function(e) { - console.log('onClickRectangle') - var map = this.map, - coord = e.coord; - - this.max_x = 0; - this.max_y = 0; - - - if(!this._rectangle) { - //min = 고정값 - this.fixed = coord; - this.min = [this.fixed.x, this.fixed.y]; - this.max = [this.max_x, this.max_y]; - this.boundscoord = [this.min[0], this.min[1], this.min[0], this.min[1]]; - - // 임시로 보여줄 사각형 - this._guiderectangle = new naver.maps.Rectangle({ - strokeStyle: [4, 4], - strokeOpacity: 0.6, - bounds: this.boundscoord, - map: map - }); + $(document).off('mousemove.measure'); + $(document).off('mouseup.measure'); - $(document).on('mousemove.measure', this._onMouseMoveRectangle.bind(this)); - this._rectangleListeners.push(naver.maps.Event.addListener(map, 'rightclick', this._finishRectangle.bind(this))); + if (circle) { + // Eve.clickEve = naver.maps.Event.addListener(map, 'click', function(e) { onClickCircle(e); }) + setClickEve(naver.maps.Event.addListener(map, 'click', function (e) { onClickCircle(e) })) + // setCircle(circle); + setCircle(prev => ([...prev, circle])) + setAreaInfo(''); + } - //실제 사용되는 사각형 - this._rectangle = new naver.maps.Rectangle({ - strokeOpacity: 0.8, - fillColor: '#0000ff', - fillOpacity: 0.1, - bounds: this.boundscoord, - map: map - }); + check = false; + } + + const setAreaInfo = (path) => { + areaInfo = { + coordinates: [], + bufferZone: 0, + }; + + let prePath = []; + if (path) { + path.forEach((item) => { + const p = { + lat: item.y, + lon: item.x + } - } else { - this.max = [coord.x, coord.y]; - this.boundscoord = [this.min[0], this.min[1], this.max[0], this.max[1]]; - this._rectangle.setBounds(this.boundscoord); - } - }, - - _onMouseMoveRectangle: function(e) { - console.log('onMouseMoveRectangle') - if(!this._rectangle) return; - - var map = this.map, - proj = this.map.getProjection(), - coord = proj.fromPageXYToCoord(new naver.maps.Point(e.pageX, e.pageY)), - bounds = this._guiderectangle.getBounds(), - max = [coord.x, coord.y]; - - this.boundscoord = [this.min[0], this.min[1],max[0], max[1]]; - this._guiderectangle.setBounds(this.boundscoord); - }, - - _bindMap: function(map) { - console.log('bindMap') - }, - - _unbindMap: function() { - console.log('unbindMap') - this.unbindAll(); - }, - - _bindDOMEvents: function() { - console.log('bindDOMEvents') - this.$btnLine.on('click.measure', this._onClickButton.bind(this, 'line')); - this.$btnPolygon.on('click.measure', this._onClickButton.bind(this, 'polygon')); - this.$btnCircle.on('click.measure', this._onClickButton.bind(this, 'circle')); - this.$btnRectangle.on('click.measure', this._onClickButton.bind(this, 'rectangle')); - - }, - - _onClickButton: function(newMode, e) { - //newMode는 방금 클릭한 값(line, polygon, circle...) - console.log('onClickButton') - e.preventDefault(); - - var btn = $(e.target), - map = this.map, - mode = this._mode; - //this._mode는 클릭하기 전 값(첫 클릭이면 null) - - if (btn.hasClass('control-on')) { - console.log('remove') - btn.removeClass('control-on'); - } else { - console.log('add') - btn.addClass('control-on'); + prePath.push(p); + }) + // path.forEach(prev=> prePath.push([prev.x, prev.y])) + } + + if (polyline) { + areaInfo.coordinates = prePath; + areaInfo.areaType = 'LINE'; + } else if (polygon) { + areaInfo.coordinates = prePath; + areaInfo.areaType = 'POLYGON'; + } else if (circle) { + const point = { + lat: circle.getCenter().y, + lon: circle.getCenter().x } - this._clearMode(mode); + areaInfo.coordinates.push(point); + areaInfo.bufferZone = circle.getRadius(); + areaInfo.areaType = 'CIRCLE'; + } + console.log(areaInfo, 'areaInfo') + props.handleCoordinates(areaInfo); + } + + const onClickReset = () => { + console.log('onClickRest - ', mapControl.drawType); + if (mapControl.drawType === 'RESET') { + clearMode('RESET'); + } + } + + const handleDetailDrwa = () => { + if (props.areaCoordList) { + console.log('>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>') - if (mode === newMode) { - this._mode = null; - return; - } + const areas = props.areaCoordList[0]; - this._mode = newMode; + const paths = []; - this.startMode(newMode); - }, + areas.coordList.forEach((coord) => { + const path = new naver.maps.LatLng(coord.lat, coord.lon) - _clearMode: function(mode) { - console.log('clearMode') - if (!mode) return; + paths.push(path); + }); - if (mode === 'line') { - if (this._polyline) { - this._polyline.setMap(null); - delete this._polyline; + 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', + strokeColor: '#283046', + strokeWeight: 3, + strokeOpacity: 1, + path: paths, + map: map + }); - this._finishDistance(); - } else if (mode === 'polygon') { - if (this._polygon) { - this._polygon.setMap(null); - delete this._polygon; + 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) })) } - this._finishArea(); - } else if (mode === 'circle') { - if (this._circle) { - this._circle.setMap(null); - delete this._circle; + setDragCircle(dragCircle); + + if (areas.bufferCoordList) { + const bufferPaths = []; + + areas.bufferCoordList.forEach((bfCoord) => { + const path = new naver.maps.LatLng(bfCoord.lat, bfCoord.lon); + + bufferPaths.push(path); + }); + console.log('buffer test : ',areas.bufferCoordList); + + if(pastBuffer) { + pastBuffer.setMap(null); + } + + // console.log(bufferPaths) + //bufferline 생성 + bufferPolygon = new naver.maps.Polyline({ + strokeColor: '#283046', + strokeOpacity: 1, + // fillColor: '#7367F0', + // fillOpacity: 0.1, + path: bufferPaths, + map: map + }); + // console.log(bufferPolygon); + setBuffer(bufferPolygon); } + } - this._finishCircle(); - } else if (mode === 'rectangle') { - if(this._rectangle) { - this._rectangle.setMap(null); - delete this._rectangle; + 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, + fillColor: '#7367F0', + fillOpacity: 0.1, + paths: paths, + map: map + }); + + 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); } - } - }); - // id랑 매치시켜서 옵션 지정함 - var measures = new Measure({ - line: $('#line'), - polygon: $('#polygon'), - circle: $('#circle'), - rectangle: $('#rectangle') - }); + 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], + radius: areas.bufferZone, + map: map, + clickable: true + }); + Eve.mousedownEve = naver.maps.Event.addListener(circle, 'mousedown', function () { onMouseDownDrag(0); }) - measures.setMap(map); + 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( + return ( <> -
-
    -
  • - - - - -
    • -
-
- ) -} \ No newline at end of file + ); +}; \ No newline at end of file diff --git a/src/components/map/naver/draw/FlightPlanDrawTest.js b/src/components/map/naver/draw/FlightPlanDrawTest.js deleted file mode 100644 index da4df93..0000000 --- a/src/components/map/naver/draw/FlightPlanDrawTest.js +++ /dev/null @@ -1,676 +0,0 @@ -import $ from 'jquery'; -import { useEffect, useState } from 'react'; -import { useDispatch, useSelector } from 'react-redux'; - -export const FlightPlanDrawTest = props => { - const mapControl = useSelector(state => state.controlMapReducer); - - const [pastPolyline, setPolyline] = useState(); - const [pastBuffer, setBuffer] = useState(); - - const [pastPolygon, setPolygon] = 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; - let mode = props.mode; - - let areaInfo; - let lastDistance; - - let polyline; - let guideline; - let bufferPolygon; - - let polygon; - - let circle; - let radiusline; - - let Eve = { - clickEve: '', - mousedownEve: '', - rightclickEve: '' - } - - let dragCircle = []; - let dragCircleEve = []; - - let check; - - let distanceMarker = []; - - useEffect(() => { - drawInit(); - }, [mapControl.drawType]) - - useEffect(() => { - handleDetailDrwa(); - }, [props.areaCoordList]) - - const drawInit = () => { - console.log(mapControl.drawType); - if (mapControl.drawType === 'LINE') { - onClickButton('LINE'); - } else if (mapControl.drawType === 'CIRCLE') { - onClickButton('CIRCLE'); - } else if (mapControl.drawType === 'POLYGON') { - onClickButton('POLYGON'); - } else if (mapControl.drawType === 'RESET') { - onClickReset('RESET') - } - } - - const onClickButton = (newMode) => { - console.log('onClickButton'); - - clearMode(mode); - - if (mode === newMode) { - mode = null; - return; - } - - // mode = newMode; - - startMode(newMode); - } - - const clearMode = (mode) => { - console.log('clearMode') - - // if(!mode) return; - - if (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('clear circle ', pastCircle) - pastCircle.forEach(prev => prev.setMap(null)) - naver.maps.Event.removeListener(pastEve); - - // setCircle(); - setCircle([]); - } - if (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(); - } - - const startMode = (mode) => { - console.log('startMode') - - if (!mode) return; - - if (mode === 'LINE') { - Eve.clickEve = naver.maps.Event.addListener(map, 'click', function (e) { onClickPolyline(e) }); - } else if (mode === 'POLYGON') { - Eve.clickEve = naver.maps.Event.addListener(map, 'click', function (e) { onClickPolygon(e) }); - } else if (mode === 'CIRCLE') { - setEve(naver.maps.Event.addListener(map, 'click', function (e) { onClickCircle(e) })) - } - } - - const removeListener = () => { - console.log('removeListener') - - naver.maps.Event.removeListener(Eve.clickEve); - naver.maps.Event.removeListener(Eve.mousedownEve); - naver.maps.Event.removeListener(Eve.rightclickEve); - if (!circle) $(document).off('mousemove.measure'); - // if(pastCircle) naver.maps.Event.removeListener(pastEve); - naver.maps.Event.removeListener(pastEve); - } - - const finishDraw = () => { - console.log('finishDraw') - removeListener(); - - if (polyline) { - if (guideline) { - guideline.setMap(null); - guideline = ''; - } - - let polypaths = polyline.getPath()._array; - - 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; - - setPolygon(polygon); - setAreaInfo(polygonpaths); - - polygon.setMap(null) - } - } - - const onClickPolyline = (e) => { - console.log('onClickPolyline') - var coord = e.coord; - - // if (!check) { - if (!polyline) { - //가이드라인 - guideline = new naver.maps.Polyline({ - strokeColor: '#283046', - strokeWeight: 2, - strokeOpacity: 0.3, - path: [coord], - map: map - }); - lastDistance = guideline.getDistance(); - - //실제 사용되는 라인 - polyline = new naver.maps.Polyline({ - strokeLineCap: 'round', - strokeLineJoin: 'round', - // strokeColor: '#283046', - strokeColor: '#ff0000', - strokeWeight: 3, - strokeOpacity: 1, - path: [coord], - map: map - }); - - Eve.rightclickEve = naver.maps.Event.addListener(map, 'rightclick', function () { finishDraw() }) - $(document).on('mousemove.measure', function (e) { onMouseMovePolyline(e); }); - - lastDistance = polyline.getDistance(); - addMileStone(coord, 'Start') - } else { - guideline.setPath([e.coord]); - polyline.getPath().push(coord); - - var distance = polyline.getDistance(); - addMileStone(coord, fromMetersToText(distance - lastDistance)); - lastDistance = distance; - } - // } - } - - const onMouseMovePolyline = (e) => { - console.log('onMouseMovePolyline') - var proj = map.getProjection(), - coord = proj.fromPageXYToCoord(new naver.maps.Point(e.pageX, e.pageY)), - path = guideline.getPath(); - - if (path.getLength() === 2) { - path.pop(); - } - - path.push(coord); - } - - const onClickPolygon = (e) => { - console.log('onClickPolygon') - var coord = e.coord; - - if (!polygon) { - polygon = new naver.maps.Polygon({ - strokeColor: '#283046', - strokeOpacity: 1, - fillColor: '#7367F0', - fillOpacity: 0.1, - paths: [coord], - map: map - }); - - Eve.rightclickEve = naver.maps.Event.addListener(map, 'rightclick', function () { finishDraw() }) - $(document).on('mousemove.measure', function (e) { onMouseMovePolygon(e) }); - } else { - polygon.getPath().push(coord); - } - } - - const onMouseMovePolygon = (e) => { - console.log('onMouseMovePolygon') - if (!polygon) return; - - var proj = map.getProjection(), - coord = proj.fromPageXYToCoord(new naver.maps.Point(e.pageX, e.pageY)), - path = polygon.getPath(); - - if (path.getLength() >= 2) { - path.pop(); - } - - path.push(coord); - } - - const onClickCircle = (e) => { - console.log('onClickCircle') - var coord = e.coord; - - 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 - }) - - 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) => { - console.log('onMouseDownDrag') - - if (circle) { - naver.maps.Event.removeListener(Eve.clickEve); - } - - map.setOptions({ - draggable: false, - pinchZoom: false, - scrollWheel: false, - keyboardShortcuts: false, - disableDoubleTapZoom: true, - disableDoubleClickZoom: true, - disableTwoFingerTapZoom: true - }) - - $(document).on('mousemove.measure', function (e) { onMouseMoveDrag(e, index) }); - $(document).on('mouseup.measure', function () { onMouseUpDrag() }); - } - - const onMouseMoveDrag = (e, index) => { - console.log('onMouseMoveDrag') - - check = true; - - var proj = map.getProjection(), - coord = proj.fromPageXYToCoord(new naver.maps.Point(e.pageX, e.pageY)); - - if (polyline) { - var polypaths = polyline.getPath()._array; - - let movepath = []; - for (let i = 0; i < polypaths.length; i++) { - let path; - if (i === index) { - path = coord; - } else { - path = polypaths[i] - } - movepath.push(path); - } - - polyline.setPath(movepath); - - } else if (polygon) { - var polygonpaths = polygon.getPath()._array; - - let movepath = []; - for (let i = 0; i < polygonpaths.length; i++) { - let path; - if (i === index) { - path = coord; - } else { - path = polygonpaths[i] - } - movepath.push(path); - } - polygon.setPaths(movepath) - - } else if (circle) { - // 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); - circle.setRadius(r); - } - - if (!circle) { - dragCircle[index].setCenter(coord); - } - } - - const onMouseUpDrag = () => { - console.log('onMouseUpDrag') - - map.setOptions({ - draggable: true, - pinchZoom: true, - scrollWheel: true, - keyboardShortcuts: true, - disableDoubleTapZoom: false, - disableDoubleClickZoom: false, - disableTwoFingerTapZoom: false - }) - - if (polyline) { - var path = polyline.getPath()._array; - setPolyline(polyline); - setAreaInfo(path); - props.handleBufferList(); - } - - if (polygon) { - var path = polygon.getPath()._array; - setPolygon(polygon); - setAreaInfo(path); - } - - $(document).off('mousemove.measure'); - $(document).off('mouseup.measure'); - - 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); - setCircle(prev => ([...prev, circle])) - setAreaInfo(''); - } - - check = false; - } - - const setAreaInfo = (path) => { - areaInfo = { - coordinates: [], - bufferZone: 0, - }; - - let prePath = []; - if (path) { - path.forEach((item) => { - const p = { - lat: item.y, - lon: item.x - } - - prePath.push(p); - }) - // path.forEach(prev=> prePath.push([prev.x, prev.y])) - } - - if (polyline) { - areaInfo.coordinates = prePath; - areaInfo.areaType = 'LINE'; - } else if (polygon) { - areaInfo.coordinates = prePath; - areaInfo.areaType = 'POLYGON'; - } else if (circle) { - const point = { - lat: circle.getCenter().y, - lon: circle.getCenter().x - } - - areaInfo.coordinates.push(point); - areaInfo.bufferZone = circle.getRadius(); - areaInfo.areaType = 'CIRCLE'; - } - props.handleCoordinates(areaInfo); - // console.log(areaInfo, 'areaInfo') - } - - const onClickReset = () => { - console.log('onClickRest - ', mapControl.drawType); - if (mapControl.drawType === 'RESET') { - clearMode('RESET'); - } - } - - const handleDetailDrwa = () => { - if (props.areaCoordList) { - console.log('>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>') - - const areas = props.areaCoordList[0]; - - const paths = []; - - areas.coordList.forEach((coord) => { - const path = new naver.maps.LatLng(coord.lat, coord.lon) - - paths.push(path); - }); - - 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', - strokeColor: '#283046', - strokeWeight: 3, - strokeOpacity: 1, - path: paths, - map: map - }); - - 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 = []; - - areas.bufferCoordList.forEach((bfCoord) => { - const path = new naver.maps.LatLng(bfCoord.lat, bfCoord.lon); - - bufferPaths.push(path); - }); - console.log('buffer test : ',areas.bufferCoordList); - - if(pastBuffer) { - pastBuffer.setMap(null); - } - - // console.log(bufferPaths) - //bufferline 생성 - bufferPolygon = new naver.maps.Polyline({ - strokeColor: '#283046', - strokeOpacity: 1, - // fillColor: '#7367F0', - // fillOpacity: 0.1, - path: bufferPaths, - map: map - }); - // 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, - fillColor: '#7367F0', - fillOpacity: 0.1, - paths: paths, - map: map - }); - - 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], - radius: areas.bufferZone, - map: map, - clickable: true - }); - Eve.mousedownEve = naver.maps.Event.addListener(circle, 'mousedown', function () { onMouseDownDrag(0); }) - - 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 ( - <> - - ); -}; \ No newline at end of file diff --git a/src/components/map/naver/draw/FlightPlanDraw_JQuery.js b/src/components/map/naver/draw/FlightPlanDraw_JQuery.js new file mode 100644 index 0000000..e193de5 --- /dev/null +++ b/src/components/map/naver/draw/FlightPlanDraw_JQuery.js @@ -0,0 +1,652 @@ +import $ from 'jquery'; +import '../../../../assets/css/custom.css'; +import { CustomInput } from 'reactstrap'; + +import buffer from '@turf/buffer' + +export const FlightPlanDraw = props => { + const {naver} = props; + const {map} = props; + + + var Measure = function(buttons) { + this.$btnLine = buttons.line; + this.$btnPolygon = buttons.polygon; + this.$btnCircle = buttons.circle; + this.$btnRectangle = buttons.rectangle; + + this._mode = null; + + this._bindDOMEvents(); + }; + + $.extend( + Measure.prototype,{ + constructor: Measure, + + setMap: function(map) { + console.log('setMap') + if (this.map) { + this._unbindMap(this.map); + } + + this.map = map; + + if (map) { + this._bindMap(map); + } + }, + + startMode: function(mode) { + console.log('startMode') + if (!mode) return; + + if (mode === 'line') { + this._startDistance(); + } if (mode === 'polygon') { + this._startArea(); + } if (mode === 'circle') { + this._startCircle(); + } if (mode === 'rectangle') { + this._startRectangle(); + } + }, + + _startDistance: function() { + console.log('startDistance') + var map = this.map; + this._distanceListeners = [ + naver.maps.Event.addListener(map, 'click', this._onClickDistance.bind(this)) + ]; + }, + + _startArea: function() { + console.log('startArea') + var map = this.map; + + this._areaListeners = [ + naver.maps.Event.addListener(map, 'click', this._onClickArea.bind(this)), + naver.maps.Event.addListener(map, 'rightclick', this._finishArea.bind(this)) + ]; + + $(document).on('mousemove.measure', this._onMouseMoveArea.bind(this)); + }, + + _startCircle: function() { + console.log('startCircle') + var map = this.map; + this._circleListeners = [ + naver.maps.Event.addListener(map, 'click', this._onClickCircle.bind(this)), + naver.maps.Event.addListener(map, 'rightclick', this._finishCircle.bind(this)) + ]; + }, + + _startRectangle: function() { + console.log('startRectangle') + var map = this.map; + this._rectangleListeners = [ + naver.maps.Event.addListener(map, 'click', this._onClickRectangle.bind(this)), + naver.maps.Event.addListener(map, 'rightclick', this._finishRectangle.bind(this)) + ] + }, + + _finishDistance: function() { + console.log('finishDistance') + + naver.maps.Event.removeListener(this._distanceListeners); + delete this._distanceListeners; + + $(document).off('mousemove.measure'); + + if (this._guideline) { + this._guideline.setMap(null); + delete this._guideline; + } + + if (this._polyline) { + // console.log(this._polyline.getPath()._array, 'path') + let polypaths = this._polyline.getPath()._array; + + //파싱 + let polypathJSON = new Array(); + for(let i = 0; i< polypaths.length; i++) { + + //파싱 + let obj = new Object(); + + obj.x = '' + polypaths[i]._lng + ''; + obj.y = '' + polypaths[i]._lat + ''; + + obj = JSON.stringify(obj); + polypathJSON.push(JSON.parse(obj)); + } + console.log(polypathJSON, 'json polyline path') + + + //버퍼 생성에 필요한 coordinates 배열 변환 + let lineStringPaths = []; + for(let i = 0; i < this._polyline.getPath().length; i++) { + lineStringPaths.push([this._polyline.getPath()._array[i].x, this._polyline.getPath()._array[i].y]); + } + console.log(lineStringPaths, 'polyline path') + + //버퍼 생성을 위한 line 객체 + const originalGeojson = { + type: "FeatureCollection", + features: [ + { + type: "Feature", + properties: {}, + geometry: { + type: "LineString", + coordinates: lineStringPaths + } + } + ] + }; + console.log(originalGeojson) + + //버퍼 객체 + const bufferObj = buffer(originalGeojson, 50, {units:'meters'}); + + //버퍼 라인 생성 + let bufferPath = bufferObj.features[0].geometry.coordinates[0]; + console.log(bufferPath, 'buffer path') + + this.bufferPolyline = new naver.maps.Polyline({ + strokeColor: '#ff0000', + strokeWeight: 2, + strokeStyle: [4, 4], + strokeOpacity: 0.6, + path : bufferPath, + map: map + }); + + // 이거 하면 그동안 한거 싹 사라짐 -> 얘를 통해서 drawType이 바뀌면 다 날라가는 걸로 해보면 될듯 + // this._polyline.setMap(null) + delete this._polyline; + + } + //onfocus()의 반대기능 = blur() + this.$btnLine.removeClass('control-on').blur(); + + this._mode = null; + }, + + _finishArea: function() { + console.log('finishArea') + naver.maps.Event.removeListener(this._areaListeners); + delete this._areaListeners; + + $(document).off('mousemove.measure'); + + if (this._polygon) { + var path = this._polygon.getPath(); + path.pop(); + + delete this._polygon; + } + + this.$btnPolygon.removeClass('control-on').blur(); + + this._mode = null; + }, + + _finishCircle: function() { + console.log('finishCircle') + + naver.maps.Event.removeListener(this._circleListeners); + delete this._circleListeners; + + $(document).off('mousemove.measure'); + + if(this._guidecircle) { + this._guidecircle.setMap(null); + this._radius.setMap(null); + delete this._raidus; + delete this._guidecircle; + } + + if (this._circle) { + // this._circle.setMap(null); + delete this._circle; + } + + this.$btnCircle.removeClass('control-on').blur(); + + // delete this._lastDistance; + this._mode = null; + }, + + _finishRectangle: function() { + console.log('finishRectangle') + + naver.maps.Event.removeListener(this._rectangleListeners); + delete this._rectangleListeners; + + $(document).off('mousemove.measure'); + + if(this._rectangle) { + this._guiderectangle.setMap(null); + delete this._guiderectangle; + } + + this.$btnRectangle.removeClass('control-on').blur(); + + this._mode = null; + }, + + finishMode: function(mode) { + console.log('finishMode') + if (!mode) return; + + if (mode === 'line') { + this._finishDistance(); + } if (mode === 'polygon') { + this._finishArea(); + } if (mode === 'circle') { + this._finishCircle(); + } if (mode === 'rectangle') { + this._finishRectangle(); + } + }, + + _fromMetersToText: function(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; + }, + + _addMileStone: function(coord, text, css) { + if(!this._ms) this._ms = []; + + 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: this.map + }); + + var msElement = $(ms.getElement()); + + if(css) { + msElement.css(css); + } else { + msElement.css('font-size', '13px'); + } + + this._ms.push(ms); + }, + + _onClickDistance: function(e) { + console.log('onClickDistance') + var map = this.map, + coord = e.coord; + + if (!this._polyline) { + // 임시로 보여줄 점선 폴리라인을 생성합니다. + this._guideline = new naver.maps.Polyline({ + strokeColor: '#0000ff', + strokeWeight: 3, + strokeStyle: [4, 4], + strokeOpacity: 0.2, + path: [coord], + map: map + }); + + // this._lastDistance = this._guideline.getDistance(); + + $(document).on('mousemove.measure', this._onMouseMoveDistance.bind(this)); + this._distanceListeners.push(naver.maps.Event.addListener(map, 'rightclick', this._finishDistance.bind(this))); + + // 실제 거리재기에 사용되는 폴리라인을 생성합니다. + this._polyline = new naver.maps.Polyline({ + strokeLineCap: 'round', + strokeLineJoin: 'round', + strokeColor: '#0000ff', + strokeWeight: 3, + strokeOpacity: 0.6, + path: [coord], + map: map + }); + + this._lastDistance = this._polyline.getDistance(); + this._addMileStone(coord, 'Start'); + + } else { + this._guideline.setPath([e.coord]); + this._polyline.getPath().push(coord); + + var distance = this._polyline.getDistance(); + this._addMileStone(coord, this._fromMetersToText(distance - this._lastDistance)); + this._lastDistance = distance; + } + }, + + _onMouseMoveDistance: function(e) { + console.log('onMouseMoveDistance') + var map = this.map, + proj = this.map.getProjection(), + coord = proj.fromPageXYToCoord(new naver.maps.Point(e.pageX, e.pageY)), + path = this._guideline.getPath(); + + if (path.getLength() === 2) { + //맨 뒷 값 삭제 = 기존클릭좌표만 남겨둬라 = 실시간으로 좌표들어가야 하니까 + path.pop(); + } + + // [기존 클릭 좌표, 실시간 좌표] + path.push(coord); + }, + + _onClickArea: function(e) { + console.log('onClickArea') + var map = this.map, + coord = e.coord; + + if (!this._polygon) { + this._polygon = new naver.maps.Polygon({ + strokeOpacity: 0.8, + fillColor: '#0000ff', + fillOpacity: 0.1, + paths: [coord], + map: map + }); + } else { + this._polygon.getPath().push(coord); + } + }, + + _onMouseMoveArea: function(e) { + console.log('onMouseMoveArea') + if (!this._polygon) return; + + var map = this.map, + proj = this.map.getProjection(), + coord = proj.fromPageXYToCoord(new naver.maps.Point(e.pageX, e.pageY)), + path = this._polygon.getPath(); + + if (path.getLength() >= 2) { + path.pop(); + } + + path.push(coord); + }, + + _onClickCircle: function(e) { + console.log('onClickCircle') + var map = this.map, + coord = e.coord; + + if(!this._circle) { + + //가이드 라인 + this._radius = new naver.maps.Polyline({ + strokeStyle: [4, 4], + strokeOpacity: 0.6, + path: [coord], + map: map + }); + this._lastDistance = this._radius.getDistance(); + + // 임시로 보여줄 원형 + this._guidecircle = new naver.maps.Circle({ + strokeOpacity: 0.8, + strokeStyle: [4, 4], + fillColor: '#0000ff', + fillOpacity: 0.1, + center: coord, + radius: this._lastDistance, + map: map + }); + + $(document).on('mousemove.measure', this._onMouseMoveCircle.bind(this)); + this._circleListeners.push(naver.maps.Event.addListener(map, 'rightclick', this._finishCircle.bind(this))); + + // 실제 사용되는 원형 + this._circle = new naver.maps.Circle({ + strokeOpacity: 0.8, + fillColor: '#0000ff', + fillOpacity: 0.1, + center: coord, + radius: this._lastDistance, + map: map + }); + + } else { + // this._guidecircle.setCenter(e.coord); + // this._circle.setCenter(coord); + // if(this._radius.getPath().length() === 2) { + // this._radius.getPath().pop(); + // } + + // this._radius.getPath().push(coord); + + var distance = this._radius.getDistance(); + this._lastDistance = distance; + this._circle.setRadius(this._lastDistance); + + + } + }, + + _onMouseMoveCircle: function(e) { + console.log('onMouseMoveCircle') + if(!this._circle) return; + + var map = this.map, + proj = this.map.getProjection(), + coord = proj.fromPageXYToCoord(new naver.maps.Point(e.pageX, e.pageY)), + path = this._radius.getPath(), + center = this._guidecircle.getCenter(), //LatLng으로 나옴 + r = proj.getDistance(coord, center); + + if(path.getLength() === 2) { + path.pop(); + } + path.push(coord); + this._guidecircle.setRadius(r); + }, + + _onClickRectangle: function(e) { + console.log('onClickRectangle') + var map = this.map, + coord = e.coord; + + this.max_x = 0; + this.max_y = 0; + + + if(!this._rectangle) { + //min = 고정값 + this.fixed = coord; + this.min = [this.fixed.x, this.fixed.y]; + this.max = [this.max_x, this.max_y]; + this.boundscoord = [this.min[0], this.min[1], this.min[0], this.min[1]]; + + // 임시로 보여줄 사각형 + this._guiderectangle = new naver.maps.Rectangle({ + strokeStyle: [4, 4], + strokeOpacity: 0.6, + bounds: this.boundscoord, + map: map + }); + + $(document).on('mousemove.measure', this._onMouseMoveRectangle.bind(this)); + this._rectangleListeners.push(naver.maps.Event.addListener(map, 'rightclick', this._finishRectangle.bind(this))); + + //실제 사용되는 사각형 + this._rectangle = new naver.maps.Rectangle({ + strokeOpacity: 0.8, + fillColor: '#0000ff', + fillOpacity: 0.1, + bounds: this.boundscoord, + map: map + }); + + } else { + this.max = [coord.x, coord.y]; + this.boundscoord = [this.min[0], this.min[1], this.max[0], this.max[1]]; + this._rectangle.setBounds(this.boundscoord); + } + }, + + _onMouseMoveRectangle: function(e) { + console.log('onMouseMoveRectangle') + if(!this._rectangle) return; + + var map = this.map, + proj = this.map.getProjection(), + coord = proj.fromPageXYToCoord(new naver.maps.Point(e.pageX, e.pageY)), + bounds = this._guiderectangle.getBounds(), + max = [coord.x, coord.y]; + + this.boundscoord = [this.min[0], this.min[1],max[0], max[1]]; + this._guiderectangle.setBounds(this.boundscoord); + }, + + _bindMap: function(map) { + console.log('bindMap') + }, + + _unbindMap: function() { + console.log('unbindMap') + this.unbindAll(); + }, + + _bindDOMEvents: function() { + console.log('bindDOMEvents') + this.$btnLine.on('click.measure', this._onClickButton.bind(this, 'line')); + this.$btnPolygon.on('click.measure', this._onClickButton.bind(this, 'polygon')); + this.$btnCircle.on('click.measure', this._onClickButton.bind(this, 'circle')); + this.$btnRectangle.on('click.measure', this._onClickButton.bind(this, 'rectangle')); + + }, + + _onClickButton: function(newMode, e) { + //newMode는 방금 클릭한 값(line, polygon, circle...) + console.log('onClickButton') + e.preventDefault(); + + var btn = $(e.target), + map = this.map, + mode = this._mode; + //this._mode는 클릭하기 전 값(첫 클릭이면 null) + + if (btn.hasClass('control-on')) { + console.log('remove') + btn.removeClass('control-on'); + } else { + console.log('add') + btn.addClass('control-on'); + } + + this._clearMode(mode); + + if (mode === newMode) { + this._mode = null; + return; + } + + this._mode = newMode; + + this.startMode(newMode); + }, + + _clearMode: function(mode) { + console.log('clearMode') + if (!mode) return; + + if (mode === 'line') { + if (this._polyline) { + this._polyline.setMap(null); + delete this._polyline; + } + + this._finishDistance(); + } else if (mode === 'polygon') { + if (this._polygon) { + this._polygon.setMap(null); + delete this._polygon; + } + + this._finishArea(); + } else if (mode === 'circle') { + if (this._circle) { + this._circle.setMap(null); + delete this._circle; + } + + this._finishCircle(); + } else if (mode === 'rectangle') { + if(this._rectangle) { + this._rectangle.setMap(null); + delete this._rectangle; + } + } + } + }); + + // id랑 매치시켜서 옵션 지정함 + var measures = new Measure({ + line: $('#line'), + polygon: $('#polygon'), + circle: $('#circle'), + rectangle: $('#rectangle') + }); + + measures.setMap(map); + + return( + <> +
+
    +
  • + + + + +
    • +
+
+ + ) +} \ No newline at end of file