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

Openlayers3에서 전세계 공항의 위치 정보를 이용한 지도 표출을 알아보겠습니다. 먼저 결과화면을 확인해보겠습니다.

 

배경지도는 Openlayers3를 이용하였으며, 공항 위치정보 데이터 또한 Openlayers에서 제공하는 데이터를 이용하였습니다.
원래는 국내공항의 위치정보를 이용하여 기능을 보여드리려 하였지만 비행이동이 화려하게 표현되지 못해 Openlayers에서 제공하는 데이터를 그대로 사용하였습니다. 
 
전세계 공항 정보 .json 데이터는 아래에 첨부파일 다운로드 받으시면 됩니다.
flights.json
다운로드

그리고 위 화면처럼 타원을 그리며 비행기가 날아가도록 하기위해 별도의 모듈을 이용했습니다.

arc.js
다운로드

 

1. Flights.jsp

1
2
3
4
5
6
7
8
9
10
<head>
<title>flights</title>
<meta charset="utf-8">
 
<link type="text/css" rel="stylesheet" href="<c:url value='/css/openlayers/ol.css'/>" />
 
<script src="<c:url value='/js/openlayers/ol.js'/>"></script>
<script src="<c:url value='/js/arc/arc.js'/>"></script>
 
</head>
 cs

지금까지 등록된 Openlayers 예제를 보셨다면 소스는 쉽게 이해하실 수 있으실 겁니다. 먼저 <script></script>부분을 살펴보도록하겠습니다.

    • 3행~21행 : Openlayers3 지도 로드
    • 23행 : 비행 이동 경로(라인) 스타일
    • 31행 : 66행을 통해 비행 이동 시작 및 flightsSource에 feature 정보 넣기
    • 40행 : 66행을 통해 비행 이동 도착
    • 66행 : 공항 위치정보 json에 있는 위치정보를 이용하여 시작점/도착점 설정
    • 100행 : 비행이동 경로 지도에 표출
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
<script type="text/javascript">
$(document).ready(function(){
    var map = new ol.Map({
        target: 'map',
        layers: [
            new ol.layer.Tile({
                source: new ol.source.Stamen({
                    wrapX: false,
                    layer: 'toner'
                })
            })
        ],
        view: new ol.View({
            //경도,위도
            center: [1987706.31,4522199.26],
            zoom: 3,
            minZoom: 3,
            maxZoom: 19
        }),
        
      });
    
    var style = new ol.style.Style({
        stroke: new ol.style.Stroke({
            color: '#FF4233',
            width: 2
        })
    });
    
    var flightsSource;
    var addLater = function(feature, timeout) {
        window.setTimeout(function() {
            feature.set('start', new Date().getTime());
            flightsSource.addFeature(feature);
        }, timeout);
    };
    
    var pointsPerMs = 0.1;
    
    var animateFlights = function(event) {
        var vectorContext = event.vectorContext;
        var frameState = event.frameState;
        vectorContext.setStyle(style);
        
        var features = flightsSource.getFeatures();
        for (var i = 0; i < features.length; i++) {
            var feature = features[i];
            if (!feature.get('finished')) {
                var coords = feature.getGeometry().getCoordinates();
                var elapsedTime = frameState.time - feature.get('start');
                var elapsedPoints = elapsedTime * pointsPerMs;
                
                if (elapsedPoints >= coords.length) {
                    feature.set('finished', true);
                }
                
                var maxIndex = Math.min(elapsedPoints, coords.length);
                var currentLine = new ol.geom.LineString(coords.slice(0, maxIndex));
            
                vectorContext.drawGeometry(currentLine);
            }
        }
        map.render();
    };
    
    flightsSource = new ol.source.Vector({
        wrapX: false,
        loader: function() {
            var url = "/js/data/geojson/flights.json";
            fetch(url).then(function(response) {
                return response.json();
            }).then(function(json) {
                var flightsData = json.flights;
                for (var i = 0; i < flightsData.length; i++) {
                    var flight = flightsData[i];
                    var from = flight[0];
                    var to = flight[1];
                    
                    var arcGenerator = new arc.GreatCircle(
                        {x: from[1], y: from[0]},
                        {x: to[1], y: to[0]});
                    
                    var arcLine = arcGenerator.Arc(100, {offset: 10});
                    if (arcLine.geometries.length === 1) {
                        var line = new ol.geom.LineString(arcLine.geometries[0].coords);
                        line.transform(ol.proj.get('EPSG:4326'), ol.proj.get('EPSG:3857'));
                        
                        var feature = new ol.Feature({
                            geometry: line,
                            finished: false
                        });
                        addLater(feature, i * 50);
                    }
                }
            map.on('postcompose', animateFlights);
            });
        }
    });
 
    var flightsLayer = new ol.layer.Vector({
        source: flightsSource,
        style: function(feature) {
            if (feature.get('finished')) {
                return style;
            } else {
              return null;
            }
        }
    });
    map.addLayer(flightsLayer);
});
 
</script>
 
 cs

<body></body>및 <style></style>부분입니다.

1
2
3
4
5
6
7
8
9
<style>
#map {
    height:730px;
}
</style>
 
<body>
    <div id="map"></div>
</body>
 cs

2. 결과화면

저작자표시 변경금지

'꿀팁 - OpenLayers, Leaflet' 카테고리의 다른 글

openlayers 다중 레이어중 원하는 레이어만 select 기능 활성화시키기  (0) 2019.12.20
Openlayers를 이용한 사용자 마커 화면저장(PDF)  (4) 2019.06.14
leaflet SHP 파일 올리기  (0) 2019.05.14
leaflet에서 D3를 이용한 TSP(traveling salesman problem) 활용  (0) 2019.04.05
Web Socket을 이용하여 실시간 변경되는 상태정보 표시  (0) 2019.03.29

+ Recent posts

티스토리툴바