라인 버퍼

src/components/mapDraw/naver/NaverMap.js

@@ -1,24 +1,16 @@
 import React, { useEffect, useState } from 'react';
 
 import NaverMapControl from './NaverMapControl';
+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 geoJson from '../geojson/airArea.json';
-import SensorZone from "./sensor/SensorZone";
-
-import $ from 'jquery';
 
 export const NaverCustomMap = () => {
   const naver = window.naver;
-  // let map;
-
-  const [isMapLoad, setIsMapLoad] = useState(false);
   const [mapObject, setMapObject] = useState(null);
 
-  let arrMarkers = []; // 마커 배열
-  let arrPolyline = []; // 폴리라인 배열
   let features = geoJson.features;
 
   useEffect(() => {
@@ -26,14 +18,10 @@ export const NaverCustomMap = () => {
   }, []);
 
 
-  const removeArrMarkers = arrData => {
-    arrMarkers = arrData;
-  };
-
   const NaverMapInit = () => {
     const mapOptions = {
       center: new naver.maps.LatLng(37.520357, 126.610166),
-      zoom: 16,
+      zoom: 17,
       zoomControl: true,
       // mapTypeId: naver.maps.MapTypeId.HYBRID,
       zoomControlOptions: {
@@ -44,6 +32,7 @@ export const NaverCustomMap = () => {
     };
     const map = new naver.maps.Map('map', mapOptions);
     setMapObject(map);
+
   };
 
   return (
@@ -51,6 +40,7 @@ export const NaverCustomMap = () => {
       <div id='map' style={{ width: '100%', height: '100vh', position: 'absolute' }}>
         {/* 제이쿼리로 그리기 */}
         <JQueryDraw map={mapObject} naver={naver} />
+        {/* <JQueryTest map={mapObject} naver={naver} /> */}
       </div>
       
       {mapObject != null ? (
@@ -61,6 +51,8 @@ export const NaverCustomMap = () => {
           {/* 그리기 도구 모음 불러오는 거 */}
           <DrawMap map={mapObject} naver={naver} />
 
+          {/* <JQueryConv map={mapObject} naver={naver} /> */}
+
         </>
       ) : null}
 

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

@@ -2,6 +2,11 @@ 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'
+
 export const JQueryDraw = props => {
   const {naver} = props;
   const {map} = props;
@@ -102,7 +107,48 @@ export const JQueryDraw = props => {
       }
 
       if (this._polyline) {
-        console.log(this._polyline.getPath())
+        // 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 coords = {
+          "type": "LineString",
+          "coordinates": co
+        };
+
+        const reader = new GeoJSONReader();
+        const writer = new GeoJSONWriter();
+
+        const distance = (100 * 0.001) / 111.12;
+        const line = reader.read(coords);
+        const buffer = BufferOp.bufferOp(line, distance);
+        const polygon = writer.write(buffer);
+
+        // 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]);
+        }
+        console.log(buffers, 'buffers')
+
+        const poly = new naver.maps.Polyline({
+          strokeColor: '#ff0000',
+          strokeWeight: 2,
+          strokeStyle: [4, 4],
+          strokeOpacity: 0.6,
+          path : buffers,
+          map: map
+        })
+
+        console.log(poly, 'poly')
+
+
+
         // 이거 하면 그동안 한거 싹 사라짐 -> 얘를 통해서 drawType이 바뀌면 다 날라가는 걸로 해보면 될듯
         // this._polyline.setMap(null)
         delete this._polyline;
@@ -200,7 +246,7 @@ export const JQueryDraw = props => {
       var map = this.map,
         coord = e.coord;
 
-      console.log(coord, '클릭좌표1');
+      // console.log(coord, '클릭좌표1');
 
       if (!this._polyline) {
         // 임시로 보여줄 점선 폴리라인을 생성합니다.