2020-1-capstone-design2 / 2015101793

Go to a project
Toggle navigation Toggle navigation pinning
양선아
df764acd 1 parent f816c299

5/29 update

Inline Side-by-side
Showing 10 changed files with 501 additions and 198 deletions
1 +{
2 + // Use IntelliSense to learn about possible attributes.
3 + // Hover to view descriptions of existing attributes.
4 + // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
5 + "version": "0.2.0",
6 + "configurations": [
7 + {
8 + "type": "chrome",
9 + "request": "launch",
10 + "name": "Launch Chrome against localhost",
11 + "url": "http://127.0.0.1:8000/market_analysis/returnfarm?maptype=9&contenttype=edu",
12 + "webRoot": "${workspaceFolder}"
13 + }
14 + ]
15 +}
...\ No newline at end of file ...\ No newline at end of file
...@@ -11,23 +11,33 @@ ...@@ -11,23 +11,33 @@
11 </head> 11 </head>
12 12
13 <body> 13 <body>
14 - <h1><a href="http://127.0.0.1:8000/market_analysis/maplist">Statistics on Return Farm Project</a></h1> 14 + <!--body-->
15 - <br> 15 + <div id="bodyWrap">
16 - <h3>농산물 시장 유통에 대한 통계분석 입니다.</h3> 16 + <div id="header">
17 - <br> 17 + <h1><a href="/market_analysis/maplist">Statistics on Return Farm Project</a></h1>
18 - 18 + <br>
19 - <ul class="nav justify-content-center"> 19 + <h3>농산물 시장 유통에 대한 통계분석 입니다.</h3>
20 + <br>
21 + </div>
22 + <div id="menubar">
23 + <ul class="nav justify-content-center">
20 <li class="nav-item"> 24 <li class="nav-item">
21 - <a class="nav-link active" href="http://127.0.0.1:8000/market_analysis/market">Market</a> 25 + <a class="nav-link active" href="/market_analysis/market">Market</a>
22 </li> 26 </li>
23 <li class="nav-item"> 27 <li class="nav-item">
24 - <a class="nav-link" href="http://127.0.0.1:8000/market_analysis/population">Population</a> 28 + <a class="nav-link" href="/market_analysis/population">Population</a>
25 </li> 29 </li>
26 <li class="nav-item"> 30 <li class="nav-item">
27 - <a class="nav-link" href="http://127.0.0.1:8000/market_analysis/returnfarm">Return Farm</a> 31 + <a class="nav-link" href="/market_analysis/returnfarm">Return Farm</a>
28 </li> 32 </li>
29 </ul> 33 </ul>
30 -
31 </div> 34 </div>
35 + </div>
36 + <!--content-->
37 + <div id="contentWrap">
38 + <h6>
39 + explain 들어가는 부분
40 + </h6>
41 + </div>
32 </body> 42 </body>
33 </html> 43 </html>
...\ No newline at end of file ...\ No newline at end of file
......
1 -<h1>population</h1>
...\ No newline at end of file ...\ No newline at end of file
1 +<!DOCTYPE html>
2 +<html lang="kr">
3 + <head>
4 + <title>RF-Project</title>
5 + <!-- link에 들어가 있는건 지도 데이터를 위한 css 파일 -->
6 + <!-- script에 들어가 있는건 지도 데이터를 위한 js 파일 -->
7 + <!-- 직접 다운받아 넣을 수도 있는데 우선은 그냥 웹에서 불러올 수 있도록 해놨다. -->
8 + <link rel="stylesheet" href="https://unpkg.com/leaflet@1.6.0/dist/leaflet.css" />
9 + <script src="https://unpkg.com/leaflet@1.6.0/dist/leaflet.js"></script>
10 + <!--css 내용 여기에 direct로 넣었다-->
11 + <style>
12 + #mapbase {position:relative; width:40%; height:0; padding-bottom:40%; }
13 + .info {
14 + padding: 6px 8px;
15 + font: 14px/16px Arial, Helvetica, sans-serif;
16 + background: white;
17 + background: rgba(255,255,255,0.8);
18 + box-shadow: 0 0 15px rgba(0,0,0,0.2);
19 + border-radius: 5px;
20 + }
21 + .info h4 {
22 + margin: 0 0 5px;
23 + color: #777;
24 + }
25 + .legend {
26 + line-height: 18px;
27 + color: #555;
28 + }
29 + .legend i {
30 + width: 18px;
31 + height: 18px;
32 + float: left;
33 + margin-right: 8px;
34 + opacity: 0.7;
35 + }
36 + </style>
37 +
38 + <!--BOOTSTRAP 사용 부분-->
39 + <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
40 + <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
41 + <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
42 + <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
43 +
44 + </head>
45 +
46 + <body>
47 + <div id="bodyWrap">
48 + <div id="header">
49 + <h1><a href="/market_analysis/maplist">Statistics on Return Farm Project</a></h1>
50 + <br>
51 + <h3>농산물 시장 유통에 대한 통계분석 입니다.</h3>
52 + <br>
53 + </div>
54 + <div id="menubar">
55 + <ul class="nav justify-content-center">
56 + <li class="nav-item">
57 + <a class="nav-link active" href="/market_analysis/market">Market</a>
58 + </li>
59 + <li class="nav-item">
60 + <a class="nav-link" href="/market_analysis/population">Population</a>
61 + </li>
62 + <li class="nav-item">
63 + <a class="nav-link" href="/market_analysis/returnfarm">Return Farm</a>
64 + </li>
65 + </ul>
66 + </div>
67 + </div>
68 + <!--population 단독 부분-->
69 + <!--return farm 단독 부분-->
70 + <div id="contentWrap">
71 + <!--검색 바 만든 부분-->
72 + <div id="searchmenu">
73 + <form action="{% url 'population' %}" method="GET">
74 + <div class="form-group">
75 + <select name="maptype">
76 + <option value="9">시도</option>
77 + <option value="10">시군구</option>
78 + </select>
79 + <select name="densitytype">
80 + <option value="edu">귀농가구원 연령별</option>
81 + </select>
82 + <input type="submit">
83 + </div>
84 + </form>
85 + </div>
86 + <!--지도 생성 부분-->
87 + <div id="mapbase">
88 + <script type="text/javascript">
89 + // map 객체 생성 map안에 넣어주는건 div id
90 + // 위도, 경도, zoom 수준
91 + var map = L.map('mapbase', {zoomDelta: 0.25, zoomSnap: 0}).setView([36.5205243,128.0540569], 7);
92 + // tilelayer를 씌우는 작업 OSM을 사용했음
93 + L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token={accessToken}', {
94 + attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
95 + maxZoom: 10,
96 + id: 'mapbox/light-v9',
97 + tileSize: 512,
98 + zoomOffset:-1,
99 + accessToken: 'pk.eyJ1IjoidGpzZGszMTA1IiwiYSI6ImNrYWM5bXljZzB1N28ycnA5bTVsNHZsbnkifQ.W3-irWof5WMR8BcfBR4Ftw'
100 + }).addTo(map);
101 +
102 + // mapdata 가져오는 부분
103 + // replace 쓰는 방법 : (바꾸기 전 문자, 바꾸고 난 후 문자)
104 + var statesdata = "{{maps.mapdata}}".replace(/&quot;/g,"\"");
105 + statesdata = JSON.parse(statesdata);
106 + let key = Object.keys(statesdata.features[1].properties);
107 + </script>
108 + </div>
109 + <!--지도에 밀도 데이터 받는 부분-->
110 + <div id="density_mapping">
111 + <script>
112 + var densitydatas = "{{exportdata}}".replace(/&quot;/g,"\"");
113 + densitydatas = JSON.parse(densitydatas);
114 + for(var i=0; i < densitydatas.length; i++)
115 + {
116 + for(var j=0; j<statesdata.features.length; j++)
117 + {
118 + if (statesdata.features[j]['properties'][key[2]]==densitydatas[i]['C1_NM'] && densitydatas[i]['ITM_NM']=='귀농가구원수')
119 + {
120 + statesdata.features[j]['properties']['density']=densitydatas[i]['DT'];
121 + break;
122 + }
123 + }
124 + }
125 + </script>
126 + </div>
127 + <!--지도의 큰 모양 바꾸는 부분-->
128 + <div id="map_design">
129 + <script>
130 + var geojson;
131 + var density_max = 3300;
132 + function getColor(d) {
133 + return d > density_max*0.9 ? '#FF0015' :
134 + d > density_max*0.8 ? '#F20D20' :
135 + d > density_max*0.7 ? '#E6192A' :
136 + d > density_max*0.6 ? '#D92635' :
137 + d > density_max*0.5 ? '#CC3340' :
138 + d > density_max*0.4 ? '#BF404A' :
139 + d > density_max*0.3 ? '#B34D55' :
140 + d > density_max*0.2 ? '#A65960' :
141 + d > density_max*0.1 ? '#99666A' :
142 + '#8C7375';
143 + }
144 + function style(feature) {
145 + return {
146 + fillColor: getColor(feature.properties.density),
147 + weight: 2,
148 + opacity: 1,
149 + color: 'white',
150 + dashArray: '3',
151 + fillOpacity: 0.7
152 + };
153 + }
154 + L.geoJson(statesdata, {style: style}).addTo(map);
155 + // mouseover event listener
156 + function highlightFeature(e) {
157 + var layer = e.target;
158 + layer.setStyle({
159 + weight: 5,
160 + color: '#666',
161 + dashArray: '',
162 + fillOpacity: 0.7
163 + });
164 +
165 + if (!L.Browser.ie && !L.Browser.opera && !L.Browser.edge) {
166 + layer.bringToFront();
167 + }
168 + info.update(layer.feature.properties);
169 + }
170 + // mouseout define
171 + function resetHighlight(e) {
172 + geojson.resetStyle(e.target);
173 + info.update();
174 + }
175 + function zoomToFeature(e) {
176 + map.fitBounds(e.target.getBounds());
177 + }
178 + function onEachFeature(feature, layer) {
179 + layer.on({
180 + mouseover: highlightFeature,
181 + mouseout: resetHighlight,
182 + click: zoomToFeature
183 + });
184 + }
185 +
186 + geojson = L.geoJson(statesdata, {
187 + style: style,
188 + onEachFeature: onEachFeature
189 + }).addTo(map);
190 + </script>
191 + </div>
192 + <!--information, legend, zoom 넣는 부분-->
193 + <div class="map_info">
194 + <script>
195 + var info = L.control();
196 +
197 + info.onAdd = function (map) {
198 + this._div = L.DomUtil.create('div', 'info'); // create a div with a class "info"
199 + this.update();
200 + return this._div;
201 + };
202 +
203 + // method that we will use to update the control based on feature properties passed
204 + info.update = function (props) {
205 + this._div.innerHTML = '<h4>Korea Return Farm Density</h4>' + (props ?
206 + '<b>' + props[key[2]] + '</b><br />' + props.density + ' 개의 교육 예정'
207 + : 'Hover over a state');
208 + };
209 +
210 + info.addTo(map);
211 +
212 + var legend = L.control({position: 'bottomright'});
213 +
214 + legend.onAdd = function (map) {
215 +
216 + var div = L.DomUtil.create('div', 'info legend'),
217 + grades = [0, density_max*0.1, density_max*0.2, density_max*0.3, density_max*0.4,density_max*0.5, density_max*0.6, density_max*0.7, density_max*0.8,density_max*0.9],
218 + labels = [],
219 + from, to;
220 +
221 + // loop through our density intervals and generate a label with a colored square for each interval
222 + for (var i = 0; i < grades.length; i++) {
223 + from = grades[i];
224 + to = grades[i+1];
225 + labels.push(
226 + '<i style="background: '+ getColor(from + 1) + '"></i> ' + from + (to ? '&ndash;' + to :'+'));
227 + }
228 + div.innerHTML = labels.join('<br>');
229 + return div;
230 + };
231 + legend.addTo(map);
232 + </script>
233 + </div>
234 + </div>
235 + </body>
236 +</html>
...\ No newline at end of file ...\ No newline at end of file
......
...@@ -44,186 +44,201 @@ ...@@ -44,186 +44,201 @@
44 </head> 44 </head>
45 45
46 <body> 46 <body>
47 - <h1><a href="http://127.0.0.1:8000/market_analysis/maplist">Statistics on Return Farm Project</a></h1> 47 + <div id="bodyWrap">
48 - <br> 48 + <div id="header">
49 - <h3>농산물 시장 유통에 대한 통계분석 입니다.</h3> 49 + <h1><a href="/market_analysis/maplist">Statistics on Return Farm Project</a></h1>
50 - <br> 50 + <br>
51 - 51 + <h3>농산물 시장 유통에 대한 통계분석 입니다.</h3>
52 - <ul class="nav justify-content-center"> 52 + <br>
53 - <li class="nav-item"> 53 + </div>
54 - <a class="nav-link active" href="http://127.0.0.1:8000/market_analysis/market">Market</a> 54 + <div id="menubar">
55 - </li> 55 + <ul class="nav justify-content-center">
56 - <li class="nav-item"> 56 + <li class="nav-item">
57 - <a class="nav-link" href="http://127.0.0.1:8000/market_analysis/population">Population</a> 57 + <a class="nav-link active" href="/market_analysis/market">Market</a>
58 - </li> 58 + </li>
59 - <li class="nav-item"> 59 + <li class="nav-item">
60 - <a class="nav-link" href="http://127.0.0.1:8000/market_analysis/returnfarm">Return Farm</a> 60 + <a class="nav-link" href="/market_analysis/population">Population</a>
61 - </li> 61 + </li>
62 - </ul> 62 + <li class="nav-item">
63 -<!--return farm 단독 부분--> 63 + <a class="nav-link" href="/market_analysis/returnfarm">Return Farm</a>
64 - <ul class="nav nav-pills mb-3" id="pills-tab" role="tablist"> 64 + </li>
65 - <li class="nav-item" role="presentation"> 65 + </ul>
66 - <a class="nav-link" id="pills-home-tab" data-toggle="pill" href="#pills-home" role="tab" aria-selected="true">지역</a> 66 + </div>
67 - </li>
68 - <li class="nav-item dropdown">
69 - <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">내용</a>
70 - <div class="dropdown-menu">
71 - <a class="dropdown-item" href="#">교육</a>
72 - <a class="dropdown-item" href="#">지원정책</a>
73 - </div>
74 - </li>
75 - <li class="nav-item" role="presentation">
76 - <a class="nav-link" id="pills-contact-tab" data-toggle="pill" href="#pills-contact" role="tab" aria-selected="false">Return Farm</a>
77 - </li>
78 - </ul>
79 - <div class="tab-content" id="pills-tabContent">
80 - <div class="tab-pane fade" id="pills-home" role="tabpanel" aria-labelledby="pills-home-tab">Hello</div>
81 - <div class="tab-pane fade" id="pills-profile" role="tabpanel" aria-labelledby="pills-profile-tab">Bonjour</div>
82 - <div class="tab-pane fade" id="pills-contact" role="tabpanel" aria-labelledby="pills-contact-tab">안녕하세요</div>
83 </div> 67 </div>
84 - 68 + <!--return farm 단독 부분-->
85 - <div id="mapbase"></div> 69 + <div id="contentWrap">
86 - <script type="text/javascript"> 70 + <!--검색 바 만든 부분-->
87 - ///////////// 지도 생성해주는 부분임 ////////////// 71 + <div id="searchmenu">
88 - 72 + <form action="{% url 'returnfarm' %}" method="GET">
89 - // map 객체 생성 map안에 넣어주는건 div id 73 + <div class="form-group">
90 - // 위도, 경도, zoom 수준 74 + <select name="maptype">
91 - var map = L.map('mapbase', {zoomDelta: 0.25, zoomSnap: 0}).setView([36.5205243,128.0540569], 7); 75 + <option value="9">시도</option>
92 - // tilelayer를 씌우는 작업 OSM을 사용했음 76 + <option value="10">시군구</option>
93 - L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token={accessToken}', { 77 + </select>
94 - attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>', 78 + <select name="contenttype">
95 - maxZoom: 10, 79 + <option value="edu">귀농귀촌 교육 수</option>
96 - id: 'mapbox/light-v9', 80 + <option value="policy">귀농귀촌 정책 수 </option>
97 - tileSize: 512, 81 + </select>
98 - zoomOffset:-1, 82 + <input type="submit">
99 - accessToken: 'pk.eyJ1IjoidGpzZGszMTA1IiwiYSI6ImNrYWM5bXljZzB1N28ycnA5bTVsNHZsbnkifQ.W3-irWof5WMR8BcfBR4Ftw' 83 + </div>
100 - }).addTo(map); 84 + </form>
101 - 85 + </div>
102 - // mapdata 가져오는 부분 86 + <!--지도 생성 부분-->
103 - // replace 쓰는 방법 : (바꾸기 전 문자, 바꾸고 난 후 문자) 87 + <div id="mapbase">
104 - var statesdata = "{{maps}}".replace(/&quot;/g,"\""); 88 + <script type="text/javascript">
105 - statesdata = JSON.parse(statesdata); 89 + // map 객체 생성 map안에 넣어주는건 div id
106 - 90 + // 위도, 경도, zoom 수준
107 - function getColor(d) { 91 + var map = L.map('mapbase', {zoomDelta: 0.25, zoomSnap: 0}).setView([36.5205243,128.0540569], 7);
108 - return d > 30 ? '#800026' : 92 + // tilelayer를 씌우는 작업 OSM을 사용했음
109 - d > 25 ? '#BD0026' : 93 + L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token={accessToken}', {
110 - d > 20 ? '#E31A1C' : 94 + attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
111 - d > 15 ? '#FC4E2A' : 95 + maxZoom: 10,
112 - d > 10 ? '#FD8D3C' : 96 + id: 'mapbox/light-v9',
113 - d > 5 ? '#FEB24C' : 97 + tileSize: 512,
114 - d > 0 ? '#FED976' : 98 + zoomOffset:-1,
115 - '#FFEDA0'; 99 + accessToken: 'pk.eyJ1IjoidGpzZGszMTA1IiwiYSI6ImNrYWM5bXljZzB1N28ycnA5bTVsNHZsbnkifQ.W3-irWof5WMR8BcfBR4Ftw'
116 - } 100 + }).addTo(map);
117 - function style(feature) { 101 +
118 - return { 102 + // mapdata 가져오는 부분
119 - fillColor: getColor(feature.properties.density), 103 + // replace 쓰는 방법 : (바꾸기 전 문자, 바꾸고 난 후 문자)
120 - weight: 2, 104 + var statesdata = "{{maps.mapdata}}".replace(/&quot;/g,"\"");
121 - opacity: 1, 105 + statesdata = JSON.parse(statesdata);
122 - color: 'white', 106 + let key = Object.keys(statesdata.features[1].properties);
123 - dashArray: '3', 107 + </script>
124 - fillOpacity: 0.7 108 + </div>
125 - }; 109 + <!--지도에 밀도 데이터 받는 부분-->
126 - } 110 + <div id="density_mapping">
127 - let key = Object.keys(statesdata.features[1].properties); 111 + {% for data in exportdata %}
128 - </script> 112 + <script>
129 - 113 + // density data 추가하는 부분
130 - {% for data in exportdata %} 114 + for(var j=0; j<statesdata.features.length; j++)
131 - <script>
132 - // density data 추가하는 부분
133 - for(var j=0; j<statesdata.features.length; j++)
134 - {
135 - if (statesdata.features[j]['properties'][key[2]]=="{{data.city}}")
136 { 115 {
137 - statesdata.features[j]['properties']['density']="{{data.count}}"; 116 + if ("{{maps.id}}"==9){
138 - break; 117 + if (statesdata.features[j]['properties'][key[2]]=="{{data.city}}")
118 + {
119 + statesdata.features[j]['properties']['density']="{{data.count}}";
120 + break;
121 + }
122 + }
123 + else
124 + {
125 + if (statesdata.features[j]['properties'][key[2]]=="{{data.cntr}}")
126 + {
127 + statesdata.features[j]['properties']['density']="{{data.count}}";
128 + break;
129 + }
130 + }
131 + }
132 + </script>
133 + {% endfor %}
134 + </div>
135 + <!--지도의 큰 모양 바꾸는 부분-->
136 + <div id="map_design">
137 + <script>
138 + var geojson;
139 + var density_max = 100;
140 + function getColor(d) {
141 + return d > density_max*0.9 ? '#FF0015' :
142 + d > density_max*0.8 ? '#F20D20' :
143 + d > density_max*0.7 ? '#E6192A' :
144 + d > density_max*0.6 ? '#D92635' :
145 + d > density_max*0.5 ? '#CC3340' :
146 + d > density_max*0.4 ? '#BF404A' :
147 + d > density_max*0.3 ? '#B34D55' :
148 + d > density_max*0.2 ? '#A65960' :
149 + d > density_max*0.1 ? '#99666A' :
150 + '#8C7375';
151 + }
152 + function style(feature) {
153 + return {
154 + fillColor: getColor(feature.properties.density),
155 + weight: 2,
156 + opacity: 1,
157 + color: 'white',
158 + dashArray: '3',
159 + fillOpacity: 0.7
160 + };
161 + }
162 + L.geoJson(statesdata, {style: style}).addTo(map);
163 + // mouseover event listener
164 + function highlightFeature(e) {
165 + var layer = e.target;
166 + layer.setStyle({
167 + weight: 5,
168 + color: '#666',
169 + dashArray: '',
170 + fillOpacity: 0.7
171 + });
172 +
173 + if (!L.Browser.ie && !L.Browser.opera && !L.Browser.edge) {
174 + layer.bringToFront();
175 + }
176 + info.update(layer.feature.properties);
177 + }
178 + // mouseout define
179 + function resetHighlight(e) {
180 + geojson.resetStyle(e.target);
181 + info.update();
182 + }
183 + function zoomToFeature(e) {
184 + map.fitBounds(e.target.getBounds());
185 + }
186 + function onEachFeature(feature, layer) {
187 + layer.on({
188 + mouseover: highlightFeature,
189 + mouseout: resetHighlight,
190 + click: zoomToFeature
191 + });
139 } 192 }
140 - }
141 - </script>
142 - {% endfor %}
143 -
144 - <script>
145 - var geojson;
146 - L.geoJson(statesdata, {style: style}).addTo(map);
147 - // mouseover event listener
148 - function highlightFeature(e) {
149 - var layer = e.target;
150 - layer.setStyle({
151 - weight: 5,
152 - color: '#666',
153 - dashArray: '',
154 - fillOpacity: 0.7
155 - });
156 -
157 - if (!L.Browser.ie && !L.Browser.opera && !L.Browser.edge) {
158 - layer.bringToFront();
159 - }
160 - info.update(layer.feature.properties);
161 - }
162 - // mouseout define
163 - function resetHighlight(e) {
164 - geojson.resetStyle(e.target);
165 - info.update();
166 - }
167 - function zoomToFeature(e) {
168 - map.fitBounds(e.target.getBounds());
169 - }
170 - function onEachFeature(feature, layer) {
171 - layer.on({
172 - mouseover: highlightFeature,
173 - mouseout: resetHighlight,
174 - click: zoomToFeature
175 - });
176 - }
177 -
178 - geojson = L.geoJson(statesdata, {
179 - style: style,
180 - onEachFeature: onEachFeature
181 - }).addTo(map);
182 -
183 -
184 - </script>
185 - <!--information, legend, zoom 넣는 부분-->
186 - <div class="info"></div>
187 - <script>
188 - var info = L.control();
189 -
190 - info.onAdd = function (map) {
191 - this._div = L.DomUtil.create('div', 'info'); // create a div with a class "info"
192 - this.update();
193 - return this._div;
194 - };
195 -
196 - // method that we will use to update the control based on feature properties passed
197 - info.update = function (props) {
198 - this._div.innerHTML = '<h4>Korea Return Farm Density</h4>' + (props ?
199 - '<b>' + props[key[2]] + '</b><br />' + props.density + ' 개의 교육 예정'
200 - : 'Hover over a state');
201 - };
202 -
203 - info.addTo(map);
204 -
205 - var legend = L.control({position: 'bottomright'});
206 -
207 - legend.onAdd = function (map) {
208 -
209 - var div = L.DomUtil.create('div', 'info legend'),
210 - grades = [0, 5, 10, 15, 20, 25, 30],
211 - labels = [],
212 - from, to;
213 -
214 - // loop through our density intervals and generate a label with a colored square for each interval
215 - for (var i = 0; i < grades.length; i++) {
216 - from = grades[i];
217 - to = grades[i+1];
218 - labels.push(
219 - '<i style="background: '+ getColor(from + 1) + '"></i> ' + from + (to ? '&ndash;' + to :'+'));
220 - }
221 - div.innerHTML = labels.join('<br>');
222 - return div;
223 - };
224 - legend.addTo(map);
225 193
226 - 194 + geojson = L.geoJson(statesdata, {
227 - </script> 195 + style: style,
196 + onEachFeature: onEachFeature
197 + }).addTo(map);
198 + </script>
199 + </div>
200 + <!--information, legend, zoom 넣는 부분-->
201 + <div class="map_info">
202 + <script>
203 + var info = L.control();
204 +
205 + info.onAdd = function (map) {
206 + this._div = L.DomUtil.create('div', 'info'); // create a div with a class "info"
207 + this.update();
208 + return this._div;
209 + };
210 +
211 + // method that we will use to update the control based on feature properties passed
212 + info.update = function (props) {
213 + this._div.innerHTML = '<h4>Korea Return Farm Density</h4>' + (props ?
214 + '<b>' + props[key[2]] + '</b><br />' + props.density + ' 개의 교육 예정'
215 + : 'Hover over a state');
216 + };
217 +
218 + info.addTo(map);
219 +
220 + var legend = L.control({position: 'bottomright'});
221 +
222 + legend.onAdd = function (map) {
223 +
224 + var div = L.DomUtil.create('div', 'info legend'),
225 + grades = [0, density_max*0.1, density_max*0.2, density_max*0.3, density_max*0.4,density_max*0.5, density_max*0.6, density_max*0.7, density_max*0.8,density_max*0.9],
226 + labels = [],
227 + from, to;
228 +
229 + // loop through our density intervals and generate a label with a colored square for each interval
230 + for (var i = 0; i < grades.length; i++) {
231 + from = grades[i];
232 + to = grades[i+1];
233 + labels.push(
234 + '<i style="background: '+ getColor(from + 1) + '"></i> ' + from + (to ? '&ndash;' + to :'+'));
235 + }
236 + div.innerHTML = labels.join('<br>');
237 + return div;
238 + };
239 + legend.addTo(map);
240 + </script>
241 + </div>
242 + </div>
228 </body> 243 </body>
229 </html> 244 </html>
...\ No newline at end of file ...\ No newline at end of file
......
1 from django.conf.urls import url 1 from django.conf.urls import url
2 +from django.urls import path
2 from . import views 3 from . import views
3 4
4 urlpatterns = [ 5 urlpatterns = [
5 - url('returnfarm/<int:maptype>', views.returnfarm), 6 + url('returnfarm', views.returnfarm, name="returnfarm"),
6 - url('population', views.population), 7 + url('population', views.population, name="population"),
7 url('market', views.market), 8 url('market', views.market),
8 url('', views.main), 9 url('', views.main),
9 ] 10 ]
...\ No newline at end of file ...\ No newline at end of file
......
1 +#-*- coding:utf-8
2 +
1 from django.shortcuts import render 3 from django.shortcuts import render
2 -from django.db.models import Count 4 +from django.db.models import Count, Max
5 +from urllib.request import urlopen
3 from .models import RT_edu, Maps, RT_agri_policy 6 from .models import RT_edu, Maps, RT_agri_policy
7 +from bs4 import BeautifulSoup
8 +import pandas as pd
4 9
5 # Create your views here. 10 # Create your views here.
6 11
7 -def dbselect(contenttype, maptype): 12 +def returnfarm_dbselect(contenttype, maptype):
8 if maptype == 9: 13 if maptype == 9:
9 mapt = 'city' 14 mapt = 'city'
10 elif maptype == 10: 15 elif maptype == 10:
11 mapt = 'cntr' 16 mapt = 'cntr'
12 -
13 if contenttype=='policy': 17 if contenttype=='policy':
14 myrtrn = RT_agri_policy.objects.values(mapt).annotate(count=Count(mapt)) 18 myrtrn = RT_agri_policy.objects.values(mapt).annotate(count=Count(mapt))
15 return myrtrn 19 return myrtrn
...@@ -17,18 +21,41 @@ def dbselect(contenttype, maptype): ...@@ -17,18 +21,41 @@ def dbselect(contenttype, maptype):
17 myrtrn = RT_edu.objects.values(mapt).annotate(count=Count(mapt)) 21 myrtrn = RT_edu.objects.values(mapt).annotate(count=Count(mapt))
18 return myrtrn 22 return myrtrn
19 23
24 +# 공공데이터 불러오는 부분
25 +def publicdata():
26 + # 통계청 귀농가구원의 시도별, 시군별, 연령별
27 + url = 'http://kosis.kr/openapi/statisticsData.do?method=getList&apiKey=M2I3MWFhNzE2MjlkYjhhNzgwNWFjNWQ3MGU0MzY5Y2Y=&format=json&jsonVD=Y&userStatsId=tjsdk3105/101/DT_1A02003/2/1/20200529160216&prdSe=Y&newEstPrdCnt=1'
28 + data = urlopen(url).read().decode('utf8')
29 + return data
30 +
20 def main(request): 31 def main(request):
21 return render(request, 'main.html') 32 return render(request, 'main.html')
22 33
23 -def returnfarm(request, maptype): 34 +def returnfarm(request):
24 - mapp = Maps.objects.get(id=maptype) 35 + try:
25 - mapp = mapp.mapdata 36 + maptype = request.GET['maptype']
26 - exportdatas = dbselect('policy', maptype) 37 + contenttype = request.GET['contenttype']
38 + mapp = Maps.objects.get(id=int(maptype))
39 + exportdatas = returnfarm_dbselect(contenttype, int(maptype))
40 + except:
41 + mapp = Maps.objects.get(id=9)
42 + exportdatas = {}
27 context = {'exportdata': exportdatas, 'maps':mapp} 43 context = {'exportdata': exportdatas, 'maps':mapp}
28 return render(request, 'returnfarm.html', context) 44 return render(request, 'returnfarm.html', context)
29 45
46 +
30 def population(request): 47 def population(request):
31 - return render(request, 'population.html') 48 + try:
49 + maptype = request.GET['maptype']
50 + densitytype = request.GET['densitytype']
51 + mapp = Maps.objects.get(id=int(maptype))
52 + exportdatas = publicdata()
53 + except:
54 + mapp = Maps.objects.get(id=9)
55 + exportdatas = {}
56 + exportdatas = publicdata()
57 + context = {'exportdata': exportdatas, 'maps':mapp}
58 + return render(request, 'population.html', context)
32 59
33 def market(request): 60 def market(request):
34 return render(request, 'market.html') 61 return render(request, 'market.html')
...\ No newline at end of file ...\ No newline at end of file
......
No preview for this file type
No preview for this file type
No preview for this file type