javascript - Flask + Leaflet - 如何使用自定义本地图块？（未找到 GET 404）

Question

我正在尝试使用 Flask 在 OSM 基础层（来自 Leaflet.js）顶部创建一个带有自定义图块的 Leaflet 地图。
我从地理参考的 GeoTIFF 图像生成了一组图块，我首先使用标准 CSS / HTML / JS 将它们可视化以快速检查结果，

// maps.js
L.tileLayer('data/tiles/{z}/{x}/{y}.png', {tms: true, opacity: 0.7, attribution: ""});

一切正常。

但是，当我切换到烧瓶时，出现GET http://127.0.0.1:5000/data/tiles/7/61/83.png 404 (NOT FOUND)错误。

我是 Flask 的新手，我怀疑错误来自路由连接。

我试过的

我试图从我的app.py文件中添加一条新路由，以便 Flask 可以找到图像：

# app.py
@app.route('/data/tiles/<path:img>', methods=['GET'])
def tile(img):
    return f'data/tiles/{img}'

这解决了错误GET [...] 404 (NOT FOUND)问题，但瓷砖仍未加载/显示。

项目结构：

/我的应用程序/
| - - 应用程序.py
|
| - - 模板
| | --maps.html
|
| - - 静态
| | - - CSS
| | | --maps.css
| |
| | -- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
的 | | --maps.js
|
| - - 数据
| | - - 瓷砖
| | | - - 包含金字塔图像的子文件夹，
| | | 'z/x/y.png' 格式

编码：

应用程序.py

from flask import Flask, render_template, url_for

app = Flask(__name__)


@app.route("/maps")
def maps():
    return render_template('maps.html')


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

地图.html

<!-- Basic import (Leaflet) -->
<!-- ... and layout style -->

<script type='text/javascript' src="{{ url_for('static', filename='js/maps.js') }}"></script>

地图.js

// Base layers
var osm = L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'});

// Overlay layer
var lyr = L.tileLayer('data/tiles/{z}/{x}/{y}.png', {tms: true, opacity: 0.7, attribution: ""});

// Map
var map = L.map('map', {
    center: [47.81260945134799, -6.375234248965416],
    zoom: 10,
    minZoom: 4,
    maxZoom: 10,
    layers: [osm]
});

var basemaps = {"OpenStreetMap": osm}
var overlaymaps = {"Layer": lyr}

// Add base layers
L.control.layers(basemaps, overlaymaps, {collapsed: true}).addTo(map);

谢谢 ！

编辑：

感谢@IvanSanchez 的评论，我终于让它工作了。

从帖子中，我添加了一条新路线app.py：

# app.py
@app.route('/data/tiles/<path:img>')
def get_image(img):
    filename = f'data/tiles/{img}'
    return send_file(filename, mimetype='image/png')

这将我的自定义图块添加到了我的传单地图。然而，我得到了另一个错误，因为我的瓷砖没有完全覆盖整个世界。
我通过在我的 Leaflet 图层中添加一个边界框来修复它：

// maps.js

// Overlay layer
var lyr = L.tileLayer('data/tiles/{z}/{x}/{y}.png',
    {bounds: [[50, -16.24],[43, -0.2]], tms: true, opacity: 0.7, attribution: ""});

再次感谢你的帮助 ！

标签： javascriptpythonhtmlflaskleaflet