openlayers3(이하 OL3)와 Leaflet Feature Click Event 이벤트를 알아보겠습니다.
> 서비스바로가기
Openlayers3 와 Leaflet 라이브러리를 받을 수 있는 곳은 아래와 같습니다.
OpenLayers3 사이트 : https://openlayers.org/
Leaflet 사이트 : http://leafletjs.com/
VWORLD 사이트 : http://map.vworld.kr
1. Openlayers3(OL3)
<script></script>부분은 아래와 같습니다.
3행~15행 : wfs 데이터 불러오기
35행~ 46행 : OL3 지도 띄우기
48행~96행 : Feature Click 기능 구현
|
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
|
<script type="text/javascript">
//wfs 불러오기
var vectorSource = new ol.source.Vector({
format : new ol.format.GeoJSON(),
url: function(extent) {
return 'http://*.***.**.***:8080/geoserver/progworks/wfs?service=WFS&' +
'version=1.1.0&'+
'request=GetFeature&'+
'typename=progworks:z_upis_c_uq152&' +
'outputFormat=application/json&'+
'srsname=EPSG:3857&' +
'bbox=' + extent.join(',') + ',EPSG:3857';
},
strategy: ol.loadingstrategy.bbox
})
//레스터 지도
var raster = new ol.layer.Tile({
source: new ol.source.XYZ({
url: 'http://xdworld.vworld.kr:8080/2d/Base/201802/{z}/{x}/{y}.png'
})
});
var vector = new ol.layer.Vector({
source: vectorSource,
style: new ol.style.Style({
stroke: new ol.style.Stroke({
color: 'rgba(0, 0, 255, 1.0)',
width: 2
})
})
});
//지도띄우기
var map = new ol.Map({
layers: [raster,vector],
target: document.getElementById('map'),
view: new ol.View({
center: [14128579.82, 4512570.74],
maxZoom: 19,
zoom: 14
})
});
var select = null;
var selectSingleClick = new ol.interaction.Select({
multi: true
});
var selectClick = new ol.interaction.Select({
condition: ol.events.condition.click,
multi: true
});
var selectPointerMove = new ol.interaction.Select({
condition: ol.events.condition.pointerMove,
multi: true
});
var selectAltClick = new ol.interaction.Select({
condition: function(mapBrowserEvent) {
return ol.events.condition.click(mapBrowserEvent) &&
ol.events.condition.altKeyOnly(mapBrowserEvent);
},
multi: true
});
var selectElement = document.getElementById('type');
var changeInteraction = function() {
if (select !== null) {
map.removeInteraction(select);
}
var value = selectElement.value;
if (value == 'singleclick') {
select = selectSingleClick;
} else if (value == 'click') {
select = selectClick;
} else if (value == 'pointermove') {
select = selectPointerMove;
} else if (value == 'altclick') {
select = selectAltClick;
} else {
select = null;
}
if (select !== null) {
map.addInteraction(select);
}
};
selectElement.onchange = changeInteraction;
changeInteraction();
</script>
|
cs |
<body></body>부분은 아래와 같습니다.
|
1
2
3
|
<body>
<div id="map"></div>
</body>
|
cs |
2. Leaflet
<script></script>부분은 아래와 같습니다.
4행 : leaflet 지도 띄우기
7행 : VWORLD 지도로 변경
9행 : wfs데이터 URL 설정
11행~19행 : 파라메타 설정
27행~51행 : wfs 로드 및 클릭이벤트 구현
|
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
|
<script type="text/javascript">
//leaflet 지도 띄우기
var leafletMap = L.map('leafletMap').setView([37.52470308242787, 126.9234],14)
//Vworld Tile 변경
L.tileLayer('http://xdworld.vworld.kr:8080/2d/Base/201802/{z}/{x}/{y}.png').addTo(leafletMap);
var owsrootUrl = 'http://*.***.**.***:8080/geoserver/progworks/wfs';
var defaultParameters = {
service : 'WFS',
version : '1.1.0',
request : 'GetFeature',
typeName : 'progworks:z_upis_c_uq152',
outputFormat : 'application/json',
format_options : 'callback:getJson',
SrsName : 'EPSG:4326',
};
var parameters = L.Util.extend(defaultParameters);
var URL = owsrootUrl + L.Util.getParamString(parameters);
var WFSLayer = null;
var selected;
var ajax = $.ajax({
url : URL,
dataType : 'json',
jsonpCallback : 'getJson',
success: function(response) {
WFSLayer = L.geoJson(response, {
style: function (feature) {
return{
color: '#0000FF',
weight: 4
};
}
}).on('click', function (e) {
if (selected) {
e.target.resetStyle(selected)
}
selected = e.layer
selected.bringToFront()
selected.setStyle({
'color': 'red'
})
}).addTo(leafletMap)
}
});
</script>
|
cs |
<body></body>부분은 아래와 같습니다.
|
1
2
3
|
<body>
<div id="leafletMap"></div>
</body>
|
cs |
3. 결과화면
'꿀팁 - OpenLayers, Leaflet' 카테고리의 다른 글
| leaflet에서 D3를 이용한 TSP(traveling salesman problem) 활용 (0) | 2019.04.05 |
|---|---|
| Web Socket을 이용하여 실시간 변경되는 상태정보 표시 (0) | 2019.03.29 |
| Openlayers3와 Leaflet에서 D3 TopoJson 이용하기 (0) | 2019.01.30 |
| OpenLayers와 Leaflet에서 User Control 등록하기(거리재기) (0) | 2019.01.11 |
| OpenLayers와 Leaflet에서 Feature 이벤트 연동 (2) | 2018.11.29 |