Merge branch 'feature/Location' into feature/react.js

# Conflicts: # package-lock.json # package.json

Merge branch 'feature/Location' into feature/react.js
# Conflicts: # package-lock.json # package.json
맹주환
Commit 5a8edf5c2ac6b425bb019838bf47d6caeafa0f49 5a8edf5c 2 parents 2f615b2d 862e3743
Showing 8 changed files with 262 additions and 0 deletions
html/index.html
html/map.js
html/style.css
import/Weather.js
readme.md
run_server.js
기상청41_단기예보 조회서비스_오픈API활용가이드_최종/기상청41_단기예보 조회서비스_오픈API활용가이드_격자_위경도(20210401).xlsx
기상청41_단기예보 조회서비스_오픈API활용가이드_최종/기상청41_단기예보 조회서비스_오픈API활용가이드_최종.docx
--- a/html/index.html 0 → 100644
View file @5a8edf5
+++ b/html/index.html 0 → 100644
View file @5a8edf5
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Take an Umbrella</title>
+    <meta charset="UTF-8">
+    <link rel="stylesheet" type="text/css" href="style.css" />
+  </head>
+  <body>
+    <h1 style="font-family:Nanum Gothic;"> Take an Umbrella </h1>
+    <h3 style="font-family:Nanum Gothic;"> 철학과 2017101598 맹주환 </h3>
+    <pre align="center" style="font-family:Nanum Gothic;" font size="20">
+        반가워요!
+        Take an umbrella는 스마트 조명 제품 Philips hue API와 기상청 공공데이터 날씨 API로 구성되어 있어요.
+        Hue가 연결된 WI-FI로 접속하셔서 아래의 지도로 현재 위치를 조회하시면, 해당 지역 기상 예보를 받아와 조명을 통해 우산을 챙겨야 하는지 알려줘요!
+      </pre>
+    <div id="map"></div>
+    <!-- Async script executes immediately and must be after any DOM elements used in callback. -->
+
+    <h1 style="font-family:Nanum Gothic;"> 당신의 현재 위치 </h1>
+    <div align="center">현재 위도: <span id="lat"></span></div>
+	  <div align="center">현재 경도: <span id="lng"></span></div>
+  </body>
+  <script src="map.js"></script>
+  <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
+  <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAguo3zH8vWZJbzXEqyp8D8UvnBh3zX8rQ&callback=initMap&v=weekly" async> </script>
+</html>
\ No newline at end of file
--- a/html/map.js 0 → 100644
View file @5a8edf5
+++ b/html/map.js 0 → 100644
View file @5a8edf5
+// Note: This example requires that you consent to location sharing when
+// prompted by your browser. If you see the error "The Geolocation service
+// failed.", it means you probably did not give permission for the browser to
+// locate you.
+
+let map, infoWindow;
+
+function initMap() {
+  map = new google.maps.Map(document.getElementById("map"), {
+    center: { lat: 37.5642135, lng: 127.0016985 },
+    zoom: 10,
+  });
+  infoWindow = new google.maps.InfoWindow();
+
+  const locationButton = document.createElement("button");
+
+  locationButton.textContent = "위치 조회 하기";
+  locationButton.classList.add("custom-map-control-button");
+  map.controls[google.maps.ControlPosition.TOP_CENTER].push(locationButton);
+  locationButton.addEventListener("click", () => {
+    // Try HTML5 geolocation.
+    if (navigator.geolocation) {
+      navigator.geolocation.getCurrentPosition(
+        (position) => {
+          const pos = {
+            lat: position.coords.latitude,
+            lng: position.coords.longitude,
+          };
+          infoWindow.setPosition(pos);
+          infoWindow.setContent("위치를 찾았습니다.");
+          infoWindow.open(map);
+          map.setCenter(pos);
+          document.getElementById("lat").innerHTML = pos.lat;
+          document.getElementById("lng").innerHTML = pos.lng;
+         // console.log(dfs_xy_conv("toXY",pos.lat,pos.lng));
+
+        },
+        () => {
+          handleLocationError(true, infoWindow, map.getCenter());
+        }
+      );
+    } else {
+      // Browser doesn't support Geolocation
+      handleLocationError(false, infoWindow, map.getCenter());
+    }
+  });
+}
+
+function handleLocationError(browserHasGeolocation, infoWindow, pos) {
+  infoWindow.setPosition(pos);
+  infoWindow.setContent(
+    browserHasGeolocation
+      ? "Error: 위치 조회 서비스가 실패하였습니다."
+      : "Error: 브라우저가 위치 조회 기능을 지원하지 않습니다."
+  );
+  infoWindow.open(map);
+}
\ No newline at end of file
--- a/html/style.css 0 → 100644
View file @5a8edf5
+++ b/html/style.css 0 → 100644
View file @5a8edf5
+/* Always set the map height explicitly to define the size of the div
+       * element that contains the map. */
+       
+       @import url(http://fonts.googleapis.com/earlyaccess/nanumgothic.css);
+       h1 { text-align: center; }
+       h2 { text-align: center; }
+       h3 { text-align: center; }
+
+       #map {
+        width:600px; 
+        height:400px;
+        margin: 0 auto;
+
+
+      }
+      .custom-map-control-button {
+        background-color: #fff;
+        border: 0;
+        border-radius: 2px;
+        box-shadow: 0 1px 4px -1px rgba(0, 0, 0, 0.3);
+        margin: 10px;
+        padding: 0 0.5em;
+        font: 400 18px Roboto, Arial, sans-serif;
+        overflow: hidden;
+        height: 40px;
+        cursor: pointer;
+      }
+      .custom-map-control-button:hover {
+        background: #ebebeb;
+      }
+      
\ No newline at end of file
--- a/import/Weather.js 0 → 100644
View file @5a8edf5
+++ b/import/Weather.js 0 → 100644
View file @5a8edf5
+const request = require('request');
+const moment = require('moment');
+require('moment-timezone');
+moment.tz.setDefault("Asia/seoul");
+let date = new String(get_base_date());
+let time = new String(get_base_time());
+var url = 'http://apis.data.go.kr/1360000/VilageFcstInfoService_2.0/getVilageFcst';
+var queryParams = '?' + encodeURIComponent('serviceKey') + '=5e8RQfsCMcXO61FvD7j5tgt5fHf0NYadkSaW6%2FhYQHdoxSgQFXbN7VSb4CI%2BW9scLv2usb3riB7UAGNF7Wb6nA%3D%3D'; /* Service Key*/
+queryParams += '&' + encodeURIComponent('pageNo') + '=' + encodeURIComponent('1'); /* */
+queryParams += '&' + encodeURIComponent('numOfRows') + '=' + encodeURIComponent('10'); /* */
+queryParams += '&' + encodeURIComponent('dataType') + '=' + encodeURIComponent('JSON'); /* */
+queryParams += '&' + encodeURIComponent('base_date') + '=' + encodeURIComponent(date); /* */
+queryParams += '&' + encodeURIComponent('base_time') + '=' + encodeURIComponent(time); /* */
+queryParams += '&' + encodeURIComponent('nx') + '=' + encodeURIComponent('55'); /* */
+queryParams += '&' + encodeURIComponent('ny') + '=' + encodeURIComponent('127'); /* */
+
+
+function get_base_date() // 날짜 추출 함수
+{
+    // 0000~0210 사이 시간대에 조회시 전일(date -1)로 변경
+    let date =moment().format('YYYYMMDD');
+    let time = new String(moment().format('HHmm'));
+    if ('0000'<=time && time<'0210'){date -= 1}
+    return date
+}
+
+function get_base_time() // 시간 추출 함수
+{
+    //단기예보
+    //- Base_time : 0200, 0500, 0800, 1100, 1400, 1700, 2000, 2300 (1일 8회)
+    //- API 제공 시간(~이후) : 02:10, 05:10, 08:10, 11:10, 14:10, 17:10, 20:10, 23:10
+    //- 시간대 맞추기
+    let time = new String(moment().format('HHmm'));
+    if ('0000'<=time && time<'0210'){time = '2300'}
+    else if ('0210'<=time && time<'0510'){time = '0200'}
+    else if ('0510'<=time && time<'0810'){time = '0500'}
+    else if ('0810'<=time && time<'1110'){time = '0800'}
+    else if ('1110'<=time && time<'1410'){time = '1100'}
+    else if ('1410'<=time && time<'1710'){time = '1400'}
+    else if ('1710'<=time && time<'2010'){time = '1700'}
+    else if ('2010'<=time && time<'2310'){time = '2010'}
+    else if ('2310'<=time && time<'2359'){time = '2300'}
+    return time
+    }
+
+request({
+    url: url + queryParams,
+    method: 'GET'
+}, function (error, response, body) {
+    console.log('Status', response.statusCode);
+    console.log('Headers', JSON.stringify(response.headers));
+    console.log('Reponse received', body);
+}); 
+
+//
+// (사용 예)
+// var rs = dfs_xy_conv("toLL","60","127");
+// console.log(rs.lat, rs.lng);
+
+dfs_xy_conv = function (code, v1, v2) {
+// 소스출처 : http://www.kma.go.kr/weather/forecast/digital_forecast.jsp
+// LCC DFS 좌표변환 ( code : "toXY"(위경도->좌표, v1:위도, v2:경도), "toLL"(좌표->위경도,v1:x, v2:y) )
+
+        var RE = 6371.00877; // 지구 반경(km)
+        var GRID = 5.0; // 격자 간격(km)
+        var SLAT1 = 30.0; // 투영 위도1(degree)
+        var SLAT2 = 60.0; // 투영 위도2(degree)
+        var OLON = 126.0; // 기준점 경도(degree)
+        var OLAT = 38.0; // 기준점 위도(degree)
+        var XO = 43; // 기준점 X좌표(GRID)
+        var YO = 136; // 기1준점 Y좌표(GRID)
+
+        var DEGRAD = Math.PI / 180.0;
+        var RADDEG = 180.0 / Math.PI;
+
+        var re = RE / GRID;
+        var slat1 = SLAT1 * DEGRAD;
+        var slat2 = SLAT2 * DEGRAD;
+        var olon = OLON * DEGRAD;
+        var olat = OLAT * DEGRAD;
+
+        var sn = Math.tan(Math.PI * 0.25 + slat2 * 0.5) / Math.tan(Math.PI * 0.25 + slat1 * 0.5);
+        sn = Math.log(Math.cos(slat1) / Math.cos(slat2)) / Math.log(sn);
+        var sf = Math.tan(Math.PI * 0.25 + slat1 * 0.5);
+        sf = Math.pow(sf, sn) * Math.cos(slat1) / sn;
+        var ro = Math.tan(Math.PI * 0.25 + olat * 0.5);
+        ro = re * sf / Math.pow(ro, sn);
+        var rs = {};
+        if (code == "toXY") {
+            rs['lat'] = v1;
+            rs['lng'] = v2;
+            var ra = Math.tan(Math.PI * 0.25 + (v1) * DEGRAD * 0.5);
+            ra = re * sf / Math.pow(ra, sn);
+            var theta = v2 * DEGRAD - olon;
+            if (theta > Math.PI) theta -= 2.0 * Math.PI;
+            if (theta < -Math.PI) theta += 2.0 * Math.PI;
+            theta *= sn;
+            rs['x'] = Math.floor(ra * Math.sin(theta) + XO + 0.5);
+            rs['y'] = Math.floor(ro - ra * Math.cos(theta) + YO + 0.5);
+        }
+        else {
+            rs['x'] = v1;
+            rs['y'] = v2;
+            var xn = v1 - XO;
+            var yn = ro - v2 + YO;
+            ra = Math.sqrt(xn * xn + yn * yn);
+            if (sn < 0.0) - ra;
+            var alat = Math.pow((re * sf / ra), (1.0 / sn));
+            alat = 2.0 * Math.atan(alat) - Math.PI * 0.5;
+
+            if (Math.abs(xn) <= 0.0) {
+                theta = 0.0;
+            }
+            else {
+                if (Math.abs(yn) <= 0.0) {
+                    theta = Math.PI * 0.5;
+                    if (xn < 0.0) - theta;
+                }
+                else theta = Math.atan2(xn, yn);
+            }
+            var alon = theta / sn + olon;
+            rs['lat'] = alat * RADDEG;
+            rs['lng'] = alon * RADDEG;
+        }
+        return rs;
+    }
\ No newline at end of file
--- a/readme.md
View file @5a8edf5
+++ b/readme.md
View file @5a8edf5
+<<<<<<< HEAD
+경위도 : https://developers.google.com/maps/documentation/javascript/examples/map-geolocation?hl=ko#maps_map_geolocation-javascript
+=======
+https://www.data.go.kr/tcs/dss/selectApiDataDetailView.do?publicDataPk=15084084 기상청
+>>>>>>> feature/add_Weather_API
--- a/run_server.js 0 → 100644
View file @5a8edf5
+++ b/run_server.js 0 → 100644
View file @5a8edf5
+// 서비스 제공을 위한 html 홈페이지를 express로 구현하기 (기본적인 뼈대)
+var express = require('express')
+var app = express(); // express 선언
+const port = 10000 //임의의 포트 10000
+
+// request 와 response 라는 인자를 줘서 콜백 함수를 만든다.
+// localhost:port 브라우저에 res.sendFile() 내부의 파일이 띄워진다.
+app.use(express.static(__dirname + "/html"));
+
+app.get('/', function(req,res) {
+    res.sendFile(__dirname + "/html/index.html")
+})
+
+//임의의 포트 10000, 접속 주소 localhost:10000/
+app.listen(port, function(){
+    console.log('서버 구동중 port : %d', port);
+});
\ No newline at end of file
--- a/기상청41_단기예보 조회서비스_오픈API활용가이드_최종/기상청41_단기예보 조회서비스_오픈API활용가이드_격자_위경도(20210401).xlsx 0 → 100644
View file @5a8edf5
+++ b/기상청41_단기예보 조회서비스_오픈API활용가이드_최종/기상청41_단기예보 조회서비스_오픈API활용가이드_격자_위경도(20210401).xlsx 0 → 100644
View file @5a8edf5
--- a/기상청41_단기예보 조회서비스_오픈API활용가이드_최종/기상청41_단기예보 조회서비스_오픈API활용가이드_최종.docx 0 → 100644
View file @5a8edf5
+++ b/기상청41_단기예보 조회서비스_오픈API활용가이드_최종/기상청41_단기예보 조회서비스_오픈API활용가이드_최종.docx 0 → 100644
View file @5a8edf5