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. 308
      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}

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

@ -6,10 +6,10 @@ 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 JSTSWKTReader from 'jsts/org/locationtech/jts/io/WKTReader';
import GeoJSONWriter from 'jsts/org/locationtech/jts/io/GeoJSONWriter';
import JSTSBufferOp from 'jsts/org/locationtech/jts/operation/buffer/BufferOp'
import JSTSBufferParameter from 'jsts/org/locationtech/jts/operation/buffer/BufferParameters';
@ -23,10 +23,10 @@ export const FlightPlanDrawTest = props => {
const [pastBuffer, setBuffer] = useState();
const [pastPolygon, setPolygon] = useState();
const [pastCircle, setCircle] = useState();
const [pastEve, setEve] = useState();
const [pastDragCircle, setDragCircle] = useState([]);
const naver = props.naver;
@ -57,21 +57,21 @@ export const FlightPlanDrawTest = props => {
let check;
useEffect(() => {
useEffect(() => {
drawInit();
}, [mapControl.drawType])
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));
}
@ -79,27 +79,27 @@ export const FlightPlanDrawTest = props => {
}
}
const drawInit = () => {
console.log(mapControl.drawType);
if(mapControl.drawType==='LINE') {
const drawInit = () => {
console.log(mapControl.drawType);
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')
}
}
const onClickButton = (newMode) => {
console.log('onClickButton');
console.log('onClickButton');
zoomChange();
zoomChange();
clearMode(mode);
if(mode === newMode) {
if (mode === newMode) {
mode = null;
return;
}
@ -109,11 +109,11 @@ export const FlightPlanDrawTest = props => {
startMode(newMode);
}
const clearMode = (mode) => {
const clearMode = (mode) => {
console.log('clearMode')
// if(!mode) return;
// clear mode는 전체를 다 초기화 하는게 맞지 않을까..? 무조건 drawType이 변할때마다 초기화해주기로..
if (pastPolyline) {
console.log('clrea polyline ', pastPolyline)
@ -126,7 +126,7 @@ export const FlightPlanDrawTest = props => {
if (pastCircle) {
console.log('clrea circle ', pastCircle)
pastCircle.setMap(null);
naver.maps.Event.removeListener(pastEve);
naver.maps.Event.removeListener(pastEve);
setCircle();
}
@ -136,12 +136,12 @@ export const FlightPlanDrawTest = props => {
pastDragCircle.forEach(c => c.setMap(null));
setPolygon();
setDragCircle([]);
setDragCircle([]);
}
finishDraw();
props.handleInitCoordinates();
finishDraw();
props.handleInitCoordinates();
// if(mode === 'LINE' && pastPolyline) {
// pastPolyline.setMap(null);
// pastDragCircle.forEach(c => c.setMap(null));
@ -176,23 +176,23 @@ export const FlightPlanDrawTest = props => {
console.log('startMode')
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) }))
}
}
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 (!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,
@ -223,12 +223,12 @@ 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);
setPolyline(polyline);
setAreaInfo(polypaths);
} else {
@ -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',
@ -278,7 +278,7 @@ export const FlightPlanDrawTest = props => {
map: map
});
// lastDistance = guideline.getDistance();
//실제 사용되는 라인
polyline = new naver.maps.Polyline({
strokeLineCap: 'round',
@ -289,21 +289,21 @@ export const FlightPlanDrawTest = props => {
path: [coord],
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');
} else {
guideline.setPath([e.coord]);
polyline.getPath().push(coord);
var distance = polyline.getDistance();
// addMileStone(coord, this._fromMetersToText(distance - this._lastDistance));
lastDistance = distance;
}
}
}
}
const onMouseMovePolyline = (e) => {
@ -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,29 +424,29 @@ 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]
}
movepath.push(path);
}
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('', '');
}
@ -509,14 +509,14 @@ export const FlightPlanDrawTest = props => {
check = false;
}
const setAreaInfo = (path, bufferpath) => {
const setAreaInfo = (path, bufferpath) => {
areaInfo = {
coordinates : [],
coordinates: [],
bufferZone: 0,
};
let prePath = [];
if(path) {
if (path) {
path.forEach((item) => {
const p = {
lat: item.y,
@ -526,23 +526,23 @@ export const FlightPlanDrawTest = props => {
prePath.push(p);
})
// path.forEach(prev=> prePath.push([prev.x, prev.y]))
}
}
if(polyline) {
areaInfo.coordinates = prePath;
areaInfo.areaType = 'LINE';
} else if(polygon) {
if (polyline) {
areaInfo.coordinates = prePath;
areaInfo.areaType = 'LINE';
} else if (polygon) {
areaInfo.coordinates = prePath;
areaInfo.areaType = 'POLYGON';
} else if(circle) {
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';
areaInfo.areaType = 'CIRCLE';
}
props.handleCoordinates(areaInfo);
// console.log(areaInfo, 'areaInfo')
@ -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]))
@ -564,7 +564,7 @@ export const FlightPlanDrawTest = props => {
// lineStringPaths.push(naver.maps.TransCoord.fromEPSG3857ToUTMK(naver.maps.Point(pol[i].x, pol[i].y)))
lineStringPaths.push([pol[i].x, pol[i].y]);
}
// console.log(map.getProjection().getProjectionName());
@ -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(
@ -586,7 +586,7 @@ export const FlightPlanDrawTest = props => {
bufferRadius
)
const bufferResultGeoJSON = new GeoJSONWriter().write(bufferResult)
const bufferResultGeoJSON = new GeoJSONWriter().write(bufferResult)
// bufferPolyline = new naver.maps.Polyline({
// strokeColor: '#ff0000',
@ -596,7 +596,7 @@ export const FlightPlanDrawTest = props => {
// strokeOpacity: 1,
// path : bufferPaths,
// // path: [
// // ],
// map: map
// });
@ -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,54 +647,54 @@ 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 = () => {
const onClickReset = () => {
console.log('onClickRest - ', mapControl.drawType);
if(mapControl.drawType === 'RESET') {
if (mapControl.drawType === 'RESET') {
clearMode('RESET');
}
}
}
const handleDetailDrwa = () => {
if (props.areaCoordList) {
const areas = props.areaCoordList[0];
if (props.areaCoordList) {
const areas = props.areaCoordList[0];
const paths = [];
@ -702,9 +702,9 @@ export const FlightPlanDrawTest = props => {
const path = new naver.maps.LatLng(coord.lat, coord.lon)
paths.push(path);
});
});
if(areas.areaType && areas.areaType === 'LINE') {
if (areas.areaType && areas.areaType === 'LINE') {
polyline = new naver.maps.Polyline({
strokeLineCap: 'round',
strokeLineJoin: 'round',
@ -714,12 +714,38 @@ export const FlightPlanDrawTest = props => {
path: paths,
map: map
});
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,10 +773,10 @@ 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