Django 지도(제1부분): GeoDjango, SpatiaLite, 전단지

28989 단어 django python tutorial javascript

이것은 파이썬 기반의 웹 프레임워크인 Django를 사용하여 웹 지도를 만드는 빠른 입문 안내서입니다. Django는 그 모듈인 GeoDjango, SQLite 데이터베이스와 공간을 이용하여 SpaliaLite와 Molapper를 확장합니다. 후자는 상호작용 지도를 위한 JavaScript 라이브러리입니다.

소개하다.

이 설명서에서는 Django(Python 기반 웹 프레임워크)를 사용하여 최소한의 웹 지도를 만드는 방법을 살펴봅니다. 기본 항목부터 몇 줄의 코드를 작성하고 최소한 다른 소프트웨어를 추가하는 방법입니다.

GeoDjango, Django 지리 모듈

SpatiaLite, SQLite 공간 확장

전단지, 인터랙티브 지도를 위한 자바스크립트 라이브러리.

요구 사항

유일하게 필요한python 패키지는 Django입니다.

Django가 설치되어 있다고 가정합니다.

이 설명서는 Django 3.1과 Python 3.8을 사용하여 테스트합니다.

프로젝트 만들기

다음 명령을 사용하여 작업공간 디렉토리에 기본 항목을 작성해야 합니다.

$ django-admin startproject mymap

이렇게 하면 디렉토리mymap가 다음과 같이 배치됩니다.

mymap/
├── manage.py
└── mymap
    ├── __init__.py
    ├── asgi.py
    ├── settings.py
    ├── urls.py
    └── wsgi.py

Markers 응용 프로그램 만들기

응용 프로그램을 만들려면 manage.py와 같은 디렉토리에 있는지 확인하고 다음 명령을 입력합니다.

$ python manage.py startapp markers

이렇게 하면 디렉토리markers가 다음과 같이 배치됩니다.

markers/
├── __init__.py
├── admin.py
├── apps.py
├── migrations
│   └── __init__.py
├── models.py
├── tests.py
└── views.py

Markers 응용 프로그램 활성화

설치된 적용 설정 수정markers에 INSTALLED_APPS에 mymap/settings.py 추가

INSTALLED_APPS = [
    "django.contrib.admin",
    "django.contrib.auth",
    "django.contrib.contenttypes",
    "django.contrib.sessions",
    "django.contrib.messages",
    "django.contrib.staticfiles",
    "markers",
]

빈 웹 맵 추가

응용 프로그램에 빈 웹 페이지를 추가합니다.

템플릿 뷰 추가

TemplateView에 views.py을(를) 추가해야 합니다.

"""Markers view."""

from django.views.generic.base import TemplateView


class MarkersMapView(TemplateView):
    """Markers map view."""

    template_name = "map.html"

맵 템플릿 추가

templates/에 markers/ 디렉토리를 추가해야 합니다.

$ mkdir templates

및 map.html의 markers/templates/ 템플릿:

{% load static %}
<!doctype html>
<html lang="en">
<head>
  <title>Markers Map</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" type="text/css" href="{% static 'map.css' %}">
  <link rel="stylesheet" type="text/css" href="https://unpkg.com/[email protected]/dist/leaflet.css">
  <script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
</head>
<body>
  <div id="map"></div>
  <script src="{% static 'map.js' %}"></script>
</body>
</html>

javascript와 css 파일 추가

static/에 markers/ 디렉토리를 추가해야 합니다.

$ mkdir static

map.css에 markers/static/ 스타일시트를 추가합니다.

html, body {
  height: 100%;
  margin: 0;
}
#map {
  width: 100%;
  height: 100%;
}

map.js에 markers/static/ 스타일시트를 추가합니다.

const attribution = '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
const map = L.map('map')
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { attribution: attribution }).addTo(map);
map.fitWorld();

새 URL 추가

urls.py에 markers/ 개의 파일을 추가합니다.

"""Markers urls."""

from django.urls import path

from .views import MarkersMapView

app_name = "markers"

urlpatterns = [
    path("map/", MarkersMapView.as_view()),
]

urls.py에서 수정mymap/:

"""mymap URL Configuration."""

