聚类结果为{"y":115.9053400,"x":29.1660400,"label":0}的json文件,用flask传给前端leaflet读取json文件绘制轨迹图
时间: 2023-11-05 11:45:16 浏览: 183
以下是一个简单的示例代码,假设聚类结果已经保存在一个名为cluster.json的文件中:
```python
from flask import Flask, jsonify, render_template
app = Flask(__name__)
@app.route("/")
def index():
return render_template("index.html")
@app.route("/cluster")
def get_cluster():
with open("cluster.json", "r") as f:
data = json.load(f)
return jsonify(data)
if __name__ == "__main__":
app.run(debug=True)
```
在上面的代码中,我们定义了两个路由。/路由返回index.html页面,/cluster路由返回json格式的聚类结果数据。在index.html中,我们可以使用leaflet库来读取并绘制轨迹图:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Leaflet Map</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="shortcut icon" type="image/x-icon" href="docs/images/favicon.ico" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/leaflet/1.0.2/leaflet.css" />
<script src="https://cdn.jsdelivr.net/leaflet/1.0.2/leaflet.js"></script>
<style>
#map {
height: 500px;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
var map = L.map('map').setView([29.1660400, 115.9053400], 13);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© <a href="http://openstreetmap.org">OpenStreetMap</a> contributors'
}).addTo(map);
// Get cluster data from Flask API
fetch("/cluster")
.then(response => response.json())
.then(data => {
// Draw marker at each data point
L.marker([data.x, data.y]).addTo(map).bindPopup("Cluster label: " + data.label);
});
</script>
</body>
</html>
```
在上面的代码中,我们首先创建了一个Leaflet地图,并设置初始的中心点和缩放级别。然后,我们使用OpenStreetMap的瓦片图层作为底图。最后,我们使用fetch函数从Flask API获取聚类结果数据,并在地图上使用L.marker函数绘制一个标记,并在标记上显示聚类标签。
阅读全文