透過Folium將圖片標記在地圖上,並使用Django轉換成網頁服務
本專案程式在GitHub上,https://github.com/jang0820/pmap
讀取照片的GPS座標,使用Folium標記在地圖上,並顯示圖片於地圖上,執行結果如下圖。
Step1)建立Python虛擬環境,例如map,並安裝套件folium與django
#conda create -n map python=3.9
#conda activate map
(map)# pip install folium
(map)# pip install django
(map)# pip install exif
Step2)建立django的專案,例如pmap
(map)# django-admin startproject pmap
建立資料庫
(map)# python manage.py migrate
Step3)在專案pmap下新增一個應用程式map
(map)# cd pmap
(map)# python manage.py startapp map
Step4)開啟常用的python編輯程式,python執行環境設定給剛剛新增的map虛擬環境。修改或新增以下檔案。
修改pmap\map\views.py,填入以下程式,本範例圖片為DSC_8501.jpg(https://drive.google.com/file/d/18tK6lShbP1TLvH9W9wL0WON_XGRJD72f/view?usp=sharing),內有GPS座標,其縮圖為1.jpg(https://drive.google.com/file/d/1PLO5m0mafXzgOkZ8hamiR8_fF2yb12fR/view?usp=sharing),也可以使用自己的圖片(exif要有GPS座標)。
Step5)加入應用程式map,並設定樣板資料夾,新增樣板map.html
修改pmap\pmap\settings.py,在INSTALLED_APPS新增map如下方的第8行,在TEMPLATES的DIRS新增templates資料夾如下方的第26行。
新增資料夾templates(\pmap\templates),與manage.py(\pmap\manage.py)在同一層
建立樣板map.html(\pmap\templates\map.html)
Step6)修改\pmap\pmap\urls.py,新增應用程式map對應的網址
Step7)新增應用程式map的網址對應,新增\pmap\map\urls.py
Step8)執行Django
(map)# python manage.py runserver
點選以下藍色山圖示,就會跳出圖片DSC_8501.jpg的縮圖1.jpg,座標為該照片DSC_8501.jpg的拍攝時的GPS資料,並標記在地圖上
參考資料:
How I Integrated Folium with Django(https://medium.com/@FatemeFouladkar/how-i-integrated-folium-with-django-d04dc5b25048)