반응형
vworld에서 받은 데이터 중에 일부 지역은 일정 간격 틀어져 있다.
틀어진 데이터를 보정하기 위한 기능을 구현.
네이버나 카카오는 폴리곤에 move 이벤트가 없어서, 마커의 move 이벤트를 사용하였다.
폴리곤의 센터 좌표를 알고 있어서, 해당 센터좌표에 마커를 놓고 마커를 클릭해서 이동할 시에 폴리곤도 이동하게 하였다. 정확히 말하면, 이동 전 좌표를 지우고, 다시 그리는 방식이다. 현재는 한개의 폴리곤만 하였지만, 조건만 맞다면, 일괄로 여러개의 폴리곤도 이동할 수 있다. vworld 데이터를 분석 해보면, 일정 길이 만큼 동일하게 틀어져 있다는 것을 알 수 있다. 보정은 db에서 하는 방법도 있을 것이고, 직접 하는 방법도 있는데, 지금은 지도에서 작업하는 것으로 하였다. 지도에서 폴리곤을 일괄로 이동하고 싶다면, 소스에서 조금만 추가해주면 가능하다. 옮기고 싶은 것을 선택한 다음에 하는 방법도 있을 것이고, 전체를 이동하는 방법도 있을 것이다. 응용은 각자 상황에 맞춰서...
소스에는 원활한 테스트를 위해서 샘플 폴리곤도 포함되어 있으며, 카카오도 일부만 수정하면, 작동할 것이다.
개발환경
vue.js 3.2.13
전체 소스
<template>
<pre>
폴리곤 이동 기능
마커 클릭하고 드래그 하면 폴리곤이 이동함
</pre>
<div id="map" style="width:1000px;height:800px"></div>
</template>
<script>
var nMap
var polygonObject = []//{'polygon' : polygon, 'marker': marker, 'update': 'N'}
export default {
name: 'NaverpolygonMove'
, components: {
}
, data() {
return {
polygonJson : []
, polygonPath : undefined
, polygon : undefined
, changedJson :[]
, movePolygon : undefined
, movePolygonPath : undefined //json 형태
, movePath : undefined //네이버 좌표 객체
, moveCenterPoint :undefined
, moveArrPosition : undefined
}
}
, mounted() {
this.polygonJson = this.jsonData() //데이터 초기화
this.initMap()
}
, methods: {
initMap()
{
var mapOptions = {
center: new naver.maps.LatLng(36.3739347301061, 128.246483312968)
, zoom: 18
, scaleControl: false //우하단 축척
, logoControl: false //네이버 로고 뭔지 모르겠음.
, mapDataControl: false //좌하단 네이버 로고
, mapTypeControl: true //지도 유형 컨트롤
, zoomControl: true //줌 컨트롤
, disableDoubleClickZoom : true//더블 클릭해 지도를 확대하는 기능의 사용 여부
, mapTypeId: naver.maps.MapTypeId.NORMAL//SATELLITE //HYBRID
};
nMap = new naver.maps.Map('map', mapOptions)
var cadastralLayer = new naver.maps.CadastralLayer();
cadastralLayer.setMap(nMap);
//cadastralLayer.getMap()
this.drawing()
}
, drawing()
{
var polygonPath
for(var i=0; i< this.polygonJson.length; i++ )
{
polygonPath = []
for(var j=0; j< this.polygonJson[i].polygon.length; j++)
polygonPath.push(new naver.maps.LatLng(this.polygonJson[i].polygon[j].latitude, this.polygonJson[i].polygon[j].longitude))
var polygon = this.drawPolygon(polygonPath)
var marker = this.drawMarker(this.polygonJson[i].center)
polygonObject.push({'polygon' : polygon, 'marker': marker, 'update': 'N'})//전역
}
}
//#region draw overlay
, drawPolygon(polygonPath)
{
var polygon = new naver.maps.Polygon({
paths: polygonPath
, strokeColor: '#FF0000'
, strokeOpacity: 0.8
, strokeWeight: 2
, fillColor: '#FF0000'
, fillOpacity: 0.35
, zIndex: 1
, clickable: true
, map: nMap
})
return polygon
}
, drawMarker(center)
{
var centerPoint = new naver.maps.LatLng(center.latitude, center.longitude)
//이미지 마커
var imageMarkerOptions = {
position: centerPoint
, map: nMap
, icon: {
url: require('@/images/flags_1.svg')
, size: new naver.maps.Size(22, 35)
, origin: new naver.maps.Point(0, 0)
, anchor: new naver.maps.Point(11, 35)
}
};
var imageMarker = new naver.maps.Marker(imageMarkerOptions)
imageMarker.setDraggable(true)
//marker event
naver.maps.Event.addListener(imageMarker, 'mousedown', this.markerMouseDown)
naver.maps.Event.addListener(imageMarker, 'drag', this.markerDrag)
naver.maps.Event.addListener(imageMarker, 'dragend', this.markerDragend)
return imageMarker
}
//#endregion draw overlay
//#region map event
, markerMouseDown(e)
{
console.log("markerMouseDown" + e)
for(var i=0; i< polygonObject.length; i++)
{
if(e.overlay == polygonObject[i].marker )
{
this.moveCenterPoint = new naver.maps.LatLng(this.polygonJson[i].center.latitude, this.polygonJson[i].center.longitude)
this.movePolygonPath = this.polygonJson[i].polygon
this.moveArrPosition = i
}
}
var paths = []
for(var j=0; j< this.movePolygonPath.length; j++)
paths.push(new naver.maps.LatLng(this.movePolygonPath[j].latitude, this.movePolygonPath[j].longitude))
this.movePolygon = new naver.maps.Polygon({
paths: paths
, strokeColor: '#333399'
, strokeOpacity: 0.8
, strokeWeight: 2
, fillColor: '#FFFF66'
, fillOpacity: 0.35
, zIndex: 1
, clickable: true
, map: nMap
})
this.movePolygon.setStyles('strokeWeight', 5)
this.movePolygon.setStyles('fillOpacity', 0.1)
}
, markerDrag(e)
{
const that = this
var latitude = e.coord.y - that.moveCenterPoint._lat
var longitude = e.coord.x - that.moveCenterPoint._lng
this.moveCenterPoint = new naver.maps.LatLng(that.moveCenterPoint._lat + latitude, that.moveCenterPoint._lng + longitude)
var paths = []
for(var i=0; i< that.movePolygonPath.length; i++)
{
that.movePolygonPath[i].latitude = that.movePolygonPath[i].latitude + latitude
that.movePolygonPath[i].longitude = that.movePolygonPath[i].longitude + longitude
console.log("value" + that.movePolygonPath[i].latitude + "-" + that.movePolygonPath[i].longitude)
paths.push(new naver.maps.LatLng(that.movePolygonPath[i].latitude, that.movePolygonPath[i].longitude))
}
this.movePath = paths
this.movePolygon.setPath(paths)
}
, markerDragend()
{
console.log('markerDragend')
//센터 좌표
polygonObject[this.moveArrPosition].polygon.setPath(this.movePath)//전역
polygonObject[this.moveArrPosition].update = 'Y'//전역
this.polygonJson[this.moveArrPosition].center.latitude = polygonObject[this.moveArrPosition].marker.getPosition()._lat
this.polygonJson[this.moveArrPosition].center.longitude = polygonObject[this.moveArrPosition].marker.getPosition()._lng
this.polygonJson[this.moveArrPosition].polygon = this.movePolygonPath
//변경된 값 넣기
// this.movePolygonPath json 형태임
this.changedJson.push({'key': 111, 'path':this.movePolygonPath, 'center': this.polygonJson[this.moveArrPosition].center})
this.movePolygon.setMap(null)
}
//#endregion map event
//#region function
, polygonCenterLatLng(points) {//폴리곤 중심좌표 구하기
var i, j, len, p1, p2, f, area, x, y;
area = x = y = 0;
//La y //Ma x
for (i = 0, len = points.length, j = len - 1; i < len; j = i++) {
p1 = points[i];
p2 = points[j];
f = p1.latitude * p2.longitude - p2.latitude * p1.longitude;
x += (p1.longitude + p2.longitude) * f;
y += (p1.latitude + p2.latitude) * f;
area += f * 3;
}
return new naver.maps.LatLng(y/area, x/area);
}
//#endregion function
//#region polygonJson
, jsonData()
{
return [{
"center": {
"latitude": 36.3729621256801,
"longitude": 128.245734927827
},
"polygon": [{
"latitude": 36.373273291257625,
"longitude": 128.24636075407653
}, {
"latitude": 36.37242146953989,
"longitude": 128.24543986497363
}, {
"latitude": 36.37265096010265,
"longitude": 128.24510735861975
}, {
"latitude": 36.373342207848715,
"longitude": 128.2458585260417
}, {
"latitude": 36.37331242957403,
"longitude": 128.24598038787715
}, {
"latitude": 36.373295272176634,
"longitude": 128.24611728254771
}, {
"latitude": 36.373273291257625,
"longitude": 128.24636075407653
}]
}, {
"center": {
"latitude": 36.3739347301061,
"longitude": 128.246483312968
},
"polygon": [{
"latitude": 36.374316704441355,
"longitude": 128.24624828620517
}, {
"latitude": 36.37425498384133,
"longitude": 128.24632226258362
}, {
"latitude": 36.37413312919678,
"longitude": 128.2464061582349
}, {
"latitude": 36.37414352186506,
"longitude": 128.24642222694575
}, {
"latitude": 36.3738946709876,
"longitude": 128.2468032072734
}, {
"latitude": 36.37378626608178,
"longitude": 128.24687790114854
}, {
"latitude": 36.373764610467916,
"longitude": 128.24684349890617
}, {
"latitude": 36.373808431248364,
"longitude": 128.2467875369106
}, {
"latitude": 36.37352064774131,
"longitude": 128.2464948615696
}, {
"latitude": 36.37356986984242,
"longitude": 128.24647083998033
}, {
"latitude": 36.37369019671898,
"longitude": 128.24639187405032
}, {
"latitude": 36.373831862318134,
"longitude": 128.24628575685782
}, {
"latitude": 36.37397478922463,
"longitude": 128.24620098903753
}, {
"latitude": 36.3741806201898,
"longitude": 128.2460783712889
}, {
"latitude": 36.374316704441355,
"longitude": 128.24624828620517
}]
}, {
"center": {
"latitude": 36.3740940302007,
"longitude": 128.246597173672
},
"polygon": [{
"latitude": 36.37424350438672,
"longitude": 128.24658354767436
}, {
"latitude": 36.374041729651445,
"longitude": 128.2467149729267
}, {
"latitude": 36.37390346447207,
"longitude": 128.24681022540273
}, {
"latitude": 36.373897479872504,
"longitude": 128.2468143505584
}, {
"latitude": 36.37414633074996,
"longitude": 128.24643337023076
}, {
"latitude": 36.37424350438672,
"longitude": 128.24658354767436
}]
}, {
"center": {
"latitude": 36.3742996441858,
"longitude": 128.246409128833
},
"polygon": [{
"latitude": 36.37432195704825,
"longitude": 128.24625276015718
}, {
"latitude": 36.37435483074551,
"longitude": 128.246289795334
}, {
"latitude": 36.374426843226715,
"longitude": 128.24633711656006
}, {
"latitude": 36.374481906134605,
"longitude": 128.24638602805837
}, {
"latitude": 36.37442599916677,
"longitude": 128.24644737844216
}, {
"latitude": 36.37427733132329,
"longitude": 128.2465548899044
}, {
"latitude": 36.374245948108715,
"longitude": 128.24657687834136
}, {
"latitude": 36.374148774471955,
"longitude": 128.24642670089776
}, {
"latitude": 36.374138381803675,
"longitude": 128.2464106321869
}, {
"latitude": 36.37426023644823,
"longitude": 128.24632673653562
}, {
"latitude": 36.37432195704825,
"longitude": 128.24625276015718
}]
}, {
"center": {
"latitude": 36.3742737739025,
"longitude": 128.246712141142
},
"polygon": [{
"latitude": 36.374646336282744,
"longitude": 128.2466656090156
}, {
"latitude": 36.37457373367505,
"longitude": 128.2466931663212
}, {
"latitude": 36.37447398787723,
"longitude": 128.24674630382466
}, {
"latitude": 36.374264899801894,
"longitude": 128.24687981660173
}, {
"latitude": 36.374199215188185,
"longitude": 128.24691834992277
}, {
"latitude": 36.374036897221146,
"longitude": 128.2470291455494
}, {
"latitude": 36.37403128924295,
"longitude": 128.24703297732773
}, {
"latitude": 36.37391122487397,
"longitude": 128.24679258080874
}, {
"latitude": 36.374049490053345,
"longitude": 128.24669732833271
}, {
"latitude": 36.37425126478862,
"longitude": 128.24656590308038
}, {
"latitude": 36.374282648003195,
"longitude": 128.2465439146434
}, {
"latitude": 36.37443131584667,
"longitude": 128.24643640318118
}, {
"latitude": 36.37448722281451,
"longitude": 128.2463750527974
}, {
"latitude": 36.37455738998487,
"longitude": 128.24645264665472
}, {
"latitude": 36.37459561059645,
"longitude": 128.24651870379356
}, {
"latitude": 36.374629899118766,
"longitude": 128.24660852354833
}, {
"latitude": 36.374646336282744,
"longitude": 128.2466656090156
}]
}, {
"center": {
"latitude": 36.3731467674004,
"longitude": 128.245337062708
},
"polygon": [{
"latitude": 36.37337646845712,
"longitude": 128.24588674781572
}, {
"latitude": 36.372685220711055,
"longitude": 128.24513558039376
}, {
"latitude": 36.37291706634373,
"longitude": 128.2447909030994
}, {
"latitude": 36.3735833886709,
"longitude": 128.24550475763257
}, {
"latitude": 36.37350957445842,
"longitude": 128.24558860133808
}, {
"latitude": 36.37345250864926,
"longitude": 128.24568465199363
}, {
"latitude": 36.37337646845712,
"longitude": 128.24588674781572
}]
}]
}
//#endregion polygonJson
}
}
</script>
<style scoped>
</style>
맵 기본 설정은 아래 글 참조.
반응형
'Vue.js' 카테고리의 다른 글
| Naver Directions 15(네이버 길찾기) (78) | 2023.03.16 |
|---|---|
| javascript json object 복사 (149) | 2023.02.09 |
| DevExtreme DataGrid multi header (vue.js) (2) | 2022.09.17 |
| DevExtreme DataGrid check box 정렬 (vue.js) (3) | 2022.09.17 |
| DevExtreme DataGrid 컬럼 정렬 (vue.js) (1) | 2022.09.16 |
댓글