from django.contrib import admin
from django.urls import include, path

urlpatterns = [
    path("admin/", admin.site.urls),
    path("markers/", include("markers.urls")),
]

테스트 네트워크 맵

현재 다음 명령을 실행하여 빈 웹 지도를 테스트할 수 있습니다.

$ python manage.py runserver

이제 서버가 실행되었으므로 웹 브라우저를 사용하여 액세스http://127.0.0.1:8000/markers/map/하십시오.'지도 표시' 페이지와 완전한 페이지 지도를 볼 수 있습니다.성공했어!

빈 인터넷 지도 페이지

지리적 피쳐 추가

SpatiaLite 설치

설치 SQLite 공간 확장 SpatiaLite:

Debian 기반 GNU/Linux 릴리스(es: Debian, Ubuntu 등):

$ apt install libsqlite3-mod-spatialite

자체 제작 소프트웨어를 사용하는 macOS의 경우:

$ brew install spatialite-tools

데이터베이스 엔진 변경

DATABASES에서 기본 엔진 수정 mymap/settings.py

DATABASES = {
    "default": {
        "ENGINE": "django.contrib.gis.db.backends.spatialite",
        "NAME": BASE_DIR / "db.sqlite3",
    }
}

잔고

설치된 적용 설정 수정GeoDjango에 INSTALLED_APPS에 mymap/settings.py 추가

INSTALLED_APPS = [
    "django.contrib.admin",
    "django.contrib.auth",
    "django.contrib.contenttypes",
    "django.contrib.sessions",
    "django.contrib.messages",
    "django.contrib.staticfiles",
    "django.contrib.gis",
    "markers",
]

태그 추가

지금 우리는 지도에 약간의 표시를 추가할 수 있다.

마커 모델 추가하기

우리는 Marker에 markes/models.py 모델을 추가할 것이다.

"""Markers models."""

from django.contrib.gis.db.models import PointField
from django.db import models


class Marker(models.Model):
    """A marker with name and location."""

    name = models.CharField(max_length=255)
    location = PointField()

이제 새 모델에 대한 마이그레이션을 생성해야 합니다.

$ python manage.py makemigrations

그런 다음 이 마이그레이션을 SQLite 데이터베이스에 적용합니다.

$ python manage.py migrate

태그 관리자 활성화

새 태그를 삽입하려면 markes/admin.py에 태그 관리자를 추가해야 합니다.

"""Markers admin."""

from django.contrib.gis import admin

from .models import Marker


@admin.register(Marker)
class MarkerAdmin(admin.OSMGeoAdmin):
    """Marker admin."""

    list_display = ("name", "location")

테스트 관리자

로그인하여 테스트할 관리자 사용자를 만들어야 합니다.

$ python manage.py createsuperuser

이제 다음 명령을 실행하는 관리자를 테스트할 수 있습니다.

$ python manage.py runserver

이제 서버가 실행되었으므로 웹 브라우저를 사용하여 액세스http://127.0.0.1:8000/admin/markers/marker/add/하십시오.맵의 작은 위젯이 있는 새 표시를 추가하는 '표시' 관리 페이지를 볼 수 있습니다.나는 최근에 등반한 산봉우리에 "몬테아마로 2793미터"라는 표시를 붙였다.🇮🇹"

관리 페이지에 태그를 추가합니다.

네트워크 맵의 모든 태그 표시

뷰에 모든 태그 추가

우리는 serializer의 GeoJSON 상하문에 MarkersMapView의 모든 표시를 markes/views.py로 추가할 수 있다.

"""Markers view."""

import json

from django.core.serializers import serialize
from django.views.generic.base import TemplateView

from .models import Marker


class MarkersMapView(TemplateView):
    """Markers map view."""

    template_name = "map.html"

    def get_context_data(self, **kwargs):
        """Return the view context data."""
        context = super().get_context_data(**kwargs)
        context["markers"] = json.loads(serialize("geojson", Marker.objects.all()))
        return context

markes 사전의 context 키 값은 다음과 같습니다.

