我可以从数据库表中根据查询的结果在地图上放置一个标记。问题是当结果不止一个时,我无法在地图上放置多个标记。所以基本上,我想将来自db的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)


结果显示如下:

-33.863611
18.908333
-33.046667
18.677222
-33.046667
18.677222
-33.046667
18.677222
-33.046667
18.677222
-33.863611
18.913889
-33.863611
18.913889
-33.883611
18.927778
-33.883611
18.927778
-33.883611
18.927778
-33.883611
18.927778
-33.866667
18.916667
-33.866667
18.916667
-33.901389
18.775
-33.901389
18.775
-33.866667
18.916667
-33.866667
18.916667
-33.866667
18.916667
-33.866667
18.916667


        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代码。我似乎没有做的字符串格式化似乎并没有解决问题。由于没有更新的地图

最佳答案

这种情况下的想法是连接坐标:

# ...
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)


输出:

python - 将所有纬度和经度标记从数据库放置到sql结果到Openstreetmap/Leaflet映射上-LMLPHP

如果要更优雅地执行此操作,可以使用Jinja2或更好的folium

07-28 03:51
查看更多