From 7f9b30ccc291b53cb5470b08ae01268b369129fd 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: Sat, 23 Jul 2022 18:22:23 +0900 Subject: [PATCH] =?UTF-8?q?=EB=9D=BC=EC=9D=B4=EB=B8=8C=EB=9F=AC=EB=A6=AC?= =?UTF-8?q?=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package-lock.json | 15 ++ package.json | 1 + .../map/naver/draw/FlightPlanDrawTest.js | 170 ++++++++++++++---- 3 files changed, 154 insertions(+), 32 deletions(-) diff --git a/package-lock.json b/package-lock.json index 5cbca85..2883f61 100644 --- a/package-lock.json +++ b/package-lock.json @@ -3680,6 +3680,15 @@ "resolved": "https://registry.npmjs.org/@types/json5/-/json5-0.0.29.tgz", "integrity": "sha1-7ihweulOEdK4J7y+UnC86n8+ce4=" }, + "@types/jsts": { + "version": "0.17.12", + "resolved": "https://registry.npmjs.org/@types/jsts/-/jsts-0.17.12.tgz", + "integrity": "sha512-CVRlGD914G8Lce/r6PBDCNX5KSfdI5ZXCJ4cefy09/5gZBMEy3rcv5prjJuSHusfDaKMnqWc9Asz4I08q/YrAQ==", + "dev": true, + "requires": { + "@types/openlayers": "*" + } + }, "@types/lodash": { "version": "4.14.170", "resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.14.170.tgz", @@ -3700,6 +3709,12 @@ "resolved": "https://registry.npmjs.org/@types/normalize-package-data/-/normalize-package-data-2.4.0.tgz", "integrity": "sha512-f5j5b/Gf71L+dbqxIpQ4Z2WlmI/mPJ0fOkGGmFgtb6sAu97EPczzbS3/tJKxmcYDj55OX6ssqwDAWOHIYDRDGA==" }, + "@types/openlayers": { + "version": "4.6.18", + "resolved": "https://registry.npmjs.org/@types/openlayers/-/openlayers-4.6.18.tgz", + "integrity": "sha512-srqcI4chyzzs11ZhYpnZqT6Lh1v/O5EXh+pPENDtAwhE7CM31h+JsGomt+ioGhuNVJ96Jl4UkHR1Lllb/XrQAA==", + "dev": true + }, "@types/parse-json": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/@types/parse-json/-/parse-json-4.0.0.tgz", diff --git a/package.json b/package.json index 9321eab..f58f2e9 100644 --- a/package.json +++ b/package.json @@ -126,6 +126,7 @@ "extends": "react-app" }, "devDependencies": { + "@types/jsts": "^0.17.12", "@types/sortablejs": "^1.10.6", "@typescript-eslint/eslint-plugin": "^4.28.1", "@typescript-eslint/parser": "^4.28.1", diff --git a/src/components/map/naver/draw/FlightPlanDrawTest.js b/src/components/map/naver/draw/FlightPlanDrawTest.js index 2312215..93765af 100644 --- a/src/components/map/naver/draw/FlightPlanDrawTest.js +++ b/src/components/map/naver/draw/FlightPlanDrawTest.js @@ -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') - - //버퍼 생성을 위한 line 객체 - const originalGeojson = { - type: "FeatureCollection", - features: [ - { - type: "Feature", - properties: {}, - geometry: { - type: "LineString", - coordinates: lineStringPaths - } - } - ] + for(let i = 0; i< polyline.getPath().length; i++) { + 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') + + // //버퍼 객체 + // 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 = buffer._shell._points._coordinates; - //버퍼 라인 생성 - let bufferPath = bufferObj.features[0].geometry.coordinates[0]; - // console.log(bufferPath, 'buffer path') + 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) }