{
    "type": "FeatureCollection",
    "crs": {
        "type": "name",
        "properties": {
            "name": "EPSG:4326"
        }
    },
    "features": [
        {
            "type": "Feature",
            "properties": {
                "name": "Monte Amaro 2793m \ud83c\uddee\ud83c\uddf9",
                "pk": "1"
            },
            "geometry": {
                "type": "Point",
                "coordinates": [
                    14.08591836494682,
                    42.08632592463349
                ]
            }
        }
    ]
}

템플릿에 GeoJSON 삽입

json_script 내장 필터를 사용하면 Python dict와 모든 태그를 GeoJSON inmarkers/templates/map.html으로 안전하게 출력할 수 있습니다.

{% load static %}
<!doctype html>
<html lang="en">
<head>
  <title>Markers Map</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" type="text/css" href="{% static 'map.css' %}">
  <link rel="stylesheet" type="text/css" href="https://unpkg.com/[email protected]/dist/leaflet.css">
  <script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
</head>
<body>
  {{ markers|json_script:"markers-data" }}
  <div id="map"></div>
  <script src="{% static 'map.js' %}"></script>
</body>
</html>

맵의 모든 태그 렌더링

우리는 GeoJSON의 Leaflet 렌더링markers/static/map.js과 네트워크 맵의 모든 태그를 사용할 수 있습니다.

const attribution = '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
const map = L.map('map')
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { attribution: attribution }).addTo(map);
const markers = JSON.parse(document.getElementById('markers-data').textContent);
let feature = L.geoJSON(markers).bindPopup(function (layer) { return layer.feature.properties.name; }).addTo(map);
map.fitBounds(feature.getBounds(), { padding: [100, 100] });

채워진 맵 테스트

나는 지도에 그것들을 표시하기 위해 세계에서 가장 높은 점이나 가장 낮은 점의 다른 표시를 채웠다.
다음 명령을 실행하여 채워진 웹 맵을 테스트할 수 있습니다.

$ python manage.py runserver

이제 서버가 실행되었으므로 웹 브라우저를 사용하여 액세스http://127.0.0.1:8000/markers/map/하십시오.너는 완전한 지도와 모든 표시가 있는 '지도 표시' 페이지를 볼 수 있을 것이다.성공했어!

지도에는 내가 세계에서 방문한 최고점이나 최저점의 표시가 있고 내가 최근에 등반한 산봉우리의 팝업 창이 열렸다.
지도에는 내가 세계에서 방문한 최고점이나 최저점의 표시가 있고 내가 최근에 등반한 산봉우리의 팝업 창이 열렸다.

호기심

내가 최근에 아마로 산 정상에 간 도보 여행에 대해 더 알고 싶다면, 내 비키 계정Round trip hike from Rifugio Pomilio to Monte Amaro 🔗에서 볼 수 있다.

결론

우리는 외부 서비스를 사용하지 않고 최소한의 소프트웨어를 사용하려는 전체 기능 지도의 예시를 보여 주었다.
이 지도는 SQLite와 Django 템플릿을 사용하는 간단한 항목에 몇 개의 점을 표시하기에 충분하다.
미래의 글에서 우리는 Django Rest 프레임워크, PostGIS 등을 어떻게 사용해서 이 지도를 더욱 선진적으로 만드는지 보게 될 것이다.더욱 동적인 방식으로 대량의 표기를 나타내다.
기대하세요.
바울

Resources

GeoDjango - Dajngo Documentation 🔗

Leaflet API reference 🔗

SpatiaLite - SQL functions reference list 🔗

Safely Including Data for JavaScript in a Django Template 🔗

라이선스

본 논문 및 관련 프레젠테이션에 대한 지식 공유 서명 공유 라이센스(CC BY-SA) 게시

오리지널

내 블로그에 처음 게시된 내용:
https://www.paulox.net/2020/12/08/maps-with-django-part-1-geodjango-spatialite-and-leaflet/

Reference

이 문제에 관하여(Django 지도(제1부분): GeoDjango, SpatiaLite, 전단지), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/pauloxnet/maps-with-django-part-1-geodjango-spatialite-and-leaflet-2bn2

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)

AWS WorkSpace 제작 및 로그인 후 알림 메시지 설정

AWS의 Virtual MFA Device를 잃을 때 어떻게 되는지.

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다