聚类结果为{"y":115.9041400,"x":29.1664300,"label":0}的json文件,用flask框架和leaflet绘制轨迹聚类
时间: 2023-11-05 08:00:36 浏览: 36
1. 安装必要的库
在命令行中输入以下命令:
```
pip install flask
pip install flask-cors
```
2. 创建Flask应用程序
在项目文件夹中创建一个名为app.py的文件,输入以下代码:
```python
from flask import Flask, jsonify, request, render_template
from flask_cors import CORS
import json
app = Flask(__name__)
CORS(app)
@app.route('/')
def index():
return render_template('map.html')
@app.route('/data', methods=['GET'])
def data():
with open('cluster.json') as f:
data = json.load(f)
return jsonify(data)
if __name__ == '__main__':
app.run(debug=True)
```
这个应用程序创建了一个Flask应用程序,并在根路径下渲染一个名为map.html的模板。它还提供了一个名为data的端点,该端点将读取cluster.json文件并返回json数据。
3. 创建HTML模板
在项目文件夹中创建一个名为templates的文件夹,并在其中创建一个名为map.html的文件。输入以下代码:
```html
<!doctype html>
<html>
<head>
<title>Leaflet Map</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/leaflet/1.3.4/leaflet.css" />
<script src="https://cdn.jsdelivr.net/leaflet/1.3.4/leaflet.js"></script>
<style>
html, body, #map {
height: 100%;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
var map = L.map('map').setView([29.1664300, 115.9041400], 13);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
maxZoom: 18,
attribution: 'Map data © <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, ' +
'<a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
'Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
id: 'mapbox.streets'
}).addTo(map);
fetch('/data')
.then(function(response) {
return response.json();
})
.then(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>
```
这个模板将一个名为map的div元素放置在页面中,并使用Leaflet库绘制地图。它还使用fetch函数从/data端点获取数据,并在地图上绘制标记。
4. 运行应用程序
在命令行中输入以下命令:
```
python app.py
```
这将启动应用程序并在浏览器中打开http://localhost:5000,您应该能够看到地图上的标记,每个标记都表示一个聚类结果。