flask将{"y":123.2885100,"x":42.7373900,"label":8}格式的json数据传给leaflet绘制聚类图
时间: 2023-10-10 21:06:25 浏览: 85
首先,需要在Flask中定义一个路由,该路由将返回JSON格式的数据。可以使用Flask提供的`jsonify`函数来将Python对象转换为JSON格式的数据。
```python
from flask import Flask, jsonify
app = Flask(__name__)
@app.route('/data')
def get_data():
data = [
{"y":123.2885100,"x":42.7373900,"label":8},
{"y":123.2885100,"x":42.7373900,"label":8},
{"y":123.2885100,"x":42.7373900,"label":8},
{"y":123.2885100,"x":42.7373900,"label":8},
# ...
]
return jsonify(data)
```
然后,在前端页面中使用`$.ajax`函数从Flask路由获取JSON数据,并使用Leaflet绘制聚类图。
```javascript
$.ajax({
url: "/data",
type: "GET",
dataType: "json",
success: function(data) {
var markers = L.markerClusterGroup();
for (var i = 0; i < data.length; i++) {
var latlng = L.latLng(data[i].x, data[i].y);
var marker = L.marker(latlng);
marker.bindPopup("Label: " + data[i].label);
markers.addLayer(marker);
}
map.addLayer(markers);
}
});
```
这里使用了Leaflet.markercluster插件来绘制聚类图。首先创建一个`L.markerClusterGroup`对象,然后循环遍历获取到的JSON数据,将每个点作为一个`L.marker`对象添加到聚类组中,最后将聚类组添加到地图中。
阅读全文