flask将json数据传给leaflet
时间: 2023-10-29 16:42:44 浏览: 46
您可以使用Flask的`render_template()`函数将JSON数据传递给Leaflet。
以下是一个示例代码:
```python
from flask import Flask, render_template
app = Flask(__name__)
@app.route('/')
def index():
# 构建JSON数据
data = {
"type": "FeatureCollection",
"features": [
{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [116.3975, 39.9087]
},
"properties": {
"name": "北京"
}
},
{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [121.4737, 31.2304]
},
"properties": {
"name": "上海"
}
}
]
}
# 将JSON数据传递给模板
return render_template('index.html', data=data)
if __name__ == '__main__':
app.run()
```
在模板文件(例如`index.html`)中,您可以使用JavaScript代码将JSON数据传递给Leaflet:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Leaflet Example</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/leaflet@1.7.1/dist/leaflet.css">
<script src="https://cdn.jsdelivr.net/npm/leaflet@1.7.1/dist/leaflet.js"></script>
</head>
<body>
<div id="map" style="height: 500px;"></div>
<script>
var data = {{ data|tojson }};
var map = L.map('map').setView([38.5, 106], 4);
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,
tileSize: 512,
zoomOffset: -1
}).addTo(map);
L.geoJSON(data, {
pointToLayer: function (feature, latlng) {
return L.marker(latlng);
}
}).addTo(map);
</script>
</body>
</html>
```
在这个例子中,`data`变量包含了我们传递的JSON数据。我们使用`L.geoJSON()`函数将这个数据渲染成地图上的标记点。
相关推荐
![rar](https://img-home.csdnimg.cn/images/20210720083606.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)
![](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)