聚类结果为{"y":115.9041400,"x":29.1664300,"label":0}的json文件,用flask框架和leaflet绘制轨迹聚类
时间: 2023-11-05 16:00:22 浏览: 110
1. 安装Flask和Leaflet
在终端中输入以下命令安装Flask和Leaflet:
```
pip install flask
pip install folium
```
2. 创建Flask应用
在项目文件夹中创建一个名为app.py的文件。
在app.py中导入以下模块:
```python
from flask import Flask, render_template, jsonify
import folium
import json
```
创建一个Flask应用对象:
```python
app = Flask(__name__)
```
3. 编写路由函数
创建一个路由函数,用于在Web页面中显示地图和聚类结果。
```python
@app.route('/')
def index():
# 读取聚类结果json文件
with open('cluster_result.json', 'r') as f:
data = json.load(f)
# 创建一个地图对象
m = folium.Map(location=[data['y'], data['x']], zoom_start=15)
# 添加聚类结果标记
folium.Marker(location=[data['y'], data['x']], popup='Cluster Label: {}'.format(data['label']), icon=folium.Icon(color='red')).add_to(m)
# 将地图对象转换为HTML字符串
map_html = m._repr_html_()
# 渲染模板并返回响应
return render_template('index.html', map_html=map_html)
```
4. 编写模板文件
创建一个名为index.html的模板文件,用于在Web页面中显示地图。
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Leaflet Cluster Map</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.7.1/leaflet.css" integrity="sha512-5f6GZaF0JWx7c0pJl9dixPvjl0LW8iEhFQ2mcJg67Zvz8Wn7VhOa1ERD3UTqLQ8W2dVrG0eJEqYG1vZt8WxVtQ==" crossorigin=""/>
<style>
#map {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
</style>
</head>
<body>
<div id="map">{{ map_html | safe }}</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.7.1/leaflet.js" integrity="sha512-4oIY+X9CJf0RzRyI7OZ1av+47q3JmmOQoW7RvRy8JLcG+4upI4lZqQ2mJz3a+SK1S5S6nLg6MGb/6H5Q2cd5DQ==" crossorigin=""></script>
</body>
</html>
```
5. 运行应用
在终端中输入以下命令启动应用:
```
python app.py
```
在浏览器中访问http://localhost:5000,即可看到地图和聚类结果标记。
阅读全文