버퍼라인 보완

package.json

@@ -14,6 +14,8 @@
     "@fullcalendar/timeline": "5.7.2",
     "@hookform/resolvers": "1.3.4",
     "@stomp/stompjs": "^6.1.0",
+    "@turf/buffer": "^6.5.0",
+    "@turf/turf": "^6.5.0",
     "@types/googlemaps": "^3.43.3",
     "@types/history": "^4.7.8",
     "@types/jest": "^26.0.23",

src/components/mapDraw/naver/NaverMap.js

@@ -5,7 +5,8 @@ import geoJson from '../geojson/airArea.json';
 import { FeatureAirZone } from './feature/FeatureAirZone';
 import { DrawMap } from './draw/DrawMap';
 import { JQueryDraw } from './draw/JQueryDraw';
-import { JQueryTest } from './draw/JQueryTest';
+// import { JQueryTest } from './draw/JQueryTest';
+// import { Test } from './draw/Test';
 
 export const NaverCustomMap = () => {
   const naver = window.naver;
@@ -50,9 +51,7 @@ export const NaverCustomMap = () => {
 
           {/* 그리기 도구 모음 불러오는 거 */}
           <DrawMap map={mapObject} naver={naver} />
-
-          {/* <JQueryConv map={mapObject} naver={naver} /> */}
-
+          {/* <Test map={mapObject} naver={naver} /> */}
         </>
       ) : null}
 

src/components/mapDraw/naver/draw/JQueryDraw.js

@@ -2,10 +2,7 @@ import $ from 'jquery';
 import '../../../../assets/css/custom.css'; 
 import { CustomInput } from 'reactstrap';
 
