[Django]Djangoで地図を作る

16126 ワード
drf geodjango postgis django leaflet テキストリンク
Maps with Django (2): GeoDjango, PostGIS, Leafletを参照してください.
上のブログは整理が行き届いていて、ちゃんと写真を撮れば地図が作れます.今回のインターンシップの会社は地図をベースに地図を作る会社なので、地図を扱うことが多いので、前にdjangoで地図の作り方を体験しました.まず、地図を作成するには複数のライブラリが必要です.実習用のライブラリをご紹介します.

🍃 Leaflet


Leafletは、Webマッピングアプリケーションを構築するためのオープンソースJavascriptライブラリです.詳細な説明と使い方はLeafletのWebサイトを参照してください.

🌐 Geodjango


GeoDjangoは、位置データの処理を可能にするdjangoプロジェクトの1つです.位置データは通常、グーグルマップの座標データを使用することを意味すると考えられる.このほか、3 dや2 d座標で計算するなどの機能も利用できます.詳細については、GeoDjangoの公式ファイルを参照してください.

🗄 Postgis


Postgisは、地理情報システム(GIS)オブジェクトをデータベースに格納できるオブジェクトリレーションシップ型データベースシステムPostgreSQLの拡張子です.PostgisはGistベースのR-Tree空間インデックスをサポートし、GISオブジェクトを解析し、空間を処理する機能を含む.詳細については、正式な書類を参照してください.

アプリケーションの作成


まず1つのプロジェクトを作成し、欲しいアプリケーションを作成します.
>django startproject dis_map
>django startapp markers
次に、INSTALLED APPSに生成されたアプリケーション名を追加します.
dis_map/dis_map/settings.py
INSTALLED_APPS = [
    "django.contrib.admin",
    "django.contrib.auth",
    "django.contrib.contenttypes",
    "django.contrib.sessions",
    "django.contrib.messages",
    "django.contrib.staticfiles",
    "markers",
]

空白の地図を作成


前の手順が完了したら、何も表示されていない空白の地図を作成します.
まずビューです.pyで地図のTemplateViewを作成します.
dis_map/markers/views.py
from django.views.generic.base import TemplateView


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

    template_name = "map.html"
地図に書いてある地図を作るためにdis mapにhtmlテンプレートを作成する必要があります.テンプレートが1つの場所に集中するため、dis mapにtemplatesファイルを作成します.mkdir templatesdis_map/markers/templates/map.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Markers Map</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  </head>
  <body>
  </body>
</html>
最後に、地図を表示するにはurl設定が必要です.
dis_map/markers/urls.py
from django.urls import path

from markers.views import MarkersMapView

app_name = "markers"

urlpatterns = [
    path("map/", MarkersMapView.as_view()),
]
親urlに/urlsをマークします.pyを見るように設定します.
dis_map/dis_map/urls.py
from django.contrib import admin
from django.urls import include, path

urlpatterns = [
    path("admin/", admin.site.urls),
    path("markers/", include("markers.urls")),
]
サーバーを回してhttp://127.0.0.1:8000/markers/map/に入ると、空の地図が表示されます.python manage.py runserver

Leafletを使用した地図の作成


まず地図テンプレートを修正します.
dis_map/markers/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/leaflet/dist/leaflet.css" />
    <script src="https:///unpkg.com/leaflet/dist/leaflet.js"></script>
  </head>
  <body>
    <div id="map"></div>
    <script src="{% static 'map.js' %}"></script>
  </body>
</html>
その後cssとjsも作成するので、dis map内にstaticというディレクトリを作成できます.mkdir static後の地図cssを創造する.少なくともcssを加えて地図を表示します.
dis_map/markers/static/map.css
html,
body {
    height: 100%;
    margin: 0;
}
#map {
    height: 100%;
    width: 100%;
}
最後は地図jsを作成します.
dis_map/markers/static/map.js
const copy = "© <a href='https://www.openstreetmap.org/copyright'>OpenStreetMap</a> contributors";
const url = "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png";
const osm = L.tileLayer(url, { attribution: copy });
const map = L.map("map", { layers: [osm] });
map.fitWorld(); # 이 부분이 전체 나라들을 보여주는 map view를 설정하고 최대 확대/축소 수준도 설정해준다.
定義した変数でOpenStreetMapレイヤを設定し、マップに接続します.
その後、サーバーを実行すると、空の地図が表示されます.python manage.py runserver
iOS ARCモードメモリ管理
ドキュメントテスト、装飾