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.824512570.74],
            projection : "EPSG:3857",
            zoom : 3,
            minZoom : 3,
            maxZoom : 19,
            extent : [13678546.517133834188.803342414854453.7600595314661.8558898]
        });
        
        var layer1 = createVectorLayer('layer1'truenull);
        var layer2 = createVectorLayer('layer2'truenull);
        var layer3 = createVectorLayer('layer3'truenull);
        
        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행까지 같습니다. 

오랜만에 글을 올리게 되어 죄송합니다... 앞으로는 좀 더 자주 올리도록 하겠습니다. 새해복 많이 받으세요!!!!

+ Recent posts