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

비행 구역 buffer 작업

feature/flight-plan
노승철 2 years ago
parent
62d7bbb0a8
commit
bc2a22fffb
3 changed files with 174 additions and 144 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 8
      src/components/basis/flight/plan/FlightPlanAreaMap.js
  2. 164
      src/components/map/naver/draw/FlightPlanDrawTest.js
  3. 2
      src/containers/basis/flight/plan/FlightPlanDetailContainer.js

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

@ -39,7 +39,11 @@ const FlightPlanAreaMap = (props) => {
useEffect(() => {
ModeInit();
}, [mapControl.drawType])
}, [mapControl.drawType]);
useEffect(() => {
setMapAreaCoordList(areaCoordList)
}, [areaCoordList]);
const ModeInit = () => {
setMode(mapControl.drawType)
@ -122,7 +126,7 @@ const FlightPlanAreaMap = (props) => {
map={map}
naver={naver}
mode={mode}
areaCoordList={areaCoordList}
areaCoordList={mapAreaCoordList}
handleCoordinates={handleCoordinates}
handleInitCoordinates={handleInitCoordinates}
/> : null}

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

@ -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')
@ -651,7 +651,7 @@ export const FlightPlanDrawTest = props => {
let coords = {
"type": "LineString",
"coordinates" : lineStringPaths
"coordinates": lineStringPaths
};
const reader = new GeoJSONReader();
@ -664,7 +664,7 @@ export const FlightPlanDrawTest = props => {
let bufferpath = buffer._shell._points._coordinates;
let bufferPaths = [];
for(let i = 0; i< bufferpath.length; i++) {
for (let i = 0; i < bufferpath.length; i++) {
bufferPaths.push([bufferpath[i].x, bufferpath[i].y]);
}
console.log(bufferPaths, 'bufferPaths')
@ -675,7 +675,7 @@ export const FlightPlanDrawTest = props => {
strokeWeight: 2,
strokeStyle: [4, 4],
strokeOpacity: 1,
path : bufferPaths,
path: bufferPaths,
map: map
});
// setAreaInfo(polyline.getPath()._array, bufferPath);
@ -686,7 +686,7 @@ export const FlightPlanDrawTest = props => {
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);
}
if(areas.areaType && areas.areaType === 'POLYGON') {
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') {
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 (
<>

2
src/containers/basis/flight/plan/FlightPlanDetailContainer.js
Unescape View File

@ -142,7 +142,7 @@ const FlightPlanDetailContainer = () => {
useEffect(() => {
// 조종사, 기체 정보 Redux 초기화
// dispatch(Actions.PILOT_ARCRFT_SELECT_INIT());
dispatch(Actions.PILOT_ARCRFT_SELECT_INIT());
})
const handleModal = (modal) => {

Write Preview
Loading…
Cancel
Save