|
|
|
@ -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) { |
|
|
|
|
// 임시로 보여줄 점선 폴리라인을 생성합니다.
|
|
|
|
|