2020-1-capstone-design2 / 2015101793

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

5/25 update

Inline Side-by-side
Showing 8 changed files with 310 additions and 97 deletions
#무시할 파일 확장자
*.csv
C:/Users/tjsdk/Desktop/5학년 1학기/캡스톤디자인2/datamapdata/CTPRVN_201905/TL_SCCO_STPRVN.dbf
C:\Users\tjsdk\Desktop\5학년 1학기\캡스톤디자인2\data\mapdata\CTPRVN_201905\TL_SCCO_STPRVN.prj
C:\Users\tjsdk\Desktop\5학년 1학기\캡스톤디자인2\data\mapdata\CTPRVN_201905\TL_SCCO_STPRVN.shp
C:\Users\tjsdk\Desktop\5학년 1학기\캡스톤디자인2\data\mapdata\CTPRVN_201905\TL_SCCO_STPRVN.shx
C:\Users\tjsdk\Desktop\5학년 1학기\캡스톤디자인2\data\mapdata\CTPRVN_201905\TL_SCCO_STPRVN_convert.dbf
C:\Users\tjsdk\Desktop\5학년 1학기\캡스톤디자인2\data\mapdata\CTPRVN_201905\TL_SCCO_STPRVN_convert.prj
C:\Users\tjsdk\Desktop\5학년 1학기\캡스톤디자인2\data\mapdata\CTPRVN_201905\TL_SCCO_STPRVN_convert.shp
C:\Users\tjsdk\Desktop\5학년 1학기\캡스톤디자인2\data\mapdata\CTPRVN_201905\TL_SCCO_STPRVN_convert.shx
C:\Users\tjsdk\Desktop\5학년 1학기\캡스톤디자인2\data\mapdata\SIG_201905\sig.json
C:\Users\tjsdk\Desktop\5학년 1학기\캡스톤디자인2\data\mapdata\SIG_201905/TL_SCCO_SIG.dbf
C:\Users\tjsdk\Desktop\5학년 1학기\캡스톤디자인2\data\mapdata\SIG_201905/TL_SCCO_SIG.prj
C:\Users\tjsdk\Desktop\5학년 1학기\캡스톤디자인2\data\mapdata\SIG_201905/TL_SCCO_SIG.shp
C:\Users\tjsdk\Desktop\5학년 1학기\캡스톤디자인2\data\mapdata\SIG_201905/TL_SCCO_SIG.shx
C:\Users\tjsdk\Desktop\5학년 1학기\캡스톤디자인2\data\mapdata\SIG_201905/TL_SCCO_SIG_convert.dbf
C:\Users\tjsdk\Desktop\5학년 1학기\캡스톤디자인2\data\mapdata\SIG_201905/TL_SCCO_SIG_convert.prj
C:\Users\tjsdk\Desktop\5학년 1학기\캡스톤디자인2\data\mapdata\SIG_201905/TL_SCCO_SIG_convert.shp
C:\Users\tjsdk\Desktop\5학년 1학기\캡스톤디자인2\data\mapdata\SIG_201905/TL_SCCO_SIG_convert.shx
# Created by https://www.gitignore.io/api/django
......
<!DOCTYPE html>
<html lang="kr">
<head>
<title>RF-Project</title>
<!--BOOTSTRAP 사용 부분-->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
</head>
<body>
<h1><a href="http://127.0.0.1:8000/market_analysis/maplist">Statistics on Return Farm Project</a></h1>
<br>
<h3>농산물 시장 유통에 대한 통계분석 입니다.</h3>
<br>
<ul class="nav justify-content-center">
<li class="nav-item">
<a class="nav-link active" href="http://127.0.0.1:8000/market_analysis/market">Market</a>
</li>
<li class="nav-item">
<a class="nav-link" href="http://127.0.0.1:8000/market_analysis/population">Population</a>
</li>
<li class="nav-item">
<a class="nav-link" href="http://127.0.0.1:8000/market_analysis/returnfarm">Return Farm</a>
</li>
</ul>
</div>
</body>
</html>
\ No newline at end of file
<html>
<head>
<!-- link에 들어가 있는건 지도 데이터를 위한 css 파일 -->
<!-- script에 들어가 있는건 지도 데이터를 위한 js 파일 -->
<!-- 직접 다운받아 넣을 수도 있는데 우선은 그냥 웹에서 불러올 수 있도록 해놨다. -->
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.6.0/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet@1.6.0/dist/leaflet.js"></script>
<!--css 내용 여기에 direct로 넣었다-->
<style>
#mapbase {position:relative; width:50%; height:0;padding-bottom:60%; }
</style>
</head>
<body>
{%for data in exportdata%}
<p>{{data.cntr}}</p>
{%endfor%}
<div id="mapbase"></div>
<script type="text/javascript">
// map 객체 생성 map안에 넣어주는건 div id
// 위도, 경도, zoom 수준
var map = L.map('mapbase').setView([36.5205243,128.0540569], 7);
// tilelayer를 씌우는 작업 OSM을 사용했음
L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token={accessToken}', {
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>',
maxZoom: 10,
id: 'mapbox/light-v9',
tileSize: 512,
zoomOffset:-1,
accessToken: 'pk.eyJ1IjoidGpzZGszMTA1IiwiYSI6ImNrYWM5bXljZzB1N28ycnA5bTVsNHZsbnkifQ.W3-irWof5WMR8BcfBR4Ftw'
}).addTo(map);
// mapdata 가져오는 부분
var statesData = "{{maps}}".replace(/&quot;/g,"\"");
statesData = JSON.parse(statesData);
// replace 쓰는 방법 : (바꾸기 전 문자, 바꾸고 난 후 문자)
// density data 추가하는 부분
var densitydata = "{{exportdata}}".replace(/&#x27;/g,"\"");
densitydata = densitydata.slice(13,-4);
densitydata = JSON.parse(densitydata);
document.write(densitydata);
for(var i =0; i<densitydata.length; i++)
{
for(var j=0; j<statesData.features.length; j++)
{
if (statesData.features[j]['properties']['SIG_KOR_NM'].indexOf(densitydata[i]['cntr'])==0)
{
statesData.features[j]['properties']['density']=densitydata[i]['count'];
break;
}
}
};
function getColor(d) {
return d > 30 ? '#800026' :
d > 25 ? '#BD0026' :
d > 20 ? '#E31A1C' :
d > 15 ? '#FC4E2A' :
d > 10 ? '#FD8D3C' :
d > 5 ? '#FEB24C' :
d > 0 ? '#FED976' :
'#FFEDA0';
}
function style(feature) {
return {
fillColor: getColor(feature.properties.density),
weight: 2,
opacity: 1,
color: 'white',
dashArray: '3',
fillOpacity: 0.7
};
}
L.geoJson(statesData, {style: style}).addTo(map);
</script>
</body>
</html>
\ No newline at end of file
<h1>market</h1>
\ No newline at end of file
<h1>population</h1>
\ No newline at end of file
<!DOCTYPE html>
<html lang="kr">
<head>
<title>RF-Project</title>
<!-- link에 들어가 있는건 지도 데이터를 위한 css 파일 -->
<!-- script에 들어가 있는건 지도 데이터를 위한 js 파일 -->
<!-- 직접 다운받아 넣을 수도 있는데 우선은 그냥 웹에서 불러올 수 있도록 해놨다. -->
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.6.0/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet@1.6.0/dist/leaflet.js"></script>
<!--css 내용 여기에 direct로 넣었다-->
<style>
#mapbase {position:relative; width:40%; height:0; padding-bottom:40%; }
.info {
padding: 6px 8px;
font: 14px/16px Arial, Helvetica, sans-serif;
background: white;
background: rgba(255,255,255,0.8);
box-shadow: 0 0 15px rgba(0,0,0,0.2);
border-radius: 5px;
}
.info h4 {
margin: 0 0 5px;
color: #777;
}
.legend {
line-height: 18px;
color: #555;
}
.legend i {
width: 18px;
height: 18px;
float: left;
margin-right: 8px;
opacity: 0.7;
}
</style>
<!--BOOTSTRAP 사용 부분-->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
</head>
<body>
<h1><a href="http://127.0.0.1:8000/market_analysis/maplist">Statistics on Return Farm Project</a></h1>
<br>
<h3>농산물 시장 유통에 대한 통계분석 입니다.</h3>
<br>
<ul class="nav justify-content-center">
<li class="nav-item">
<a class="nav-link active" href="http://127.0.0.1:8000/market_analysis/market">Market</a>
</li>
<li class="nav-item">
<a class="nav-link" href="http://127.0.0.1:8000/market_analysis/population">Population</a>
</li>
<li class="nav-item">
<a class="nav-link" href="http://127.0.0.1:8000/market_analysis/returnfarm">Return Farm</a>
</li>
</ul>
<!--return farm 단독 부분-->
<ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
<li class="nav-item" role="presentation">
<a class="nav-link" id="pills-home-tab" data-toggle="pill" href="#pills-home" role="tab" aria-selected="true">지역</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">내용</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">교육</a>
<a class="dropdown-item" href="#">지원정책</a>
</div>
</li>
<li class="nav-item" role="presentation">
<a class="nav-link" id="pills-contact-tab" data-toggle="pill" href="#pills-contact" role="tab" aria-selected="false">Return Farm</a>
</li>
</ul>
<div class="tab-content" id="pills-tabContent">
<div class="tab-pane fade" id="pills-home" role="tabpanel" aria-labelledby="pills-home-tab">Hello</div>
<div class="tab-pane fade" id="pills-profile" role="tabpanel" aria-labelledby="pills-profile-tab">Bonjour</div>
<div class="tab-pane fade" id="pills-contact" role="tabpanel" aria-labelledby="pills-contact-tab">안녕하세요</div>
</div>
<div id="mapbase"></div>
<script type="text/javascript">
///////////// 지도 생성해주는 부분임 //////////////
// map 객체 생성 map안에 넣어주는건 div id
// 위도, 경도, zoom 수준
var map = L.map('mapbase', {zoomDelta: 0.25, zoomSnap: 0}).setView([36.5205243,128.0540569], 7);
// tilelayer를 씌우는 작업 OSM을 사용했음
L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token={accessToken}', {
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>',
maxZoom: 10,
id: 'mapbox/light-v9',
tileSize: 512,
zoomOffset:-1,
accessToken: 'pk.eyJ1IjoidGpzZGszMTA1IiwiYSI6ImNrYWM5bXljZzB1N28ycnA5bTVsNHZsbnkifQ.W3-irWof5WMR8BcfBR4Ftw'
}).addTo(map);
// mapdata 가져오는 부분
// replace 쓰는 방법 : (바꾸기 전 문자, 바꾸고 난 후 문자)
var statesdata = "{{maps}}".replace(/&quot;/g,"\"");
statesdata = JSON.parse(statesdata);
function getColor(d) {
return d > 30 ? '#800026' :
d > 25 ? '#BD0026' :
d > 20 ? '#E31A1C' :
d > 15 ? '#FC4E2A' :
d > 10 ? '#FD8D3C' :
d > 5 ? '#FEB24C' :
d > 0 ? '#FED976' :
'#FFEDA0';
}
function style(feature) {
return {
fillColor: getColor(feature.properties.density),
weight: 2,
opacity: 1,
color: 'white',
dashArray: '3',
fillOpacity: 0.7
};
}
let key = Object.keys(statesdata.features[1].properties);
</script>
{% for data in exportdata %}
<script>
// density data 추가하는 부분
for(var j=0; j<statesdata.features.length; j++)
{
if (statesdata.features[j]['properties'][key[2]]=="{{data.city}}")
{
statesdata.features[j]['properties']['density']="{{data.count}}";
break;
}
}
</script>
{% endfor %}
<script>
var geojson;
L.geoJson(statesdata, {style: style}).addTo(map);
// mouseover event listener
function highlightFeature(e) {
var layer = e.target;
layer.setStyle({
weight: 5,
color: '#666',
dashArray: '',
fillOpacity: 0.7
});
if (!L.Browser.ie && !L.Browser.opera && !L.Browser.edge) {
layer.bringToFront();
}
info.update(layer.feature.properties);
}
// mouseout define
function resetHighlight(e) {
geojson.resetStyle(e.target);
info.update();
}
function zoomToFeature(e) {
map.fitBounds(e.target.getBounds());
}
function onEachFeature(feature, layer) {
layer.on({
mouseover: highlightFeature,
mouseout: resetHighlight,
click: zoomToFeature
});
}
geojson = L.geoJson(statesdata, {
style: style,
onEachFeature: onEachFeature
}).addTo(map);
</script>
<!--information, legend, zoom 넣는 부분-->
<div class="info"></div>
<script>
var info = L.control();
info.onAdd = function (map) {
this._div = L.DomUtil.create('div', 'info'); // create a div with a class "info"
this.update();
return this._div;
};
// method that we will use to update the control based on feature properties passed
info.update = function (props) {
this._div.innerHTML = '<h4>Korea Return Farm Density</h4>' + (props ?
'<b>' + props[key[2]] + '</b><br />' + props.density + ' 개의 교육 예정'
: 'Hover over a state');
};
info.addTo(map);
var legend = L.control({position: 'bottomright'});
legend.onAdd = function (map) {
var div = L.DomUtil.create('div', 'info legend'),
grades = [0, 5, 10, 15, 20, 25, 30],
labels = [],
from, to;
// loop through our density intervals and generate a label with a colored square for each interval
for (var i = 0; i < grades.length; i++) {
from = grades[i];
to = grades[i+1];
labels.push(
'<i style="background: '+ getColor(from + 1) + '"></i> ' + from + (to ? '&ndash;' + to :'+'));
}
div.innerHTML = labels.join('<br>');
return div;
};
legend.addTo(map);
</script>
</body>
</html>
\ No newline at end of file
......@@ -2,5 +2,8 @@ from django.conf.urls import url
from . import views
urlpatterns = [
url('maplist', views.maplist),
url('returnfarm/<int:maptype>', views.returnfarm),
url('population', views.population),
url('market', views.market),
url('', views.main),
]
\ No newline at end of file
......
......@@ -2,20 +2,33 @@ from django.shortcuts import render
from django.db.models import Count
from .models import RT_edu, Maps, RT_agri_policy
# Create your views here.
# Create your views here.
def dbselect(dbnameis):
if dbnameis=='agri':
policys = RT_agri_policy.objects.values('cntr').annotate(count=Count('cntr'))
return policys
elif dbnameis=='normal':
educations = RT_edu.objects.values(city='city').annotate(count=Count('city'))
return educations
def dbselect(contenttype, maptype):
if maptype == 9:
mapt = 'city'
elif maptype == 10:
mapt = 'cntr'
if contenttype=='policy':
myrtrn = RT_agri_policy.objects.values(mapt).annotate(count=Count(mapt))
return myrtrn
elif contenttype=='edu':
myrtrn = RT_edu.objects.values(mapt).annotate(count=Count(mapt))
return myrtrn
def maplist(request):
mapp = Maps.objects.get(id=10)
def main(request):
return render(request, 'main.html')
def returnfarm(request, maptype):
mapp = Maps.objects.get(id=maptype)
mapp = mapp.mapdata
exportdatas = dbselect('agri')
exportdatas = dbselect('policy', maptype)
context = {'exportdata': exportdatas, 'maps':mapp}
return render(request, 'maplist.html', context)
return render(request, 'returnfarm.html', context)
def population(request):
return render(request, 'population.html')
def market(request):
return render(request, 'market.html')
\ No newline at end of file
......