django-leaflet & django-geojson을 활용한 웹매핑
Easy Webmapping with django-leaflet & django-geojson
1. django-leaflet 설치
django-leaflet을 통해 장고 프로젝트에서 Leaflet 사용이 가능하다. 지리적 정보에 대한 수정폼 및 맵을 표시하는 템플릿태그 등을 포함한다.
Documentaion https://django-leaflet.readthedocs.io/en/latest/installation.html
1) Installation1 2 3 4 5 6 7 8 9 10 11 | (envalicia) root@localhost:~/vikander# pip install django-leaflet Collecting django-leaflet Downloading django-leaflet-0.22.0.tar.gz (269kB) 100% |████████████████████████████████| 276kB 1.4MB/s Requirement already satisfied: Django in /root/anaconda/envs/envalicia/lib/python3.5/site-packages (from django-leaflet) Building wheels for collected packages: django-leaflet Running setup.py bdist_wheel for django-leaflet ... done Stored in directory: /root/.cache/pip/wheels/c4/4b/0d/bc4169e15af92d93fb3216e0991cc43bede99e90de0f4e5f5d Successfully built django-leaflet Installing collected packages: django-leaflet Successfully installed django-leaflet-0.22.0 | cs |
2) Configuration
(1) INSTALLED_APPS 에 leaflet 추가
1 2 3 4 | # settings.py INSTALLED_APPS = [ 'leaflet', ] | cs |
(2) HTML 헤더 추가
1 2 3 4 5 6 7 | {% load leaflet_tags %} <head> ... {% leaflet_js %} {% leaflet_css %} </head> | cs |
(3) 페이지에 MAP 추가
1 2 3 4 5 6 | ... <body> ... {% leaflet_map "yourmap" %} ... </body> | cs |
2. Django-geojson 설치
django-geojson은 장고 프로젝트에서 GeoJSON 조작을 가능하게 해준다.
Documentation https://django-geojson.readthedocs.io/en/latest/
간단한 앱
1) Installation
1 2 3 4 5 6 7 8 9 10 11 | (envalicia) root@localhost:~/vikander# pip install django-geojson Collecting django-geojson Downloading django-geojson-2.10.0.tar.gz Requirement already satisfied: Django in /root/anaconda/envs/envalicia/lib/python3.5/site-packages (from django-geojson) Requirement already satisfied: six in /root/anaconda/envs/envalicia/lib/python3.5/site-packages (from django-geojson) Building wheels for collected packages: django-geojson Running setup.py bdist_wheel for django-geojson ... done Stored in directory: /root/.cache/pip/wheels/cf/ba/10/1303b47cf73bfe9dfec0ed22295d73fb8861c4f1a2e733ab81 Successfully built django-geojson Installing collected packages: django-geojson Successfully installed django-geojson-2.10.0 | cs |
맵 위젯 필드를 가진 GeoJSON 이 필요한 경우
1 2 3 4 5 6 7 8 9 | (envalicia) root@localhost:~/vikander# pip install "django-geojson [field]" Requirement already satisfied: django-geojson[field] in /root/anaconda/envs/envalicia/lib/python3.5/site-packages Requirement already satisfied: Django in /root/anaconda/envs/envalicia/lib/python3.5/site-packages (from django-geojson[field]) Requirement already satisfied: six in /root/anaconda/envs/envalicia/lib/python3.5/site-packages (from django-geojson[field]) Requirement already satisfied: django-leaflet>=0.12; extra == "field" in /root/anaconda/envs/envalicia/lib/python3.5/site-packages (from django-geojson[field]) Collecting jsonfield; extra == "field" (from django-geojson[field]) Downloading jsonfield-2.0.1-py2.py3-none-any.whl Installing collected packages: jsonfield Successfully installed jsonfield-2.0.1 | cs |
2) Configuration
(1) INSTALLED_APPS 에 djangojson 추가
1 2 3 4 | # settings.py INSTALLED_APPS = [ 'djgeojson', ] | cs |
3. mushrooms
간단한 앱
1) mushrooms 앱 생성
1 | (envalicia) root@localhost:~/vikander# django-admin.py startapp mushrooms | cs |
2) INSTALLED_APPS 에 mushrooms 추가
1 2 3 4 | # vikander/vikander/settings.py INSTALLED_APPS = [ 'mushrooms', ] | cs |
3) url 설정
1 2 3 4 | # vikander/vikander/urls.py urlpatterns = [ url(r'^mushrooms/', include('mushrooms.urls')), ] | cs |
4) mushrooms 앱 url 설정
1 2 3 4 5 6 7 8 9 10 11 12 13 | # vikander/mushrooms/urls.py from django.conf import settings from django.conf.urls import url from django.conf.urls.static import static from django.contrib import admin from django.views.generic import TemplateView from djgeojson.views import GeoJSONLayerView from .models import MushroomSpot urlpatterns = [ url(r'^admin/', admin.site.urls), url(r'^$', TemplateView.as_view(template_name='index.html'), name='home'), url(r'^data.geojson$', GeoJSONLayerView.as_view(model=MushroomSpot, properties=('title', 'description', 'picture_url')), name='data') ] + static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT) | cs |
5) Mushroom 위치 정보를 저장하는 모델 생성
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | # vikander/mushrooms/models.py from djgeojson.fields import PolygonField from django.db import models class MushroomSpot(models.Model): title = models.CharField(max_length=256) description = models.TextField() picture = models.ImageField() geom = PolygonField() def __unicode__(self): return self.title @property def picture_url(self): return self.picture.url | cs |
6) 마이그레이션 실행
1 2 3 4 5 6 7 8 9 10 | (envalicia) root@localhost:~/vikander# python manage.py makemigrations Migrations for 'mushrooms': 0001_initial.py: - Create model MushroomSpot (envalicia) root@localhost:~/vikander# python manage.py migrate Operations to perform: Apply all migrations: mushrooms Running migrations: Rendering model states... DONE Applying mushrooms.0001_initial... OK | cs |
7) 관리자 페이지에 앞서 만든 모델 등록
1 2 3 4 5 6 7 | # vikander/mushrooms/admin.py from leaflet.admin import LeafletGeoAdmin from django.contrib import admin from . import models as mushrooms_models admin.site.register(mushrooms_models.MushroomSpot, LeafletGeoAdmin) | cs |
8) Spatial extent 정의
spatial extent 는 위도와 경도로 이루어진 경계박스(bounding box)로 관련 데이터를 모두 포함하는 가장 작은 사각형 정보를 말한다.
1 2 3 4 | # vikander/vikander/settings.py LEAFLET_CONFIG = { 'SPATIAL_EXTENT': (5.0, 44.0, 7.5, 46) } | cs |
'SPATIAL_EXTENT' : (좌측 상단 경도, 좌측 상단 위도, 우측 하단 경도, 우측 하단 위도)
수도권 인근을 표시해보면 다음과 같다.
9) 관리자 페이지에 하나의 장소에 정보를 입력해서 테스트해보자.
※ Edit Django geometries fields with Leaflet
http://blog.mathieu-leplatre.info/edit-django-geometries-fields-with-leaflet.html