김민규 / 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 90 additions and 37 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,8 +12,8 @@ ...@@ -12,8 +12,8 @@
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">
19 <main class="flex-shrink-0"> 19 <main class="flex-shrink-0">
...@@ -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>
69 - 75 + var x;
70 - <script type="text/javascript"> 76 + var y;
71 - var container = document.getElementById('map'); //지도를 담을 영역의 DOM 레퍼런스
72 - var options = { //지도를 생성할 때 필요한 기본 옵션
73 - center: new kakao.maps.LatLng(33.450701, 126.570667), //지도의 중심좌표.
74 - level: 3 //지도의 레벨(확대, 축소 정도)
75 - };
76 77
77 - var testA1 = [ 78 + // 경로 생성
78 - 210352512672, 79 + var linepath = []
79 - 26871772376272,
80 - 7726284477,
81 - 277457742787
82 - ]
83 -
84 - var filename = "/csv"
85 // 아래 함수는 10번 고속도로의 모든 이정표의 x,y 좌표값을 linepath 변수에 저장 80 // 아래 함수는 10번 고속도로의 모든 이정표의 x,y 좌표값을 linepath 변수에 저장
86 $.ajax({ 81 $.ajax({
87 - url: filename, 82 + url: 'data.csv',
88 dataType: 'text', 83 dataType: 'text',
84 + async: false,
89 success: function(data){ 85 success: function(data){
90 var allRows = data.split(/\r?\n|\r/); 86 var allRows = data.split(/\r?\n|\r/);
91 - $('#testArea').append(allRows) 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 +
92 } 100 }
93 }); 101 });
102 + //linepath.append(new kakao.maps.LatLng())
103 +
104 +
105 + var container = document.getElementById('map'); //지도를 담을 영역의 DOM 레퍼런스
94 106
95 - var linepath = [ 107 + var options = { //지도를 생성할 때 필요한 기본 옵션
96 - new kakao.maps.LatLng(33.452344169439975, 126.56878163224233), 108 + center: new kakao.maps.LatLng(36.137944,128.044905), //지도의 중심좌표.
97 - new kakao.maps.LatLng(33.452739313807456, 126.5709308145358), 109 + level: 13 //지도의 레벨(확대, 축소 정도)
98 - new kakao.maps.LatLng(33.45178067090639, 126.5726886938753) 110 + };
99 - ] 111 + var map = new kakao.maps.Map(container, options); //지도 생성 및 객체 리턴
112 +
113 +
114 +
100 var polyline = new kakao.maps.Polyline({ 115 var polyline = new kakao.maps.Polyline({
101 - map: map, 116 + path: linepath, // 선을 구성하는 좌표배열 입니다
102 - path: linepath, 117 + strokeWeight: 5, // 선의 두께 입니다
103 - strokeWeight: 2, 118 + strokeColor: '#FF4500', // 선의 색깔입니다
104 - strokeColor: '#FF00FF', 119 + strokeOpacity: 0.7, // 선의 불투명도 입니다 1에서 0 사이의 값이며 0에 가까울수록 투명합니다
105 - strokeOpacity: 0.8, 120 + strokeStyle: 'solid' // 선의 스타일입니다
106 - strokeStyle: 'dashed'
107 }); 121 });
108 - var map = new kakao.maps.Map(container, options); //지도 생성 및 객체 리턴 122 +
109 - polyline.set(map) 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 = []
134 + $.ajax({
135 + url: 'data.csv',
136 + dataType: 'text',
137 + async: false,
138 + success: function(data){
139 + var allRows = data.split(/\r?\n|\r/);
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 + }
147 + }
148 + });
149 + var polyline = new kakao.maps.Polyline({
150 + path: line, // 선을 구성하는 좌표배열 입니다
151 + strokeWeight: 5, // 선의 두께 입니다
152 + strokeColor: '#FF4500', // 선의 색깔입니다
153 + strokeOpacity: 0.7, // 선의 불투명도 입니다 1에서 0 사이의 값이며 0에 가까울수록 투명합니다
154 + strokeStyle: 'solid' // 선의 스타일입니다
155 + });
156 + polyline.setMap(map)
157 + }
110 </script> 158 </script>
111 </div> 159 </div>
112 </div> 160 </div>
......