如何在Flask中将前端绘制的线数据存储到PostgreSQL数据库？

针对你的场景有多种SQLAlchemy类型可选，可根据你的业务需求选择：

• 专业空间数据存储方案（适合后续需要做空间查询、距离计算的场景）
  你使用的PostgreSQL支持安装PostGIS空间扩展，配套SQLAlchemy可使用GeoAlchemy2库提供的Geometry类型，指定子类型为LineString即可完美匹配你生成的折线数据，且和Leaflet默认的WGS84坐标系完全兼容。
  字段定义示例：

  from geoalchemy2 import Geometry
  from sqlalchemy import Column, Integer
  
  class Route(db.Model):
      id = Column(Integer, primary_key=True)
      # srid=4326对应WGS84坐标系，和Leaflet默认坐标系一致
      line = Column(Geometry(geometry_type='LINESTRING', srid=4326))
  

• 轻量无扩展方案（不需要额外安装PostGIS的场景）
  • 方案1：使用ARRAY类型直接存储二维坐标数组，刚好匹配你JS侧coordinates的[[纬度,经度],...]结构：

    from sqlalchemy import Column, Integer, ARRAY, Float
    
    class Route(db.Model):
        id = Column(Integer, primary_key=True)
        coordinates = Column(ARRAY(Float, dimensions=2))
    

  • 方案2：使用JSONB类型存储，灵活性更高，不需要固定数组维度，适合后续需要附加其他路线属性的场景：

    from sqlalchemy import Column, Integer, JSONB
    
    class Route(db.Model):
        id = Column(Integer, primary_key=True)
        route_data = Column(JSONB)
    

你JS侧提交数据时，直接把coordinates数组转成JSON字符串传给Flask后端，后端根据你选择的存储类型做对应转换即可存入数据库。

你给出的相关JS代码如下：

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)

内容的提问来源于stack exchange，提问作者Bartek Olek