|
|
|
@ -1,9 +1,18 @@
|
|
|
|
|
import $ from 'jquery'; |
|
|
|
|
import buffer from '@turf/buffer' |
|
|
|
|
import { useEffect, useState } from 'react'; |
|
|
|
|
import { Button } from 'reactstrap'; |
|
|
|
|
import { useDispatch, useSelector } from 'react-redux'; |
|
|
|
|
import $ from 'jquery'; |
|
|
|
|
import { drawTypeChangeAction } from '../../../../modules/control/map/actions/controlMapActions'; |
|
|
|
|
import buffer from '@turf/buffer' |
|
|
|
|
|
|
|
|
|
import GeoJSONReader from 'jsts/org/locationtech/jts/io/GeoJSONReader'; |
|
|
|
|
import GeometryFactory from 'jsts/org/locationtech/jts/geom/GeometryFactory'; |
|
|
|
|
import {BufferOp} from 'jsts/org/locationtech/jts/operation/buffer'; |
|
|
|
|
import {DistanceOp} from 'jsts/org/locationtech/jts/operation/distance/DistanceOp'; |
|
|
|
|
|
|
|
|
|
import JSTSWKTReader from 'jsts/org/locationtech/jts/io/WKTReader'; |
|
|
|
|
import GeoJSONWriter from 'jsts/org/locationtech/jts/io/GeoJSONWriter'; |
|
|
|
|
import JSTSBufferOp from 'jsts/org/locationtech/jts/operation/buffer/BufferOp' |
|
|
|
|
import JSTSBufferParameter from 'jsts/org/locationtech/jts/operation/buffer/BufferParameters'; |
|
|
|
|
|
|
|
|
|
export const FlightPlanDrawTest = props => { |
|
|
|
|
const dispatch = useDispatch(); |
|
|
|
@ -205,7 +214,8 @@ export const FlightPlanDrawTest = props => {
|
|
|
|
|
polypathJSON.push(JSON.parse(obj));
|
|
|
|
|
} |
|
|
|
|
// console.log(polypathJSON, 'json polyline path');
|
|
|
|
|
bufferMove(); |
|
|
|
|
// bufferMove();
|
|
|
|
|
bufferTest(); |
|
|
|
|
} else { |
|
|
|
|
polyline.setMap(null); |
|
|
|
|
polyline = ''; |
|
|
|
@ -462,7 +472,7 @@ export const FlightPlanDrawTest = props => {
|
|
|
|
|
|
|
|
|
|
if(polyline) { |
|
|
|
|
bufferPolyline.setMap(null); |
|
|
|
|
bufferMove(); |
|
|
|
|
// bufferMove();
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
if(polygon) { |
|
|
|
@ -509,50 +519,146 @@ export const FlightPlanDrawTest = props => {
|
|
|
|
|
console.log(areaInfo, 'areaInfo') |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
const bufferTest = () => { |
|
|
|
|
let pol = polyline.getPath()._array; //latlng point 다 준건가?
|
|
|
|
|
console.log(pol) |
|
|
|
|
|
|
|
|
|
let lineStringPaths = []; |
|
|
|
|
for(let i = 0; i< pol.length; i++) { |
|
|
|
|
// lineStringPaths.push(naver.maps.TransCoord.fromLatLngToEPSG3857(pol[i]))
|
|
|
|
|
// lineStringPaths.push(naver.maps.TransCoord.fromLatLngToNaver(pol[i]))
|
|
|
|
|
// lineStringPaths.push(naver.maps.TransCoord.fromLatLngToTM128(pol[i]))
|
|
|
|
|
// lineStringPaths.push(naver.maps.TransCoord.fromLatLngToUTMK(pol[i]))
|
|
|
|
|
|
|
|
|
|
// lineStringPaths.push(naver.maps.TransCoord.fromEPSG3857ToLatLng(naver.maps.Point(pol[i].x, pol[i].y)))
|
|
|
|
|
// lineStringPaths.push(naver.maps.TransCoord.fromEPSG3857ToNaver(naver.maps.Point(pol[i].x, pol[i].y)))
|
|
|
|
|
// lineStringPaths.push(naver.maps.TransCoord.fromEPSG3857ToTM128(naver.maps.Point(pol[i].x, pol[i].y)))
|
|
|
|
|
// lineStringPaths.push(naver.maps.TransCoord.fromEPSG3857ToUTMK(naver.maps.Point(pol[i].x, pol[i].y)))
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
lineStringPaths.push([pol[i].x, pol[i].y]); |
|
|
|
|
} |
|
|
|
|
// console.log(map.getProjection().getProjectionName());
|
|
|
|
|
// console.log(map.getProjection())
|
|
|
|
|
// console.log(map.getPrimitiveProjection())
|
|
|
|
|
|
|
|
|
|
console.log(lineStringPaths) |
|
|
|
|
|
|
|
|
|
//옆에 화면에 라이브러리 활용해서 제발 성공하자..
|
|
|
|
|
let bufferRadius = 100; |
|
|
|
|
const wkt = 'LINESTRING (126.6061581 37.5218642, 126.6061581 37.518052)' |
|
|
|
|
let coords = { |
|
|
|
|
"type": "LineString", |
|
|
|
|
"coordinates" : lineStringPaths |
|
|
|
|
}; |
|
|
|
|
const bufferCenter = new JSTSWKTReader().read(wkt) |
|
|
|
|
const bufferResult = JSTSBufferOp.bufferOp( |
|
|
|
|
bufferCenter, |
|
|
|
|
bufferRadius |
|
|
|
|
) |
|
|
|
|
|
|
|
|
|
const bufferResultGeoJSON = new GeoJSONWriter().write(bufferResult) |
|
|
|
|
console.log(bufferResultGeoJSON) |
|
|
|
|
|
|
|
|
|
// bufferPolyline = new naver.maps.Polyline({
|
|
|
|
|
// strokeColor: '#ff0000',
|
|
|
|
|
// strokeColor: '#283046',
|
|
|
|
|
// strokeWeight: 2,
|
|
|
|
|
// strokeStyle: [4, 4],
|
|
|
|
|
// strokeOpacity: 1,
|
|
|
|
|
// path : bufferPaths,
|
|
|
|
|
// // path: [
|
|
|
|
|
|
|
|
|
|
// // ],
|
|
|
|
|
// map: map
|
|
|
|
|
// });
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
const bufferMove = () => { |
|
|
|
|
console.log('bufferMove') |
|
|
|
|
|
|
|
|
|
//버퍼 생성에 필요한 coordinates 배열 변환
|
|
|
|
|
let pol = polyline.getPath()._array; |
|
|
|
|
|
|
|
|
|
let lineStringPaths = []; |
|
|
|
|
for(let i = 0; i< polyline.getPath().length; i++) { |
|
|
|
|
lineStringPaths.push([polyline.getPath()._array[i].x, polyline.getPath()._array[i].y]); |
|
|
|
|
} |
|
|
|
|
// console.log(lineStringPaths, 'polyline path')
|
|
|
|
|
lineStringPaths.push([pol[i].x, pol[i].y]); |
|
|
|
|
} |
|
|
|
|
console.log(lineStringPaths, 'polyline path') |
|
|
|
|
|
|
|
|
|
// //버퍼 생성을 위한 line 객체
|
|
|
|
|
// const originalGeojson = {
|
|
|
|
|
// type: "FeatureCollection",
|
|
|
|
|
// features: [
|
|
|
|
|
// {
|
|
|
|
|
// type: "Feature",
|
|
|
|
|
// properties: {},
|
|
|
|
|
// geometry: {
|
|
|
|
|
// type: "LineString",
|
|
|
|
|
// coordinates: lineStringPaths
|
|
|
|
|
// }
|
|
|
|
|
// }
|
|
|
|
|
// ]
|
|
|
|
|
// };
|
|
|
|
|
// // console.log(originalGeojson, 'Feature type Object')
|
|
|
|
|
|
|
|
|
|
//버퍼 생성을 위한 line 객체
|
|
|
|
|
const originalGeojson = { |
|
|
|
|
type: "FeatureCollection", |
|
|
|
|
features: [ |
|
|
|
|
{ |
|
|
|
|
type: "Feature", |
|
|
|
|
properties: {}, |
|
|
|
|
geometry: { |
|
|
|
|
type: "LineString", |
|
|
|
|
coordinates: lineStringPaths |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
] |
|
|
|
|
// //버퍼 객체
|
|
|
|
|
// const bufferObj = buffer(originalGeojson, 50, {units:'meters'});
|
|
|
|
|
|
|
|
|
|
// //버퍼 라인 생성
|
|
|
|
|
// let bufferPath = bufferObj.features[0].geometry.coordinates[0];
|
|
|
|
|
// // console.log(bufferPath, 'buffer path')
|
|
|
|
|
|
|
|
|
|
// bufferPolyline = new naver.maps.Polyline({
|
|
|
|
|
// // strokeColor: '#ff0000',
|
|
|
|
|
// strokeColor: '#283046',
|
|
|
|
|
// strokeWeight: 2,
|
|
|
|
|
// strokeStyle: [4, 4],
|
|
|
|
|
// strokeOpacity: 1,
|
|
|
|
|
// path : bufferPath,
|
|
|
|
|
// map: map
|
|
|
|
|
// });
|
|
|
|
|
|
|
|
|
|
//------------------------
|
|
|
|
|
|
|
|
|
|
let coords = { |
|
|
|
|
"type": "LineString", |
|
|
|
|
"coordinates" : lineStringPaths |
|
|
|
|
}; |
|
|
|
|
// console.log(originalGeojson, 'Feature type Object')
|
|
|
|
|
|
|
|
|
|
//버퍼 객체
|
|
|
|
|
const bufferObj = buffer(originalGeojson, 50, {units:'meters'}); |
|
|
|
|
const reader = new GeoJSONReader(); |
|
|
|
|
const writer = new GeoJSONWriter(); |
|
|
|
|
|
|
|
|
|
const distance = (100 * 0.001) / 111.12; //100미터
|
|
|
|
|
const line = reader.read(coords); |
|
|
|
|
// const buffer = BufferOp.bufferOp(line, distance);
|
|
|
|
|
const buffer = BufferOp.bufferOp(line, distance, 0, 3); |
|
|
|
|
|
|
|
|
|
//버퍼 라인 생성
|
|
|
|
|
let bufferPath = bufferObj.features[0].geometry.coordinates[0]; |
|
|
|
|
// console.log(bufferPath, 'buffer path')
|
|
|
|
|
let bufferpath = buffer._shell._points._coordinates; |
|
|
|
|
|
|
|
|
|
let bufferPaths = []; |
|
|
|
|
for(let i = 0; i< bufferpath.length; i++) { |
|
|
|
|
bufferPaths.push([bufferpath[i].x, bufferpath[i].y]); |
|
|
|
|
} |
|
|
|
|
console.log(bufferPaths, 'bufferPaths') |
|
|
|
|
|
|
|
|
|
bufferPolyline = new naver.maps.Polyline({ |
|
|
|
|
// strokeColor: '#ff0000',
|
|
|
|
|
strokeColor: '#ff0000', |
|
|
|
|
strokeColor: '#283046', |
|
|
|
|
strokeWeight: 2, |
|
|
|
|
strokeStyle: [4, 4], |
|
|
|
|
strokeOpacity: 1, |
|
|
|
|
path : bufferPath, |
|
|
|
|
path : bufferPaths, |
|
|
|
|
// path: [
|
|
|
|
|
|
|
|
|
|
// ],
|
|
|
|
|
map: map |
|
|
|
|
}); |
|
|
|
|
|
|
|
|
|
setAreaInfo(polyline.getPath()._array, bufferPath); |
|
|
|
|
|
|
|
|
|
// setAreaInfo(polyline.getPath()._array, bufferPath);
|
|
|
|
|
setAreaInfo(polyline.getPath()._array, bufferPaths); |
|
|
|
|
setPolyline(polyline); |
|
|
|
|
setBuffer(bufferPolyline) |
|
|
|
|
} |
|
|
|
|