odf-guide/html/modifyLayer/moveFeature.html at main · wavus-solution/odf-guide · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
<!DOCTYPE HTML>
<html>
<head>
	<meta charset="utf-8">
	<link href="https://developer.geon.kr/js/odf/odf.css" rel="stylesheet">
	<script type="text/javascript" src="https://developer.geon.kr/js/odf/odf.min.js"></script>
</head>
<body>
	<div id="map" class="odf-view" style="height:550px;"></div>
	<div class="btnLogArea">
		<div class="innerBox">
			<button class="onoffOnlyBtn" onclick="setModifyTarget()">이동 도형 선택</button>
			<button class="onoffOnlyBtn" onclick="save()">저장</button>
		</div>
	</div>
	<p>'이동 도형 선택' 버튼을 클릭하여 이동할 도형을 선택하세요.</p>
	<p>'저장' 버튼 클릭 시 해당 결과값을 받을 수 있습니다.</p>
</body>
<script>

	/* 맵객체 생성 (외부에서 사용할 때는 proxyURL, proxyParam 옵션이 필요합니다.) */
	var mapContainer = document.getElementById('map');
	var coord = new odf.Coordinate(199312.9996,551784.6924);
	var mapOption = {
		center : coord,
		zoom : 11,
		projection : 'EPSG:5186',
		//proxyURL: 'proxyUrl.jsp',
        //proxyParam: 'url',
		vWorldURL : 'https://gsapi.geon.kr/map/api/vworld/wmts',
		basemap : {
			vWorld : ['vWorldBase', 'vWorldWhite', 'vWorldMidnight', 'vWorldHybrid', 'vWorldSatellite'],
		},
    };
	var map = new odf.Map(mapContainer, mapOption);

	//wfs 레이어 생성
	var wfsLayer = odf.LayerFactory.produce('geoserver', {
		method : 'get',
		server : 'https://geoserver.geon.kr/geoserver',
		layer : 'geonpaas:L100000254',
		service : 'wfs',
	});
	wfsLayer.setMap(map);
	wfsLayer.fit();

	//툴팁 메세지 셋팅
	var divElem = document.createElement('div');
	divElem.innerHTML = '이동을 원하는 도형을 클릭하세요.';
	var tooltipMessage = new odf.Marker({
      position: [199312.9996,551784.6924],
      style: {
    	  	element: divElem
      },
	});
	//마우스 이동시 툴팁메세지 위치 이동
	odf.event.addListener(map, 'pointermove', function(event){
		tooltipMessage.setPosition(event.coordinate);
	});

	// 이동된 도형 목록
	var modifyFeature;
	var modifyLayer = odf.LayerFactory.produce('empty',{});
	modifyLayer.setMap(map);
	// 이동된 도형 스타일 정의
	var modifyFeatureStyle = odf.StyleFactory.produce({
	    fill: { color: [0, 0, 0, 0.2] },
	    stroke: {
	      color: 'red',
	      width: 5,
	    },
	  });
	modifyLayer.setStyle(modifyFeatureStyle)


	//이동할 도형 선택 이벤트 리스너 등록 후 비활성화
	var selectFeatureEventId = odf.event.addListener(map, 'click', function(evt) {
		var selectFeature = map.selectFeatureOnClick(evt);
		if(selectFeature.length===0){
			return;
		}

		selectFeature =  selectFeature[0].feature;
		var cloneFeature = selectFeature.clone();
		cloneFeature.setId(selectFeature.getId())
		modifyLayer.addFeature(cloneFeature);
		modifyFeature = cloneFeature;
		map.setDraggableSelectFeature(cloneFeature);

		//툴팁 메세지 제거
		tooltipMessage.removeMap();
		//이동 도형 선택 이벤트 리스너 사용 중지
		odf.event.stateChange(selectFeatureEventId,'stopped');
	});
	odf.event.stateChange(selectFeatureEventId,'stopped');

	//이동할 도형 선택
	function setModifyTarget(){
		//이동 도형 초기화
		clear();
		//툴팁메세지등록
		tooltipMessage.setMap(map);
		//이동할 도형 선택 이벤트 리스너 활성화
		odf.event.stateChange(selectFeatureEventId,'normal');
	}

	// 그린 도형을 서버로 전송
	function save(){
		if(!modifyFeature){
			alert(`이동할 도형이 선택되지 않았습니다. '이동 도형 선택' 버튼을 이용하여 이동할 도형을 선택하여 이동 후 다시 시도하세요.`);
			return;
		}

		// 지오서버에 보낼 xml 문자열
		var xmlText = map.sendToServerModified([modifyFeature], wfsLayer, 'update');
		alert('콘솔 창을 확인하세요.');
		console.log(xmlText);

		// 지오서버에 해당 xml 보내기
		//  'Content-Type': 'application/xml'으로 요청 보내야함

		//이동 도형  초기화
		clear();
		map.setDraggableSelectFeature();
	    map.setDraggableODFFeature(false);

		//툴팁 메세지 제거
		if(tooltipMessage.getMap()){
			tooltipMessage.removeMap();
		}
		//이동 도형 선택 이벤트 리스너 사용 중지
		odf.event.stateChange(selectFeatureEventId,'stopped');
	}


	//이동 도형 초기화
	function clear(){
		modifyFeature = undefined;
		modifyLayer.clear();
	}
</script>
</html>