首页flask将{"y":123.2885100,"x":42.7373900,"label":8}格式的json数据传给leaflet绘制聚类图

flask将{"y":123.2885100,"x":42.7373900,"label":8}格式的json数据传给leaflet绘制聚类图

时间: 2023-09-05 14:13:43 浏览: 98

可以使用Flask将JSON数据传递给前端页面，然后使用Leaflet绘制聚类图。以下是一个示例代码：在Flask应用程序中： ```python from flask import Flask, render_template, jsonify app = Flask(__name__) @app.route('/') def index(): data = {"y":123.2885100,"x":42.7373900,"label":8} return render_template('index.html', data=data) if __name__ == '__main__': app.run(debug=True) ``` 在index.html中： ```html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Leaflet</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.7.1/leaflet.min.css" integrity="sha512-l4L4jK6aZg6w2Qb1h5O5X9B9CjJ5LHx5O5pM83+dOgji5j5YXyLkP5oNl8Kc1Q2f1l6+ds5wJhDx5H5CmP9yUw==" crossorigin=""/> <style> #mapid { height: 500px; } </style> </head> <body> <div id="mapid"></div> <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.7.1/leaflet.min.js" integrity="sha512-HOuG+LHtZKjV7giiOZxuI7+eXjyA7VcKpG/8+V0zNtZK7VZwIgBxLbNQD9zDC1nFj/Hr+8dPU3qPmKZjKsZmRg==" crossorigin=""></script> <script> var data = {{ data|tojson }}; var map = L.map('mapid').setView([data['x'], data['y']], 13); var marker = L.marker([data['x'], data['y']]).addTo(map); marker.bindPopup('Label: ' + data['label']).openPopup(); </script> </body> </html> ``` 在这个示例中，我们将数据作为参数传递给index.html，使用{{ data|tojson }}将其转换为JSON格式，并在JavaScript中使用该数据创建地图标记。

阅读全文