如何使用 Flask 在 PostgreSQL 中存儲線路？

Question

我有個問題。 我正在使用 Flask、PostgreSQL 和 Leaflet 中的數據庫構建應用程序。 在應用程序中，用戶可以通過單擊 map 來繪制一條線，所有點都添加到數組中並創建一條線（所有代碼在 js 中）。 我使用 SQLAlchemy 在 Flask 的數據庫中創建了一個列。 我想知道如何將這條道路作為一條線存儲在數據庫中？ SQLAlchemy中是否存在這種類型？

js中的Function

function clickonMap(event){
        dict = event.latlng
        coordintates.push(Object.values(dict))
        if(mymap.hasLayer(polyline)){
            polyline.remove()
        }
        mark = L.marker(event.latlng,{icon: markerIcon}).addTo(mymap);
        markers.push(mark)
        polyline = L.polyline(coordintates,{color: 'red'}).addTo(mymap)

Answer 1

使用現代fetch()將數據從瀏覽器發送到 Flask 的最小工作代碼，並將其保留在列表中。 稍后您可以將其加載回來，它還使用fetch()從 Flask 獲取它。

我使用render_template_string而不是render_template只是為了簡化測試。 每個人都可以將代碼復制到一個文件中並進行測試。

from flask import Flask, request, render_template_string, jsonify

app = Flask(__name__)


@app.route('/')
def index():
    return render_template_string('''
<!DOCTYPE html>

<html>

<head>
 <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css"
   integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="
   crossorigin=""/>       
<!-- Make sure you put this AFTER Leaflet's CSS -->
<script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"
   integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA=="
   crossorigin=""></script>       
</head>

<body>

<div id="map" style="width:400px; height: 300px;"></div>   

<button onclick="save();">Save</button>
<button onclick="clean();">Clean</button>
<button onclick="load();">Load</button>

<script>

    var mymap = L.map('map').setView([51.505, -0.09], 13);

    L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', {
        maxZoom: 18,
        attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, ' +
            'Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
        id: 'mapbox/streets-v11',
        tileSize: 512,
        zoomOffset: -1
    }).addTo(mymap);
    
    var coordintates = [];
    var polyline = [];
    
    function clickOnMap(event){
        latlng = event.latlng;
        
        coordintates.push(Object.values(latlng));
        
        if(mymap.hasLayer(polyline)){
            polyline.remove();
        }
        
        // mark = L.marker(event.latlng, {icon: markerIcon}).addTo(mymap);
        // markers.push(mark);
        
        polyline = L.polyline(coordintates, {color: 'red'}).addTo(mymap);
    }

    mymap.on('click', clickOnMap);

    function save() {
        // console.log(coordintates);
        
        fetch('/save', {
            method: 'POST',
            headers: {
              'Accept': 'application/json',
              'Content-Type': 'application/json'
            },
            body: JSON.stringify(coordintates)
        });
    }
    
    function clean() {
        if(mymap.hasLayer(polyline)){
            polyline.remove();
            coordintates = [];
        }
        
        // console.log(coordintates);
    }

    function load() {
        fetch('/load')
        .then(res => res.json())
        .then(data => {
                
            coordintates = data;

            // console.log(coordintates);
            
            if(mymap.hasLayer(polyline)){
                polyline.remove();
            }
            
            polyline = L.polyline(coordintates, {color: 'red'});
            // console.log(polyline);
            polyline.addTo(mymap);
        });
    }
    
</script>
</body>
</html>
''')

database = []

@app.route('/save', methods=['GET', 'POST'])
def save():
    data = request.json 
    print('save:', data)
    database.append(data)
    return "OK"

@app.route('/load', methods=['GET', 'POST'])
def load():
    if database:
        data = database[-1]
    else:
        data = []        
    print('load:', data)
    return jsonify(data)
    
if __name__ == '__main__':
    app.debug = True
    app.run() #debug=True

如何使用 Flask 在 PostgreSQL 中存儲線路？

問題描述

1 個解決方案

解決方案1
0 2021-05-19 14:54:11

如何使用 Flask 在 PostgreSQL 中存儲線路？

問題描述

1 個解決方案

解決方案1 0 2021-05-19 14:54:11

解決方案1
0 2021-05-19 14:54:11