聚类结果为{"y":115.9053400,"x":29.1660400,"label":0}格式的json文件,flask读取json文件用leaflet绘制轨迹聚类图
时间: 2023-11-05 14:00:36 浏览: 86
基于轨迹的不确定数据聚类算法的设计和实现
5星 · 资源好评率100%
以下是一个简单的flask程序,用于读取json文件并将其传递给前端页面进行可视化。这个程序假设你已经将聚类结果存储为名为“cluster.json”的文件。你需要将此文件放置在与flask程序相同的目录中。
```python
from flask import Flask, render_template, jsonify
app = Flask(__name__)
@app.route('/')
def index():
return render_template('index.html')
@app.route('/data')
def data():
with open('cluster.json', 'r') as f:
data = json.load(f)
return jsonify(data)
if __name__ == '__main__':
app.run(debug=True)
```
在这个程序中,我们使用了两个路由:一个是用于显示前端页面的路由,另一个是用于将json数据传递给前端页面的路由。我们可以在前端页面中使用ajax来获取这个json数据,并使用leaflet等库来绘制轨迹聚类图。
以下是一个简单的HTML文件,用于显示地图和获取json数据。
```html
<!DOCTYPE html>
<html>
<head>
<title>Cluster Map</title>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/leaflet/1.3.1/leaflet.css"/>
<script src="https://cdn.jsdelivr.net/leaflet/1.3.1/leaflet.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
</head>
<body>
<div id="map" style="height: 500px;"></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: 'Map data © OpenStreetMap contributors',
maxZoom: 18
}).addTo(map);
$.getJSON('/data', function (data) {
// 将聚类结果添加到地图上
for (var i = 0; i < data.length; i++) {
var marker = L.marker([data[i].x, data[i].y]).addTo(map);
marker.bindPopup('Label: ' + data[i].label);
}
});
</script>
</body>
</html>
```
在这个页面中,我们首先创建了一个地图实例,然后使用ajax从后端获取json数据,并将聚类结果添加到地图上。我们使用L.marker()函数在地图上显示每个聚类的中心点,并使用marker.bindPopup()函数添加标签信息。
当我们运行这个程序时,打开浏览器并访问http://localhost:5000,就可以看到轨迹聚类图了。
阅读全文