flask将{"y":123.2885100,"x":42.7373900,"label":8}格式的json数据传给leaflet绘制聚类图
时间: 2023-09-14 09:10:35 浏览: 94
以下是一个示例代码,它将从Flask应用程序中获取JSON数据,并使用Leaflet库将其绘制为聚类图:
```python
from flask import Flask, jsonify, render_template
from flask_cors import CORS
from flask import request
app = Flask(__name__)
CORS(app)
@app.route('/data', methods=['GET'])
def get_data():
data = {"y":123.2885100,"x":42.7373900,"label":8}
return jsonify(data)
@app.route('/')
def index():
return render_template('index.html')
if __name__ == '__main__':
app.run(debug=True)
```
在这个例子中,我们定义了一个名为`get_data()`的路由,该路由返回一个包含JSON数据的字典。然后,我们在Flask应用程序中启用CORS,以便在将数据传递给前端时不会出现跨域问题。
在前端部分,我们可以使用JavaScript从Flask应用程序获取数据并使用Leaflet将其绘制为聚类图。以下是一个示例代码:
```javascript
var map = L.map('map').setView([42.7373900, 123.2885100], 13);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: 'Map data © OpenStreetMap contributors',
maxZoom: 18
}).addTo(map);
var markers = L.markerClusterGroup();
$.getJSON('/data', function(data) {
var marker = L.marker([data['x'], data['y']]);
markers.addLayer(marker);
});
map.addLayer(markers);
```
在这个例子中,我们首先创建一个包含OpenStreetMap地图图层的Leaflet地图,并将其放置在HTML文档中的`<div>`元素中。然后,我们定义了一个名为`markers`的`L.markerClusterGroup()`对象,并使用`$.getJSON()`从Flask应用程序获取JSON数据。一旦获取到数据,我们可以使用其中的`x`和`y`值创建一个`L.marker`对象,并将其添加到`markers`图层组中。最后,我们将`markers`图层组添加到Leaflet地图上。
这只是一个简单的示例,你可以根据你的需求修改它来适应你的项目。
阅读全文