GeoDjango配置开发leaflet地图

目录

1、环境配置

1.1 Pycharm配置

1.2 构建Django项目

1.3 Django环境配置

2、地图界面开发

2.1 界面配置

2.2 实现对数据库内容的显示

2.3 实现查询功能

参考资料

---

1、环境配置

1.1 Pycharm配置

（1）打开cmd的conda环境，创建一个conda环境

conda create -n web_env5

选择y，安装成功后激活环境

（2）安装numpy，利用conda命令

conda install numpy

然后安装gdal，这需要先下载gdal的wheel包，其它方式安装会出现很多问题。

如果要安装gdal新的版本的wheel，请参考GitHub - cgohlke/geospatial-wheels: Geospatial library wheels for Python on Windows

利用pip安装，用conda安装经过多次安装测试，发现在django里很难配置成功.定位到wheel的位置，利用pip安装

然后，选择y，等待安装完成

（3）安装django包，使用pip install django可以安装最新版本，使用conda只能安装4.1版本

（4）安装psycopg2包，实现对postgresql数据库进行管理，使用命令pip install psycopg2。使用psycopg2是因为，后面要对GIS数据的管理将使用PostGIS和Postgresql数据。

（5）到这里这次课程设计涉及到的包都安装完成了，接下来重新配置pycharm的环境

打开pycharm，在菜单中选择setting

选择python，添加刚才安装的环境

1.2 构建Django项目

(1)在命令框进行创建Django的项目

使用如下命令创建mysite项目

django-admin startproject mysite

之后，得到文件结构

进入mysite路径，使用py manage.py runserver 查看是否安装成功

(2)创建自己页面，创建app

利用如下命令，创建app，并注册app

python manage.py startapp demo

并在demo文件夹中添加urls.py文件，后续为了使用html、css和JavaScript，需要添加static和templates文件夹。结构具体如下

其他详细的配置请参考：安装及第一个项目 | 大江狗的博客

1.3 Django环境配置

(1) 在django项目环境中配置gdal。

首先，配置gdal环境，找电脑上安装gdal位置，然后在如下的地方配置

if os.name == 'nt':
    VIRTUAL_ENV_BASE =r'D:\Software\Miniconda3\envs\web_env5'
    os.environ['PATH'] = os.path.join(VIRTUAL_ENV_BASE, r'.\Lib\site-packages\osgeo') + ';' + os.environ['PATH']
    os.environ['PROJ_LIB'] = os.path.join(VIRTUAL_ENV_BASE, r'.\Lib\site-packages\osgeo\data\proj') + ';' + os.environ['PATH']

    GDAL_LIBRARY_PATH = r'D:\Software\Miniconda3\envs\web_env5\Lib\site-packages\osgeo\gdal.dll'
    GEOS_LIBRARY_PATH=r'D:\Software\Miniconda3\envs\web_env5\Lib\site-packages\osgeo\geos_c.dll'

添加gis模块处理空间数据。

配置postgresql数据库。postgresql数据库的安装和postgis的安装请参考其他教程。

进行数据库设计

将模型进行配置，在admin文件中，这个后面就可以在管理界面进行设置了

进行测试，是否配置好，如果看到下面结果，则说明配置成功，但还需要配置数据库

进行数据库迁移，使用如下命令进行配置

python manage.py makemigrations

python manage.py migrate

可以参考如下教程，进行配置：

Django连接MySQL和PostgreSQL数据库 | 大江狗的博客

接下来创建Django Admin后台管理系统

利用如下命令，构建用户名和密码

python manage.py createsuperuser

接下来就可以运行命令，利用py manage.py runserver,看到下面的结构就是正确的

在浏览器中输入http://127.0.0.1:8000/admin/

登陆后，就可以看到我们用的Demo模型

点击add就可以添加，点击save，得到结果。

2、地图界面开发

2.1 界面配置

界面配置，可以参考：

Paolo Melchiorre - Maps with Django (2): GeoDjango, PostGIS, Leaflet

Demo右键添加templates文件夹，添加demo,创建html

在response里绑定map.html

测试，使用命令py manage.py runserver

配置地图应用，使用leaflet，新建map.css和map.js文件在

修改map.html

添加css内容

添加map.js内容，参考leaflet官网。https://leafletjs.com/

运行py manage.py runserver,运行查看效果，至此绑定地图的工作应经完成。

2.2 实现对数据库内容的显示

修改这个地方就可以，Demo.objects.all()是获取表中所有的记录

在map.html中添加一段测试代码看是否已经传入数据

打开浏览器，用F12命令，在控制台看到数据说明成功。

接下来读取数据，在map.js文件中操作

可以看到结果，说明结果正确。

2.3 实现查询功能

添加界面，在map.html中

实现效果

要实现交互，需要引入jquery包，在map.html中添加

接下来我们要实现点击按钮，输入内容进行查询，有两个步骤，一个是实现过滤方法实现

在view.py中添加查询过滤

同时将mapresults在urls中添加

另外要在map.js文件添加代码实现操作逻辑，这里就要用到jquery的使用，jquery的使用可以参考https://jquery.com/

https://www.w3schools.com/jquery/default.asp

运行py manage.py runserver,会出现跨域的错误

需要修改配置，

首先安装pip install django-cors-headers中间键

按照如下修改，在setting文件中

然后再查询，结果就只显示符合条件名称的点

参考资料

http://c.biancheng.net/django/

使用Django3.0.3建立一个网站，基于windows、IDE:Pycharm_田小呱的博客-CSDN博客

开始学习 HTML - 学习 Web 开发 | MDN

Django 简介 | 菜鸟教程

大江狗的Django入门教程 | 大江狗的博客

Django Tutorial (w3schools.com)

Geodjango-GDAL Setup Windows 10

Django POST请求报错Forbidden (403) CSRF verification failed. Reques“POST /index/image HTTP/1.1“ 403 2870_wyyyyyyyy_的博客-CSDN博客