김민규 / rest_stop_list

Go to a project
Toggle navigation Toggle navigation pinning
지창언
0e52ba09 1 parent 76f81ab7

show highway-line in map

Inline Side-by-side
Showing 3 changed files with 86 additions and 33 deletions
1 var express = require('express') 1 var express = require('express')
2 var router = express.Router(); 2 var router = express.Router();
3 3
4 +
5 +
6 +
4 router.get('/',function(req,res){ 7 router.get('/',function(req,res){
5 res.render('data.csv') 8 res.render('data.csv')
6 }) 9 })
......
...@@ -2,6 +2,8 @@ var express = require('express') ...@@ -2,6 +2,8 @@ var express = require('express')
2 var router = express.Router(); 2 var router = express.Router();
3 3
4 4
5 +
6 +
5 router.get('/',function(req,res){ 7 router.get('/',function(req,res){
6 res.render('index.html') 8 res.render('index.html')
7 }) 9 })
......
...@@ -12,7 +12,7 @@ ...@@ -12,7 +12,7 @@
12 <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css" rel="stylesheet" /> 12 <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css" rel="stylesheet" />
13 <!-- Core theme CSS (includes Bootstrap)--> 13 <!-- Core theme CSS (includes Bootstrap)-->
14 <link href="css/styles.css" rel="stylesheet" /> 14 <link href="css/styles.css" rel="stylesheet" />
15 - <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> 15 +
16 16
17 </head> 17 </head>
18 <body class="d-flex flex-column h-100"> 18 <body class="d-flex flex-column h-100">
...@@ -55,58 +55,106 @@ ...@@ -55,58 +55,106 @@
55 <div class="my-5 text-center text-xl-start"> 55 <div class="my-5 text-center text-xl-start">
56 <h1 class="display-5 fw-bolder text-white mb-2">각 고속도로별 휴게소 지도 오픈 API 삽입 >></h1> 56 <h1 class="display-5 fw-bolder text-white mb-2">각 고속도로별 휴게소 지도 오픈 API 삽입 >></h1>
57 <p class="lead fw-normal text-white-50 mb-4">적당히 텍스트 삽입</p> 57 <p class="lead fw-normal text-white-50 mb-4">적당히 텍스트 삽입</p>
58 - <div class="d-grid gap-3 d-sm-flex justify-content-sm-center justify-content-xl-start"> 58 + <div class="dropdown">
59 - <a class="btn btn-primary btn-lg px-4 me-sm-3" href="#features">이자리 버튼 대신 드랍다운(고속도로선택)</a> 59 + <button class ="btn btn-primary dropdown-toggle " data-bs-toggle="dropdown">
60 - <a class="btn btn-outline-light btn-lg px-4" href="#!">Learn More</a> 60 + 휴게소 선택
61 + </button>
62 + <div class ="dropdown-menu">
63 + <a class="dropdown-item" onclick="showline('0010')">경부선</a>
64 + <a class="dropdown-item" onclick="showline('0600')">서울양양선</a>
65 + <a class="dropdown-item" onclick="showline('0450')">중부내륙선</a>
66 + </div>
61 </div> 67 </div>
62 </div> 68 </div>
63 </div> 69 </div>
64 70
65 <div id="map" style="width:600px;height:400px;"></div> 71 <div id="map" style="width:600px;height:400px;"></div>
66 <script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=c71c02e15245260c3350614980ba87c8"></script> 72 <script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=c71c02e15245260c3350614980ba87c8"></script>
67 - <!-- services와 clusterer, drawing 라이브러리 불러오기 --> 73 + <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
68 - <script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=APIKEY&libraries=services,clusterer,drawing"></script> 74 + <script>
75 + var x;
76 + var y;
77 +
78 + // 경로 생성
79 + var linepath = []
80 + // 아래 함수는 10번 고속도로의 모든 이정표의 x,y 좌표값을 linepath 변수에 저장
81 + $.ajax({
82 + url: 'data.csv',
83 + dataType: 'text',
84 + async: false,
85 + success: function(data){
86 + var allRows = data.split(/\r?\n|\r/);
87 +
88 + for (var singleRow = 0; singleRow < allRows.length; singleRow++) {
89 + var rowCells = allRows[singleRow].split(',');
90 + if(rowCells[0] == '0010'){
91 + linepath.push(new kakao.maps.LatLng(rowCells[3],rowCells[4]))
92 + }
93 + }
94 + var rowCells = allRows[1].split(',');
95 + //linepath.append(new kakao.maps.LatLng(rowCells[3],rowCells[4]))
96 + x = rowCells[3]
97 + y = rowCells[4]
98 + $('#testArea').append(x)
99 +
100 + }
101 + });
102 + //linepath.append(new kakao.maps.LatLng())
103 +
69 104
70 - <script type="text/javascript">
71 var container = document.getElementById('map'); //지도를 담을 영역의 DOM 레퍼런스 105 var container = document.getElementById('map'); //지도를 담을 영역의 DOM 레퍼런스
106 +
72 var options = { //지도를 생성할 때 필요한 기본 옵션 107 var options = { //지도를 생성할 때 필요한 기본 옵션
73 - center: new kakao.maps.LatLng(33.450701, 126.570667), //지도의 중심좌표. 108 + center: new kakao.maps.LatLng(36.137944,128.044905), //지도의 중심좌표.
74 - level: 3 //지도의 레벨(확대, 축소 정도) 109 + level: 13 //지도의 레벨(확대, 축소 정도)
75 }; 110 };
111 + var map = new kakao.maps.Map(container, options); //지도 생성 및 객체 리턴
76 112
77 - var testA1 = [
78 - 210352512672,
79 - 26871772376272,
80 - 7726284477,
81 - 277457742787
82 - ]
83 113
84 - var filename = "/csv" 114 +
85 - // 아래 함수는 10번 고속도로의 모든 이정표의 x,y 좌표값을 linepath 변수에 저장 115 + var polyline = new kakao.maps.Polyline({
116 + path: linepath, // 선을 구성하는 좌표배열 입니다
117 + strokeWeight: 5, // 선의 두께 입니다
118 + strokeColor: '#FF4500', // 선의 색깔입니다
119 + strokeOpacity: 0.7, // 선의 불투명도 입니다 1에서 0 사이의 값이며 0에 가까울수록 투명합니다
120 + strokeStyle: 'solid' // 선의 스타일입니다
121 + });
122 +
123 + polyline.setMap(map)
124 +
125 + function showline(lineNumber){
126 + var container = document.getElementById('map'); //지도를 담을 영역의 DOM 레퍼런스
127 +
128 + var options = { //지도를 생성할 때 필요한 기본 옵션
129 + center: new kakao.maps.LatLng(36.137944,128.044905), //지도의 중심좌표.
130 + level: 13 //지도의 레벨(확대, 축소 정도)
131 + };
132 + var map = new kakao.maps.Map(container, options); //지도 생성 및 객체 리턴
133 + line = []
86 $.ajax({ 134 $.ajax({
87 - url: filename, 135 + url: 'data.csv',
88 dataType: 'text', 136 dataType: 'text',
137 + async: false,
89 success: function(data){ 138 success: function(data){
90 var allRows = data.split(/\r?\n|\r/); 139 var allRows = data.split(/\r?\n|\r/);
91 - $('#testArea').append(allRows) 140 +
141 + for (var singleRow = 0; singleRow < allRows.length; singleRow++) {
142 + var rowCells = allRows[singleRow].split(',');
143 + if(rowCells[0] == lineNumber){
144 + line.push(new kakao.maps.LatLng(rowCells[3],rowCells[4]))
145 + }
146 + }
92 } 147 }
93 }); 148 });
94 -
95 - var linepath = [
96 - new kakao.maps.LatLng(33.452344169439975, 126.56878163224233),
97 - new kakao.maps.LatLng(33.452739313807456, 126.5709308145358),
98 - new kakao.maps.LatLng(33.45178067090639, 126.5726886938753)
99 - ]
100 var polyline = new kakao.maps.Polyline({ 149 var polyline = new kakao.maps.Polyline({
101 - map: map, 150 + path: line, // 선을 구성하는 좌표배열 입니다
102 - path: linepath, 151 + strokeWeight: 5, // 선의 두께 입니다
103 - strokeWeight: 2, 152 + strokeColor: '#FF4500', // 선의 색깔입니다
104 - strokeColor: '#FF00FF', 153 + strokeOpacity: 0.7, // 선의 불투명도 입니다 1에서 0 사이의 값이며 0에 가까울수록 투명합니다
105 - strokeOpacity: 0.8, 154 + strokeStyle: 'solid' // 선의 스타일입니다
106 - strokeStyle: 'dashed'
107 }); 155 });
108 - var map = new kakao.maps.Map(container, options); //지도 생성 및 객체 리턴 156 + polyline.setMap(map)
109 - polyline.set(map) 157 + }
110 </script> 158 </script>
111 </div> 159 </div>
112 </div> 160 </div>
......