openlayers 다중 레이어중 원하는 레이어만 선택되도록 설정하는 방법
openlayer를 이용하여 개발을 하다보면 지도위에 여러개의 layer를 등록하게됩니다. 여러개의 레이어중 임의의 레이어만 선택이 가능하게할 수있는 방법을 알려드리겠습니다.
4행~8행 : 배경지도 생성
9행~16행 : 지도의 위치, zoom등 옵션값 등록
18행~20행 : 레이어 생성
22행 : 지도 등록
30행 : 선택이 가능해야하는 레이어 설정
33행 : select 함수 실행 및 선택가능하도록 설정한 레이어 옵션으로 넣어주기
38행 : select기능 지도에 추가
40행 : 기능확인
|
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
|
<script type="text/javascript">
$(document).ready(function(){
//레스터 지도
var vworldRaster = new ol.layer.Tile({
source: new ol.source.XYZ({
url: 'http://xdworld.vworld.kr:8080/2d/Base/201802/{z}/{x}/{y}.png'
})
});
var mapView = new ol.View({
center: [14128579.82, 4512570.74],
projection : "EPSG:3857",
zoom : 3,
minZoom : 3,
maxZoom : 19,
extent : [13678546.51713, 3834188.8033424, 14854453.760059, 5314661.8558898]
});
var layer1 = createVectorLayer('layer1', true, null);
var layer2 = createVectorLayer('layer2', true, null);
var layer3 = createVectorLayer('layer3', true, null);
var map = new ol.Map({
logo : false,
target : 'map',
layers : [vworldRaster, layer1, layer2, layer3],
view : mapView
});
//feature 선택이 가능해야하는 레이어에 set해주기
layer2.set('selectable', true);
//select 기능 함수
var selectResultFt = new ol.interaction.Select({
layers: function(layer) {
return layer.get('selectable') == true;
}
});
map.addInteraction(selectResultFt);
selectResultFt.on('select', function(evt){
alert("선택완료");
});
});
//벡터레이어 생성
function createVectorLayer(id, viewSe, style){
return new ol.layer.Vector({
id : id,
visible : viewSe,
source : new ol.source.Vector(),
style : style
});
}
</script>
<body>
<div id="map"></div>
</body>
|
cs |
저는 layer2 라는 id를 넣어준 레이어(19행 참고)에 선택이 가능하도록 설정해주었습니다. 만약 다른레이어가 선택되도록 변경하고 싶으시다면 30행에 set해주는 부분에 변수명을 변경해주시면 될거같습니다.
가장 중요한 부분이 30행부터 38행까지 같습니다.
오랜만에 글을 올리게 되어 죄송합니다... 앞으로는 좀 더 자주 올리도록 하겠습니다. 새해복 많이 받으세요!!!!
'꿀팁 - OpenLayers, Leaflet' 카테고리의 다른 글
| Openlayers를 이용한 사용자 마커 화면저장(PDF) (4) | 2019.06.14 |
|---|---|
| Openlayers Flights (0) | 2019.06.12 |
| leaflet SHP 파일 올리기 (0) | 2019.05.14 |
| leaflet에서 D3를 이용한 TSP(traveling salesman problem) 활용 (0) | 2019.04.05 |
| Web Socket을 이용하여 실시간 변경되는 상태정보 표시 (0) | 2019.03.29 |