라이브러리 추가

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",

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",

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]);
+      lineStringPaths.push([pol[i].x, pol[i].y]);
-      }
+    }
-      // console.log(lineStringPaths, 'polyline path')
+    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 = {
+    // const bufferObj = buffer(originalGeojson, 50, {units:'meters'});
-        type: "FeatureCollection",
+
-        features: [
+    // //버퍼 라인 생성
-          {
+    // let bufferPath = bufferObj.features[0].geometry.coordinates[0];
-            type: "Feature",
+    // // console.log(bufferPath, 'buffer path')
-            properties: {},
+
-            geometry: {
+    // bufferPolyline = new naver.maps.Polyline({
-              type: "LineString",
+    //   // strokeColor: '#ff0000',
-              coordinates: lineStringPaths
+    //   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 reader = new GeoJSONReader();
-      const bufferObj = buffer(originalGeojson, 50, {units:'meters'});
+      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)
   }