twtrubiks / leaflet-tutorials-interesting Goto Github PK

View Code? Open in Web Editor NEW

leaflet tutorials interesting use Python Flask

License: MIT License

Python 5.97% CSS 28.76% JavaScript 63.23% HTML 2.04%

leaflet-tutorials-interesting's Introduction

leaflet-tutorials-interesting

leaflet tutorials interesting use Python Flask 📝

Youtube Demo

Leaflet 與 Google Map 比較

leaflet 在手機上表現的效能以及速度勝過 Google Map
Google Map 精準度比 leaflet 高
leaflet 有很多額外的 plugins

安裝套件

確定電腦有安裝 Python 之後

clone 我的簡單範例

git clone https://github.com/twtrubiks/leaflet-tutorials-interesting

接著請在 cmd (命令提示字元) 輸入以下指令

pip install -r requirements.txt

使用方法以及執行畫面

先產生模擬資料

python generator_data.py

執行完畢後， app.db 裡會多出 200 筆資料，可以使用 SQLiteBrowser 觀看

接著我們設計簡單的 api ，其實就是去讀 app.db 的資料，接著在吐給前端而已。

@app.route("/api", methods=['POST'])
def api():
    db_data = MapPets.query.all()
    infornation_dic = {}
    infornation_list = []
    for data in db_data:
        infornation_dic['data'] = []
        infornation_dic['Name'] = data.Name
        infornation_dic['Picture'] = data.Picture
        infornation_dic['Color'] = data.Color
        infornation_dic['Longitude'] = data.Longitude
        infornation_dic['Latitude'] = data.Latitude
        infornation_list.append(infornation_dic)
        infornation_dic = {}

    return json.dumps(infornation_list)