flask将{"y":123.2885100,"x":42.7373900,"label":8}格式的json数据传给leaflet绘制聚类图
时间: 2023-09-05 18:13:43 浏览: 95
clusterdemo:使用Leaflet进行聚类的演示
可以使用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中使用该数据创建地图标记。
阅读全文