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. 결과화면

+ Recent posts