diff --git a/src/components/mapDraw/naver/NaverMap.js b/src/components/mapDraw/naver/NaverMap.js
index 0562a90..91778cc 100644
--- a/src/components/mapDraw/naver/NaverMap.js
+++ b/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 geoJson from '../geojson/airArea.json';
-import SensorZone from "./sensor/SensorZone";
-
-import $ from 'jquery';
+import { JQueryTest } from './draw/JQueryTest';
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 = () => {
{/* 제이쿼리로 그리기 */}
+ {/* */}
{mapObject != null ? (
@@ -61,6 +51,8 @@ export const NaverCustomMap = () => {
{/* 그리기 도구 모음 불러오는 거 */}
+ {/* */}
+
>
) : null}
diff --git a/src/components/mapDraw/naver/draw/JQueryDraw.js b/src/components/mapDraw/naver/draw/JQueryDraw.js
index ffeaef9..c5cccf2 100644
--- a/src/components/mapDraw/naver/draw/JQueryDraw.js
+++ b/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) {
// 임시로 보여줄 점선 폴리라인을 생성합니다.