flask和echarts百度地图多图层可运行代码
时间: 2024-05-07 22:22:44 浏览: 75
以下是一个使用 Flask 和 ECharts 的百度地图多图层的示例代码:
```python
from flask import Flask, render_template
import json
app = Flask(__name__)
@app.route('/')
def index():
return render_template('index.html')
@app.route('/data')
def data():
# 从文件中读取地图数据
with open('map_data.json', 'r') as f:
map_data = json.load(f)
return map_data
if __name__ == '__main__':
app.run(debug=True)
```
其中,`index.html` 文件包含了 ECharts 的地图渲染代码和 JavaScript 代码来初始化地图和处理数据:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ECharts 百度地图多图层</title>
<script src="https://cdn.bootcdn.net/ajax/libs/echarts/4.9.0/echarts.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/echarts/4.9.0/extension/bmap.min.js"></script>
</head>
<body>
<div id="map" style="height: 800px;"></div>
<script>
var myChart = echarts.init(document.getElementById('map'));
// 初始化地图
myChart.setOption({
bmap: {
center: [116.404, 39.915],
zoom: 10,
roam: true,
mapStyle: {
styleJson: [{
"featureType": "water",
"elementType": "all",
"stylers": {
"color": "#d1d1d1"
}
}, {
"featureType": "land",
"elementType": "all",
"stylers": {
"color": "#f3f3f3"
}
}, {
"featureType": "railway",
"elementType": "all",
"stylers": {
"visibility": "off"
}
}, {
"featureType": "highway",
"elementType": "all",
"stylers": {
"color": "#fdfdfd"
}
}, {
"featureType": "highway",
"elementType": "labels",
"stylers": {
"visibility": "off"
}
}, {
"featureType": "arterial",
"elementType": "geometry",
"stylers": {
"color": "#fefefe"
}
}, {
"featureType": "arterial",
"elementType": "geometry.fill",
"stylers": {
"color": "#fefefe"
}
}, {
"featureType": "poi",
"elementType": "all",
"stylers": {
"visibility": "off"
}
}, {
"featureType": "green",
"elementType": "all",
"stylers": {
"visibility": "off"
}
}, {
"featureType": "subway",
"elementType": "all",
"stylers": {
"visibility": "off"
}
}, {
"featureType": "manmade",
"elementType": "all",
"stylers": {
"color": "#d1d1d1"
}
}, {
"featureType": "local",
"elementType": "all",
"stylers": {
"color": "#d1d1d1"
}
}, {
"featureType": "boundary",
"elementType": "all",
"stylers": {
"color": "#fefefe"
}
}, {
"featureType": "label",
"elementType": "labels.text.fill",
"stylers": {
"color": "#999999"
}
}]
}
},
series: []
});
// 加载数据
myChart.showLoading();
$.get('/data', function (map_data) {
myChart.hideLoading();
// 渲染多个图层
for (var i = 0; i < map_data.length; i++) {
myChart.setOption({
series: [{
type: 'heatmap',
coordinateSystem: 'bmap',
data: map_data[i],
pointSize: 5,
blurSize: 6
}]
});
}
});
</script>
</body>
</html>
```
其中,`/data` 路由返回的是一个 JSON 格式的地图数据,每个数据项包含了经纬度和权重信息。可以根据自己的需要修改地图的样式和数据。
阅读全文
相关推荐















