|
|
|
@ -6,8 +6,8 @@ import { drawTypeChangeAction } from '../../../../modules/control/map/actions/co
|
|
|
|
|
|
|
|
|
|
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 { 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'; |
|
|
|
@ -63,15 +63,15 @@ export const FlightPlanDrawTest = props => {
|
|
|
|
|
|
|
|
|
|
useEffect(() => { |
|
|
|
|
handleDetailDrwa(); |
|
|
|
|
}, []) |
|
|
|
|
}, [props.areaCoordList]) |
|
|
|
|
|
|
|
|
|
const zoomChange = () => { |
|
|
|
|
let change; |
|
|
|
|
if(change) { |
|
|
|
|
if (change) { |
|
|
|
|
naver.maps.Event.removeListener(change); |
|
|
|
|
} else { |
|
|
|
|
change = naver.maps.Event.addListener(map, 'zoom_changed', function() { |
|
|
|
|
if(dragCircle) { |
|
|
|
|
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));
|
|
|
|
|
} |
|
|
|
@ -81,13 +81,13 @@ export const FlightPlanDrawTest = props => {
|
|
|
|
|
|
|
|
|
|
const drawInit = () => { |
|
|
|
|
console.log(mapControl.drawType); |
|
|
|
|
if(mapControl.drawType==='LINE') { |
|
|
|
|
if (mapControl.drawType === 'LINE') { |
|
|
|
|
onClickButton('LINE'); |
|
|
|
|
} else if(mapControl.drawType==='CIRCLE') { |
|
|
|
|
} else if (mapControl.drawType === 'CIRCLE') { |
|
|
|
|
onClickButton('CIRCLE'); |
|
|
|
|
} else if(mapControl.drawType==='POLYGON') { |
|
|
|
|
} else if (mapControl.drawType === 'POLYGON') { |
|
|
|
|
onClickButton('POLYGON'); |
|
|
|
|
} else if(mapControl.drawType==='RESET') { |
|
|
|
|
} else if (mapControl.drawType === 'RESET') { |
|
|
|
|
onClickReset('RESET') |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
@ -99,7 +99,7 @@ export const FlightPlanDrawTest = props => {
|
|
|
|
|
|
|
|
|
|
clearMode(mode); |
|
|
|
|
|
|
|
|
|
if(mode === newMode) { |
|
|
|
|
if (mode === newMode) { |
|
|
|
|
mode = null; |
|
|
|
|
return; |
|
|
|
|
} |
|
|
|
@ -178,11 +178,11 @@ export const FlightPlanDrawTest = props => {
|
|
|
|
|
if (!mode) return; |
|
|
|
|
|
|
|
|
|
if (mode === 'LINE') { |
|
|
|
|
Eve.clickEve = naver.maps.Event.addListener(map, 'click', function(e) { onClickPolyline(e) }); |
|
|
|
|
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) }); |
|
|
|
|
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) })) |
|
|
|
|
setEve(naver.maps.Event.addListener(map, 'click', function (e) { onClickCircle(e) })) |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
@ -192,7 +192,7 @@ export const FlightPlanDrawTest = props => {
|
|
|
|
|
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 (!circle) $(document).off('mousemove.measure'); |
|
|
|
|
// if(pastCircle) naver.maps.Event.removeListener(pastEve);
|
|
|
|
|
naver.maps.Event.removeListener(pastEve); |
|
|
|
|
} |
|
|
|
@ -200,17 +200,17 @@ export const FlightPlanDrawTest = props => {
|
|
|
|
|
const finishDraw = () => { |
|
|
|
|
console.log('finishDraw') |
|
|
|
|
removeListener(); |
|
|
|
|
if(polyline) { |
|
|
|
|
if (polyline) { |
|
|
|
|
let polypaths = polyline.getPath()._array; |
|
|
|
|
|
|
|
|
|
if(guideline) { |
|
|
|
|
if (guideline) { |
|
|
|
|
guideline.setMap(null); |
|
|
|
|
guideline = ''; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
if(polypaths.length >= 2) { |
|
|
|
|
if (polypaths.length >= 2) { |
|
|
|
|
//꼭짓점 circle 생성
|
|
|
|
|
for(let index = 0; index < polypaths.length; index++) { |
|
|
|
|
for (let index = 0; index < polypaths.length; index++) { |
|
|
|
|
dragCircle.push( |
|
|
|
|
new naver.maps.Circle({ |
|
|
|
|
strokeOpacity: 1, |
|
|
|
@ -224,7 +224,7 @@ export const FlightPlanDrawTest = props => {
|
|
|
|
|
}) |
|
|
|
|
) |
|
|
|
|
|
|
|
|
|
dragCircleEve.push(naver.maps.Event.addListener(dragCircle[index], 'mousedown', function() { onMouseDownDrag(index) })) |
|
|
|
|
dragCircleEve.push(naver.maps.Event.addListener(dragCircle[index], 'mousedown', function () { onMouseDownDrag(index) })) |
|
|
|
|
} |
|
|
|
|
setDragCircle(dragCircle); |
|
|
|
|
setPolyline(polyline); |
|
|
|
@ -236,13 +236,13 @@ export const FlightPlanDrawTest = props => {
|
|
|
|
|
polyline = ''; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
} else if(polygon) { |
|
|
|
|
} else if (polygon) { |
|
|
|
|
let path = polygon.getPath(); |
|
|
|
|
path.pop(); |
|
|
|
|
|
|
|
|
|
let polygonpaths = polygon.getPath()._array; |
|
|
|
|
//꼭짓점 circle 생성
|
|
|
|
|
for(let index = 0; index < polygonpaths.length; index++) { |
|
|
|
|
for (let index = 0; index < polygonpaths.length; index++) { |
|
|
|
|
dragCircle.push( |
|
|
|
|
new naver.maps.Circle({ |
|
|
|
|
strokeOpacity: 1, |
|
|
|
@ -255,7 +255,7 @@ export const FlightPlanDrawTest = props => {
|
|
|
|
|
clickable: true |
|
|
|
|
}) |
|
|
|
|
) |
|
|
|
|
dragCircleEve.push(naver.maps.Event.addListener(dragCircle[index], 'mousedown', function() { onMouseDownDrag(index) })) |
|
|
|
|
dragCircleEve.push(naver.maps.Event.addListener(dragCircle[index], 'mousedown', function () { onMouseDownDrag(index) })) |
|
|
|
|
} |
|
|
|
|
setDragCircle(dragCircle); |
|
|
|
|
setPolygon(polygon); |
|
|
|
@ -267,8 +267,8 @@ export const FlightPlanDrawTest = props => {
|
|
|
|
|
console.log('onClickPolyline') |
|
|
|
|
var coord = e.coord; |
|
|
|
|
|
|
|
|
|
if(!check) { |
|
|
|
|
if(!polyline) { |
|
|
|
|
if (!check) { |
|
|
|
|
if (!polyline) { |
|
|
|
|
//가이드라인
|
|
|
|
|
guideline = new naver.maps.Polyline({ |
|
|
|
|
strokeColor: '#283046', |
|
|
|
@ -290,8 +290,8 @@ export const FlightPlanDrawTest = props => {
|
|
|
|
|
map: map |
|
|
|
|
}); |
|
|
|
|
|
|
|
|
|
Eve.rightclickEve = naver.maps.Event.addListener(map, 'rightclick', function() { finishDraw() }) |
|
|
|
|
$(document).on('mousemove.measure', function(e) { onMouseMovePolyline(e); }); |
|
|
|
|
Eve.rightclickEve = naver.maps.Event.addListener(map, 'rightclick', function () { finishDraw() }) |
|
|
|
|
$(document).on('mousemove.measure', function (e) { onMouseMovePolyline(e); }); |
|
|
|
|
|
|
|
|
|
lastDistance = polyline.getDistance(); |
|
|
|
|
// this._addMileStone(coord, 'Start');
|
|
|
|
@ -312,7 +312,7 @@ export const FlightPlanDrawTest = props => {
|
|
|
|
|
coord = proj.fromPageXYToCoord(new naver.maps.Point(e.pageX, e.pageY)), |
|
|
|
|
path = guideline.getPath(); |
|
|
|
|
|
|
|
|
|
if(path.getLength() === 2) { |
|
|
|
|
if (path.getLength() === 2) { |
|
|
|
|
path.pop(); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
@ -323,7 +323,7 @@ export const FlightPlanDrawTest = props => {
|
|
|
|
|
console.log('onClickPolygon') |
|
|
|
|
var coord = e.coord; |
|
|
|
|
|
|
|
|
|
if(!polygon) { |
|
|
|
|
if (!polygon) { |
|
|
|
|
polygon = new naver.maps.Polygon({ |
|
|
|
|
strokeColor: '#283046', |
|
|
|
|
strokeOpacity: 1, |
|
|
|
@ -333,8 +333,8 @@ export const FlightPlanDrawTest = props => {
|
|
|
|
|
map: map |
|
|
|
|
}); |
|
|
|
|
|
|
|
|
|
Eve.rightclickEve = naver.maps.Event.addListener(map, 'rightclick', function() { finishDraw() }) |
|
|
|
|
$(document).on('mousemove.measure', function(e) { onMouseMovePolygon(e) });
|
|
|
|
|
Eve.rightclickEve = naver.maps.Event.addListener(map, 'rightclick', function () { finishDraw() }) |
|
|
|
|
$(document).on('mousemove.measure', function (e) { onMouseMovePolygon(e) }); |
|
|
|
|
} else { |
|
|
|
|
polygon.getPath().push(coord); |
|
|
|
|
} |
|
|
|
@ -342,13 +342,13 @@ export const FlightPlanDrawTest = props => {
|
|
|
|
|
|
|
|
|
|
const onMouseMovePolygon = (e) => { |
|
|
|
|
console.log('onMouseMovePolygon') |
|
|
|
|
if(!polygon) return; |
|
|
|
|
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) { |
|
|
|
|
if (path.getLength() >= 2) { |
|
|
|
|
path.pop(); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
@ -359,8 +359,8 @@ export const FlightPlanDrawTest = props => {
|
|
|
|
|
console.log('onClickCircle') |
|
|
|
|
var coord = e.coord; |
|
|
|
|
|
|
|
|
|
if(!check) { |
|
|
|
|
if(!circle) { |
|
|
|
|
if (!check) { |
|
|
|
|
if (!circle) { |
|
|
|
|
//가이드라인
|
|
|
|
|
radiusline = new naver.maps.Polyline({ |
|
|
|
|
// strokeStyle: [4, 4],
|
|
|
|
@ -382,7 +382,7 @@ export const FlightPlanDrawTest = props => {
|
|
|
|
|
clickable: true |
|
|
|
|
}); |
|
|
|
|
|
|
|
|
|
Eve.mousedownEve = naver.maps.Event.addListener(circle, 'mousedown', function() { onMouseDownDrag(0); })
|
|
|
|
|
Eve.mousedownEve = naver.maps.Event.addListener(circle, 'mousedown', function () { onMouseDownDrag(0); }) |
|
|
|
|
} else { |
|
|
|
|
circle.setRadius(100); |
|
|
|
|
circle.setCenter(coord); |
|
|
|
@ -398,7 +398,7 @@ export const FlightPlanDrawTest = props => {
|
|
|
|
|
const onMouseDownDrag = (index) => { |
|
|
|
|
console.log('onMouseDownDrag') |
|
|
|
|
|
|
|
|
|
if(circle) { |
|
|
|
|
if (circle) { |
|
|
|
|
naver.maps.Event.removeListener(Eve.clickEve); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
@ -412,8 +412,8 @@ export const FlightPlanDrawTest = props => {
|
|
|
|
|
disableTwoFingerTapZoom: true |
|
|
|
|
}) |
|
|
|
|
|
|
|
|
|
$(document).on('mousemove.measure', function(e) { onMouseMoveDrag(e, index) }); |
|
|
|
|
$(document).on('mouseup.measure', function() { onMouseUpDrag() }); |
|
|
|
|
$(document).on('mousemove.measure', function (e) { onMouseMoveDrag(e, index) }); |
|
|
|
|
$(document).on('mouseup.measure', function () { onMouseUpDrag() }); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
const onMouseMoveDrag = (e, index) => { |
|
|
|
@ -424,13 +424,13 @@ export const FlightPlanDrawTest = props => {
|
|
|
|
|
var proj = map.getProjection(), |
|
|
|
|
coord = proj.fromPageXYToCoord(new naver.maps.Point(e.pageX, e.pageY)); |
|
|
|
|
|
|
|
|
|
if(polyline) { |
|
|
|
|
if (polyline) { |
|
|
|
|
var polypaths = polyline.getPath()._array; |
|
|
|
|
|
|
|
|
|
let movepath = []; |
|
|
|
|
for(let i = 0; i < polypaths.length; i++) { |
|
|
|
|
for (let i = 0; i < polypaths.length; i++) { |
|
|
|
|
let path; |
|
|
|
|
if(i === index) { |
|
|
|
|
if (i === index) { |
|
|
|
|
path = coord; |
|
|
|
|
} else { |
|
|
|
|
path = polypaths[i] |
|
|
|
@ -440,13 +440,13 @@ export const FlightPlanDrawTest = props => {
|
|
|
|
|
|
|
|
|
|
polyline.setPath(movepath); |
|
|
|
|
|
|
|
|
|
} else if(polygon) { |
|
|
|
|
} else if (polygon) { |
|
|
|
|
var polygonpaths = polygon.getPath()._array; |
|
|
|
|
|
|
|
|
|
let movepath = []; |
|
|
|
|
for(let i = 0; i < polygonpaths.length; i++) { |
|
|
|
|
for (let i = 0; i < polygonpaths.length; i++) { |
|
|
|
|
let path; |
|
|
|
|
if(i === index) { |
|
|
|
|
if (i === index) { |
|
|
|
|
path = coord; |
|
|
|
|
} else { |
|
|
|
|
path = polygonpaths[i] |
|
|
|
@ -455,19 +455,19 @@ export const FlightPlanDrawTest = props => {
|
|
|
|
|
} |
|
|
|
|
polygon.setPaths(movepath) |
|
|
|
|
|
|
|
|
|
} else if(circle) { |
|
|
|
|
} else if (circle) { |
|
|
|
|
var circlepath = radiusline.getPath(), |
|
|
|
|
center = circle.getCenter(), |
|
|
|
|
r = proj.getDistance(coord, center); |
|
|
|
|
|
|
|
|
|
if(circlepath.getLength() === 2) { |
|
|
|
|
if (circlepath.getLength() === 2) { |
|
|
|
|
circlepath.pop(); |
|
|
|
|
} |
|
|
|
|
circlepath.push(coord); |
|
|
|
|
circle.setRadius(r); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
if(!circle) { |
|
|
|
|
if (!circle) { |
|
|
|
|
dragCircle[index].setCenter(coord); |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
@ -485,12 +485,12 @@ export const FlightPlanDrawTest = props => {
|
|
|
|
|
disableTwoFingerTapZoom: false |
|
|
|
|
}) |
|
|
|
|
|
|
|
|
|
if(polyline) { |
|
|
|
|
if (polyline) { |
|
|
|
|
bufferPolyline.setMap(null); |
|
|
|
|
// bufferMove();
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
if(polygon) { |
|
|
|
|
if (polygon) { |
|
|
|
|
var path = polygon.getPath()._array; |
|
|
|
|
setPolygon(polygon); |
|
|
|
|
// setAreaInfo(path, '');
|
|
|
|
@ -499,9 +499,9 @@ export const FlightPlanDrawTest = props => {
|
|
|
|
|
$(document).off('mousemove.measure'); |
|
|
|
|
$(document).off('mouseup.measure'); |
|
|
|
|
|
|
|
|
|
if(circle) { |
|
|
|
|
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) })) |
|
|
|
|
setEve(naver.maps.Event.addListener(map, 'click', function (e) { onClickCircle(e) })) |
|
|
|
|
setCircle(circle); |
|
|
|
|
setAreaInfo('', ''); |
|
|
|
|
} |
|
|
|
@ -511,12 +511,12 @@ export const FlightPlanDrawTest = props => {
|
|
|
|
|
|
|
|
|
|
const setAreaInfo = (path, bufferpath) => { |
|
|
|
|
areaInfo = { |
|
|
|
|
coordinates : [], |
|
|
|
|
coordinates: [], |
|
|
|
|
bufferZone: 0, |
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
let prePath = []; |
|
|
|
|
if(path) {
|
|
|
|
|
if (path) { |
|
|
|
|
path.forEach((item) => { |
|
|
|
|
const p = { |
|
|
|
|
lat: item.y, |
|
|
|
@ -528,13 +528,13 @@ export const FlightPlanDrawTest = props => {
|
|
|
|
|
// path.forEach(prev=> prePath.push([prev.x, prev.y]))
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
if(polyline) { |
|
|
|
|
if (polyline) { |
|
|
|
|
areaInfo.coordinates = prePath; |
|
|
|
|
areaInfo.areaType = 'LINE'; |
|
|
|
|
} else if(polygon) { |
|
|
|
|
} else if (polygon) { |
|
|
|
|
areaInfo.coordinates = prePath; |
|
|
|
|
areaInfo.areaType = 'POLYGON'; |
|
|
|
|
} else if(circle) {
|
|
|
|
|
} else if (circle) { |
|
|
|
|
const point = { |
|
|
|
|
lat: circle.getCenter().y, |
|
|
|
|
lon: circle.getCenter().x |
|
|
|
@ -552,7 +552,7 @@ export const FlightPlanDrawTest = props => {
|
|
|
|
|
let pol = polyline.getPath()._array; //latlng point 다 준건가?
|
|
|
|
|
|
|
|
|
|
let lineStringPaths = []; |
|
|
|
|
for(let i = 0; i< pol.length; i++) { |
|
|
|
|
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]))
|
|
|
|
@ -578,7 +578,7 @@ export const FlightPlanDrawTest = props => {
|
|
|
|
|
const wkt = 'LINESTRING (126.6061581 37.5218642, 126.6061581 37.518052)' |
|
|
|
|
let coords = { |
|
|
|
|
"type": "LineString", |
|
|
|
|
"coordinates" : lineStringPaths |
|
|
|
|
"coordinates": lineStringPaths |
|
|
|
|
}; |
|
|
|
|
const bufferCenter = new JSTSWKTReader().read(wkt) |
|
|
|
|
const bufferResult = JSTSBufferOp.bufferOp( |
|
|
|
@ -609,7 +609,7 @@ export const FlightPlanDrawTest = props => {
|
|
|
|
|
let pol = polyline.getPath()._array; |
|
|
|
|
|
|
|
|
|
let lineStringPaths = []; |
|
|
|
|
for(let i = 0; i< polyline.getPath().length; i++) { |
|
|
|
|
for (let i = 0; i < polyline.getPath().length; i++) { |
|
|
|
|
lineStringPaths.push([pol[i].x, pol[i].y]); |
|
|
|
|
} |
|
|
|
|
console.log(lineStringPaths, 'polyline path') |
|
|
|
@ -647,46 +647,46 @@ export const FlightPlanDrawTest = props => {
|
|
|
|
|
// map: map
|
|
|
|
|
// });
|
|
|
|
|
|
|
|
|
|
//------------------------
|
|
|
|
|
//------------------------
|
|
|
|
|
|
|
|
|
|
let coords = { |
|
|
|
|
"type": "LineString", |
|
|
|
|
"coordinates" : lineStringPaths |
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
const reader = new GeoJSONReader(); |
|
|
|
|
const writer = new GeoJSONWriter(); |
|
|
|
|
let coords = { |
|
|
|
|
"type": "LineString", |
|
|
|
|
"coordinates": lineStringPaths |
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
const distance = (100 * 0.001) / 111.12; //100미터
|
|
|
|
|
const line = reader.read(coords);
|
|
|
|
|
const buffer = BufferOp.bufferOp(line, distance, 0, 3); |
|
|
|
|
const reader = new GeoJSONReader(); |
|
|
|
|
const writer = new GeoJSONWriter(); |
|
|
|
|
|
|
|
|
|
let bufferpath = buffer._shell._points._coordinates; |
|
|
|
|
const distance = (100 * 0.001) / 111.12; //100미터
|
|
|
|
|
const line = reader.read(coords); |
|
|
|
|
const buffer = BufferOp.bufferOp(line, distance, 0, 3); |
|
|
|
|
|
|
|
|
|
let bufferPaths = []; |
|
|
|
|
for(let i = 0; i< bufferpath.length; i++) { |
|
|
|
|
bufferPaths.push([bufferpath[i].x, bufferpath[i].y]); |
|
|
|
|
} |
|
|
|
|
console.log(bufferPaths, 'bufferPaths') |
|
|
|
|
let bufferpath = buffer._shell._points._coordinates; |
|
|
|
|
|
|
|
|
|
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) |
|
|
|
|
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') {
|
|
|
|
|
if (mapControl.drawType === 'RESET') { |
|
|
|
|
clearMode('RESET'); |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
@ -704,7 +704,7 @@ export const FlightPlanDrawTest = props => {
|
|
|
|
|
paths.push(path); |
|
|
|
|
}); |
|
|
|
|
|
|
|
|
|
if(areas.areaType && areas.areaType === 'LINE') { |
|
|
|
|
if (areas.areaType && areas.areaType === 'LINE') { |
|
|
|
|
polyline = new naver.maps.Polyline({ |
|
|
|
|
strokeLineCap: 'round', |
|
|
|
|
strokeLineJoin: 'round', |
|
|
|
@ -716,10 +716,36 @@ export const FlightPlanDrawTest = props => {
|
|
|
|
|
}); |
|
|
|
|
|
|
|
|
|
setPolyline(polyline) |
|
|
|
|
// $(document).on('mousemove.measure', function(e) { onMouseMovePolyline(e); });
|
|
|
|
|
|
|
|
|
|
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(pastPolygon) { |
|
|
|
|
pastPolygon.setMap(null); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
polygon = new naver.maps.Polygon({ |
|
|
|
|
strokeColor: '#283046', |
|
|
|
|
strokeOpacity: 1, |
|
|
|
|
fillColor: '#7367F0', |
|
|
|
|
fillOpacity: 0.1, |
|
|
|
|
paths: bufferPaths, |
|
|
|
|
map: map |
|
|
|
|
}); |
|
|
|
|
console.log(polygon); |
|
|
|
|
|
|
|
|
|
setPolygon(polygon); |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
if(areas.areaType && areas.areaType === 'POLYGON') { |
|
|
|
|
if (areas.areaType && areas.areaType === 'POLYGON') { |
|
|
|
|
polygon = new naver.maps.Polygon({ |
|
|
|
|
strokeColor: '#283046', |
|
|
|
|
strokeOpacity: 1, |
|
|
|
@ -732,7 +758,7 @@ export const FlightPlanDrawTest = props => {
|
|
|
|
|
setPolygon(polygon); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
if(areas.areaType && areas.areaType === 'CIRCLE') { |
|
|
|
|
if (areas.areaType && areas.areaType === 'CIRCLE') { |
|
|
|
|
circle = new naver.maps.Circle({ |
|
|
|
|
strokeColor: '#283046', |
|
|
|
|
strokeOpacity: 1, |
|
|
|
@ -747,7 +773,7 @@ export const FlightPlanDrawTest = props => {
|
|
|
|
|
setCircle(circle); |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
return ( |
|
|
|
|
<> |
|
|
|
|