使用 Leaflet 和 Flask 显示来自 MBTiles 文件的地图只会导致地图控件显示在网页中

Question

我正在尝试使用 Leaflet、Flask 和 Sqlite3 显示来自 MBTiles 文件的地图。我有新西兰地图的 MBTiles 文件，我想在网页上显示具有纬度和经度值的位置。我可以使用 Flask 路由提供图块，但是当我在浏览器中加载页面时，只显示地图的控件，而地图本身是不可见的。

这是网页的样子：

这是我的 Flask 应用程序代码 (

app.py

)：

import sqlite3
from flask import Flask, render_template

app = Flask(__name__)

@app.route('/')
def display_map():
    longitude = 175.6138189
    latitude = -40.34256356
    return render_template('map.html', lat=latitude, lon=longitude)

@app.route('/tiles/<int:z>/<int:x>/<int:y>.png')
def serve_tile(z, x, y):
    mbtiles_path = 'path/to/new-zealand.mbtiles'

    with sqlite3.connect(mbtiles_path) as conn:
        cursor = conn.cursor()
        cursor.execute(
            'SELECT tile_data FROM tiles WHERE zoom_level=? AND tile_column=? AND tile_row=?',
            (z, x, (2 ** z) - 1 - y)
        )
        tile = cursor.fetchone()
        if tile:
            return tile[0], 200, {
                'Content-Type': 'image/png',
                'Cache-Control': 'public, max-age=3600'
            }
    return 'Tile not found', 404

if __name__ == '__main__':
    app.run(debug=True)

这是我的

map.html

文件：

<!DOCTYPE html>
<html>
<head>
    <title>Location on Map</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" />
    <script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
</head>
<body>
    <div id="map" style="width: 100%; height: 100vh;"></div>
    <script>
        var lat = parseFloat("{{ lat|tojson|safe }}");
        var lon = parseFloat("{{ lon|tojson|safe }}");
        console.log("Latitude: ", lat);
        console.log("Longitude: ", lon);

        var map = L.map('map').setView([lat, lon], 13);
        L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
            attribution: 'Map data &copy; OpenStreetMap contributors'
        }).addTo(map);

        L.marker([lat, lon]).addTo(map).bindPopup("<b>Location</b><br>Latitude: " + lat + "<br>Longitude: " + lon).openPopup();
    </script>
</body>
</html>

当我在浏览器中加载页面时，控制台中出现以下错误：

map.html:15 Latitude:  NaN
map.html:16 Longitude:  NaN
Uncaught Error: Invalid LatLng object: (NaN, NaN)
    at new D (LatLng.js:32:9)
    at j (LatLng.js:123:11)
    at i.setView (Map.js:181:30)
    at map.html:18:32.

我怀疑javascipt代码没有从

app.py

接收纬度和经度值。这可能就是它说上述错误的原因。

我怎样才能解决这个问题并使用 MBTiles 文件显示正确位置的地图？

我使用 Flask 路由提供磁贴，但在网页上显示地图时遇到了问题。我对 Flask 应用程序代码和 HTML 文件进行了更改以尝试解决该问题，例如使用 Flask 的 render_template 函数将纬度和经度值传递给模板，并使用 tojson 过滤器将值转换为 JSON。

使用 Leaflet 和 Flask 显示来自 MBTiles 文件的地图只会导致地图控件显示在网页中

问题描述投票：0回答：0

最新问题

使用 Leaflet 和 Flask 显示来自 MBTiles 文件的地图只会导致地图控件显示在网页中

问题描述 投票：0回答：0

最新问题

问题描述投票：0回答：0