Flask框架将聚类结果返回给前端。在前端使用Leaflet地图库绘制地图,调用Flask API接口获取聚类结果。 将聚类结果中的每个聚类点作为一个标记点添加到地图上,并根据聚类结果给出不同的颜色。
时间: 2024-06-04 20:12:25 浏览: 11
以下是示例代码:
在Flask中定义API接口:
```python
from flask import Flask, jsonify
app = Flask(__name__)
# 聚类结果数据
cluster_data = {
'clusters': [
{'longitude': 116.397128, 'latitude': 39.916527, 'color': 'red'},
{'longitude': 116.405963, 'latitude': 39.915119, 'color': 'green'},
{'longitude': 116.416496, 'latitude': 39.928835, 'color': 'blue'}
]
}
@app.route('/clusters', methods=['GET'])
def get_clusters():
return jsonify(cluster_data)
```
在前端使用Leaflet绘制地图,并调用Flask API接口获取聚类结果:
```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.4/leaflet.css" />
<script src="https://cdn.jsdelivr.net/leaflet/1.3.4/leaflet.js"></script>
<style>
#map {
height: 600px;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
var map = L.map('map').setView([39.92, 116.40], 13);
L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}', {
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',
accessToken: 'your.mapbox.access.token'
}).addTo(map);
// 调用Flask API接口获取聚类结果
fetch('/clusters')
.then(response => response.json())
.then(data => {
data.clusters.forEach(cluster => {
// 根据聚类结果给出不同的颜色
var color = cluster.color;
// 创建标记点并添加到地图上
L.marker([cluster.latitude, cluster.longitude], {icon: L.divIcon({
iconSize: [10, 10],
className: 'cluster-marker',
html: '<div style="background-color: ' + color + ';"></div>'
})}).addTo(map);
});
});
</script>
</body>
</html>
```
在上述示例中,我们使用Leaflet地图库创建地图,并在Flask中定义了一个API接口返回聚类结果数据。在前端代码中,我们通过调用Flask API接口获取聚类结果数据,并使用Leaflet的L.marker()方法创建标记点,并根据聚类结果给出不同的颜色。最终将标记点添加到地图上,形成聚类结果地图。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)