使用Flask框架创建一个Web应用程序,将聚类结果作为API接口返回给前端。在前端使用Leaflet地图库绘制地图,并通过AJAX请求调用Flask API接口获取聚类结果。 将聚类结果中的每个聚类点作为一个标记点添加到地图上,并根据聚类结果给出不同的颜色。
时间: 2024-05-27 09:13:40 浏览: 158
react-flask-template:Web应用程序模板,使用前端的React和Flask作为API
步骤如下:
1. 安装Flask和Leaflet库。
```python
pip install flask
pip install folium
```
2. 创建Flask应用程序。
```python
from flask import Flask, jsonify
app = Flask(__name__)
@app.route('/cluster')
def get_cluster():
# 聚类结果数据
data = {
"clusters": [
{"lat": 39.913818, "lng": 116.363625, "color": "red"},
{"lat": 39.914101, "lng": 116.364224, "color": "blue"},
{"lat": 39.913889, "lng": 116.364923, "color": "green"}
]
}
return jsonify(data)
if __name__ == '__main__':
app.run(debug=True)
```
3. 在前端使用Leaflet库绘制地图,调用Flask API接口获取聚类结果。
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Leaflet Map with Cluster Markers</title>
<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([39.913818, 116.363625], 15);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
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>',
maxZoom: 18
}).addTo(map);
$.getJSON('/cluster', function(data) {
var clusters = data.clusters;
for (var i = 0; i < clusters.length; i++) {
var marker = L.marker([clusters[i].lat, clusters[i].lng], {
icon: L.icon({
iconUrl: 'https://cdn.jsdelivr.net/leaflet/1.3.1/images/marker-icon-' + clusters[i].color + '.png',
shadowUrl: 'https://cdn.jsdelivr.net/leaflet/1.3.1/images/marker-shadow.png',
iconAnchor: [12, 41],
popupAnchor: [1, -34],
shadowSize: [41, 41]
})
}).addTo(map);
}
});
</script>
</body>
</html>
```
4. 运行Flask应用程序,打开网页查看聚类结果地图。
```python
python app.py
```
通过以上步骤,我们可以创建一个基于Flask和Leaflet库的聚类结果地图应用程序,并通过AJAX请求调用Flask API接口获取聚类结果,将聚类结果中的每个聚类点作为标记点添加到地图上,并根据聚类结果给出不同的颜色。
阅读全文