将数据库中的所有纬度和经度标记放置到来自 sql 结果的 Openstreet/Leaflet 地图上

Question

我可以从我的数据库 table 中根据查询结果在地图上放置一个标记。问题是当我的结果不止一个时，我无法在地图上放置多个标记。所以基本上，我想将数据库中 sql 查询中的所有经纬度标记放在 OSM/Leaflet MAP 上。

我看过一个类似的例子，但是编码不太一样。

def search_all(self):

    print ('Searching All...')

    looking = str(self.lookall.text())        

    conn = Connection to DB 

    cursor = conn.cursor()        
    query = "SELECT*FROM Relevant Tables"
    cursor.execute(query)    
    results = cursor.fetchall()
    self.tableWidget.setRowCount(0)        
    for row_number, row_data in enumerate(results):            
        self.tableWidget.insertRow(row_number)            
        for column_number, data in enumerate (row_data):                
            self.tableWidget.setItem(row_number,column_number,QtWidgets.QTableWidgetItem(str(data)))

            pass
        pass

for i in range(1,len(results)):


        lat = results[i][5]
    long = results[i][6]]

        print (lat)
    print (long)

结果打印如下：

        html = """<!DOCTYPE html>
<html>
  <head>
    <link
      rel="stylesheet"
      href="https://unpkg.com/leaflet@1.3.1/dist/leaflet.css"
      integrity="sha512-Rksm5RenBEKSKFjgI3a41vrjkw4EVPlJ3+OiI65vTjIdo9brlAacEuKOiQ5OFh7cOI1bkDwLqdLw3Zg0cRJAAQ=="
      crossorigin=""
    />
    <script
      src="https://unpkg.com/leaflet@1.3.1/dist/leaflet.js"
      integrity="sha512-/Nsx9X4HebavoBvEBuyp3I7od5tA0UzAxs+j83KgC8PU0kgB4XiK4Lfe4y4cgBtaRJQEIFCW+oC506aPT2L1zw=="
      crossorigin=""
    ></script>
  </head>
  <body>
    <div id="mapDiv" style="width: 1300px; height: 500px"></div>

    <script>
      var lat = { lat };
      var long = { long };
      var len = { lent };
      var i = 0;

      for (var i = 0; i < { lent }; i++) {{
        marker = new L.marker({ lat }, { lon }).addTo(map);
      }}

      map = L.map("mapDiv").setView([lat, lon], 13);

      L.tileLayer("https://tile.openstreetmap.org/{{z}}/{{x}}/{{y}}.png", {{
        attribution:
          'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors',

        maxZoom: 20
      }}).addTo(map);

      // add marker to the map

      marker = L.marker([lat, lon]).addTo(map);
    </script>
  </body>
</html>"""

    os2 = html.format(lat = lat,lon = lon , len = lent)

    self.view.setHtml(os2)```

我可以从 DB 的 SQL 查询中获取我的纬度和经度。我不太确定如何将其实现到 OSM 的 HTML 代码中。我所做的字符串格式设置似乎并没有起到作用。由于没有更新地图

Answer 1

本例中的想法是连接坐标：

# ...
coordinates = []
for result in results:
    coordinates.append((result[5], result[6]))

lat_center = sum([coordinate[0] for coordinate in coordinates]) / len(
    coordinates
)
lng_center = sum([coordinate[1] for coordinate in coordinates]) / len(
    coordinates
)

html = r"""
<!DOCTYPE html>
    <html>
        <head>
        <style type="text/css">
                html { height: 100%; }
                body { height: 100%; margin: 0; padding: 0 }
                #mapid { height: 100% }
        </style>
        <link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.1/dist/leaflet.css" integrity="sha512-Rksm5RenBEKSKFjgI3a41vrjkw4EVPlJ3+OiI65vTjIdo9brlAacEuKOiQ5OFh7cOI1bkDwLqdLw3Zg0cRJAAQ==" crossorigin=""/>
        <script src="https://unpkg.com/leaflet@1.3.1/dist/leaflet.js" integrity="sha512-/Nsx9X4HebavoBvEBuyp3I7od5tA0UzAxs+j83KgC8PU0kgB4XiK4Lfe4y4cgBtaRJQEIFCW+oC506aPT2L1zw==" crossorigin=""></script>
        </head>
    <body>
        <div id="mapDiv" style="width:100%; height:100%"></div>
        <script>
"""
html += "var map = L.map('mapDiv').setView([{lat}, {lng}], 10);".format(
    lat=lat_center, lng=lng_center
)
html += """
    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
        attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
    }).addTo(map);
"""

for latitude, longitude in coordinates:
    html += "L.marker([{lat}, {lng}]).addTo(map);\n".format(
        lat=latitude, lng=longitude
    )

html += "</script> </body> </html>"
self.view.setHtml(html)

输出：

如果你想更优雅地做到这一点，你可以使用 Jinja2 or better folium

将数据库中的所有纬度和经度标记放置到来自 sql 结果的 Openstreet/Leaflet 地图上

Placing all Lat and Long markers from database onto Openstreet/Leaflet map from sql results

python

pyqt

openstreetmap

leaflet

pyqt5