|
|
|
|
@ -2,10 +2,6 @@ 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 {BufferOp} from 'jsts/org/locationtech/jts/operation/buffer' |
|
|
|
|
|
|
|
|
|
export const JQueryDraw = props => { |
|
|
|
|
const {naver} = props; |
|
|
|
|
const {map} = props; |
|
|
|
|
@ -107,54 +103,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++) { |
|
|
|
|
|
|
|
|
|
//파싱
|
|
|
|
|
let obj = new Object(); |
|
|
|
|
|
|
|
|
|
obj.x = '' + polypaths[i]._lng + ''; |
|
|
|
|
obj.y = '' + polypaths[i]._lat + ''; |
|
|
|
|
|
|
|
|
|
const reader = new GeoJSONReader(); |
|
|
|
|
const writer = new GeoJSONWriter(); |
|
|
|
|
obj = JSON.stringify(obj); |
|
|
|
|
polypathJSON.push(JSON.parse(obj));
|
|
|
|
|
} |
|
|
|
|
console.log(polypathJSON, 'json polyline path') |
|
|
|
|
|
|
|
|
|
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]); |
|
|
|
|
//버퍼 생성에 필요한 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(buffers, 'buffers') |
|
|
|
|
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'}); |
|
|
|
|
|
|
|
|
|
const poly = new naver.maps.Polyline({ |
|
|
|
|
//버퍼 라인 생성
|
|
|
|
|
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(); |
|
|
|
|
@ -240,13 +249,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({ |
|
|
|
|
@ -274,9 +326,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; |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
|
|
|
|
|
@ -519,11 +578,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(); |
|
|
|
|
@ -589,12 +648,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> |
|
|
|
|
|
sanguu
2 years ago