-import GeoJSONReader from 'jsts/org/locationtech/jts/io/GeoJSONReader'
-import GeoJSONWriter from 'jsts/org/locationtech/jts/io/GeoJSONWriter'
-import GeometryFactory from 'jsts/org/locationtech/jts/geom/GeometryFactory'
-import {BufferOp} from 'jsts/org/locationtech/jts/operation/buffer'
+import buffer from '@turf/buffer'
 
 export const JQueryDraw = props => {
   const {naver} = props;
@@ -108,54 +105,67 @@ export const JQueryDraw = props => {
 
       if (this._polyline) {
         // console.log(this._polyline.getPath()._array, 'path')
-        let te = this._polyline.getPath()._array;
-        let co = [];
-        for(let i = 0; i< te.length; i++) {
-          co.push([te[i]._lat, te[i]._lng]);
-        }
-        console.log(co, 'co')
+        let polypaths = this._polyline.getPath()._array;
 
-        let coords = {
-          "type": "LineString",
-          "coordinates": co
-        };
+        //파싱
+        let polypathJSON = new Array();
+        for(let i = 0; i< polypaths.length; i++) {
 
-        const reader = new GeoJSONReader();
-        const writer = new GeoJSONWriter();
+          //파싱
+          let obj = new Object();
 
-        const distance = (100 * 0.001) / 111.12;
-        const line = reader.read(coords);
-        const buffer = BufferOp.bufferOp(line, distance);
-        const polygon = writer.write(buffer);
+          obj.x = '' + polypaths[i]._lng + '';
+          obj.y = '' + polypaths[i]._lat + '';
 
-        // console.log(buffer._shell._points._coordinates, 'coords');
-        let bu = buffer._shell._points._coordinates;
-        let buffers = [];
-        for(let i = 0; i< bu.length; i++) {
-          buffers.push([bu[i].y, bu[i].x]);
+          obj = JSON.stringify(obj);
+          polypathJSON.push(JSON.parse(obj));  
         }
-        console.log(buffers, 'buffers')
+        console.log(polypathJSON, 'json polyline path')
+
 
-        const poly = new naver.maps.Polyline({
+        //버퍼 생성에 필요한 coordinates 배열 변환
+        let lineStringPaths = [];
+        for(let i = 0; i < this._polyline.getPath().length; i++) {
+          lineStringPaths.push([this._polyline.getPath()._array[i].x, this._polyline.getPath()._array[i].y]);
+        }
+        console.log(lineStringPaths, 'polyline path')
+
+        //버퍼 생성을 위한 line 객체
+        const originalGeojson = {
+          type: "FeatureCollection",
+          features: [
+            {
+              type: "Feature",
+              properties: {},
+              geometry: {
+                type: "LineString",
+                coordinates: lineStringPaths
+              }
+            }
+          ]
+        };
+        console.log(originalGeojson)
+
+        //버퍼 객체
+        const bufferObj = buffer(originalGeojson, 50, {units:'meters'});
+
+        //버퍼 라인 생성
+        let bufferPath = bufferObj.features[0].geometry.coordinates[0];
+        console.log(bufferPath, 'buffer path')
+
+        this.bufferPolyline = new naver.maps.Polyline({
           strokeColor: '#ff0000',
           strokeWeight: 2,
           strokeStyle: [4, 4],
           strokeOpacity: 0.6,
-          path : buffers,
+          path : bufferPath,
           map: map
-        })
-
-        console.log(poly, 'poly')
-
-
+        });
 
         // 이거 하면 그동안 한거 싹 사라짐 -> 얘를 통해서 drawType이 바뀌면 다 날라가는 걸로 해보면 될듯
         // this._polyline.setMap(null)
         delete this._polyline;
 
-        //버퍼 테스트
-        delete this._buffercircle;
-        delete this._buffercoord;
       }
       //onfocus()의 반대기능 = blur()
       this.$btnLine.removeClass('control-on').blur();
@@ -241,13 +251,56 @@ export const JQueryDraw = props => {
       }
     },
 
+    _fromMetersToText: function(meters) {
+      meters = meters || 0;
+
+      var km = 1000,
+        text = meters;
+
+      if(meters >= km) {
+        text = parseFloat((meters / km).toFixed(1)) + 'km';
+      } else {
+        text = parseFloat(meters.toFixed(1)) + 'm';
+      }
+
+      return text;
+    },
+
+    _addMileStone: function(coord, text, css) {
+      if(!this._ms) this._ms = [];
+
+      let content;
+      if(text == 'Start') {
+        content = '<div style="display:inline-block;padding:5px;text-align:center;background-color:#fff;border:1px solid #000;font-size:14px;color:#ff0000;"><span>'+ text +'</span></div>'
+      } else {
+        content = '<div style="display:inline-block;padding:5px;text-align:center;background-color:#fff;border:1px solid #000;color:#737373;"><span>'+ text +'</span></div>'
+      }
+
+      var ms = new naver.maps.Marker({
+        position: coord,
+        icon: {
+          content: content,
+          anchor: new naver.maps.Point(-5, -5)
+        },
+        map: this.map
+      });
+
+      var msElement = $(ms.getElement());
+
+      if(css) {
+        msElement.css(css);
+      } else {
+        msElement.css('font-size', '13px');
+      }
+
+      this._ms.push(ms);
+    },
+
     _onClickDistance: function(e) {
       console.log('onClickDistance')
       var map = this.map,
         coord = e.coord;
 
-      // console.log(coord, '클릭좌표1');
-
       if (!this._polyline) {
         // 임시로 보여줄 점선 폴리라인을 생성합니다.
         this._guideline = new naver.maps.Polyline({
@@ -275,9 +328,16 @@ export const JQueryDraw = props => {
           map: map
         });
 
+        this._lastDistance = this._polyline.getDistance();
+        this._addMileStone(coord, 'Start');
+
       } else {
         this._guideline.setPath([e.coord]);
         this._polyline.getPath().push(coord);
+
+        var distance = this._polyline.getDistance();
+        this._addMileStone(coord, this._fromMetersToText(distance - this._lastDistance));
+        this._lastDistance = distance;
       }
     },
 
@@ -520,11 +580,11 @@ export const JQueryDraw = props => {
           this._polyline.setMap(null);
           delete this._polyline;
 
-          this._buffercircle.setMap(null);
-          delete this._buffercircle;
+          // this._buffercircle.setMap(null);
+          // delete this._buffercircle;
 
-          this._buffercoord.setMap(null)
-          delete this._buffercoord;
+          // this._buffercoord.setMap(null)
+          // delete this._buffercoord;
         }
 
         this._finishDistance();
@@ -590,12 +650,6 @@ export const JQueryDraw = props => {
             className='control-btn'
             src='http://static.naver.net/maps/mantle/drawing/1x/rectangle.png'
           />
-          <br/>
-          <CustomInput
-            id='input'
-            type='input'
-            className='buffer-input'
-          />
         </li>
       </ul>
       </div>