功能思路
我這裡還是使用 ECharts 來處理，有一個 API 是 registerMap，可以用來生成地圖。它有兩個比較重要的參數，mapName 和 geoJson。
mapName 顧名思義，就是該註冊地圖的名稱。而對於 geoJson 呢，需要是 GeoJson 格式的數據，具體格式可以參見 http://geojson.org/。說白了就是包含了經緯度信息和地理名稱的 json 數據，這種數據很多網站都有提供，我選取了如下的網站獲取
https://data.jianshukeji.com/geochina/tianjin.json
可以看出，只要替換 json 名稱，如：tianjin，就可以獲取到天津對應的 geojson 數據。
下面就是正常的繪製地圖了，只需要注意把 mapType 設置為前面註冊的地圖名稱即可。
數據準備
由於現在要展示各個市級別的數據，那麼我們就需要重新準備下後臺的數據接口，把各省的地級市信息撈取出來，注意對於直轄市需要特殊處理
<code>def get_chart_city_map_data():
city_map_dict = {}
map_data = json.loads(rd.get('trend'))
city_data = map_data['data']['areaTree'][0]
special = ['北京', '天津', '上海', '重慶', '香港', '澳門']
for data in city_data['children']:
city_list = []
if data['name'] in special:
for inner_data in data['children']:
if '區' in inner_data['name']:
city_list.append({'name': inner_data['name'], 'value': inner_data['total']['confirm']})
else:
city_list.append({'name': inner_data['name'] + '區', 'value': inner_data['total']['confirm']})
else:
for inner_data in data['children']:
city_list.append({'name': inner_data['name'], 'value': inner_data['total']['confirm']})
city_map_dict[data['name']] = city_list
return city_map_dict/<code>
然後統一到一個接口中返回
<code>@app.route('/get_map_data')
def get_map_data():
map_data = get_chart_map_data()
city_data = get_chart_city_map_data()
return jsonify({'country': map_data, 'city': city_data})
/<code>功能實現
下面我們來根據思路編寫前端代碼，首先在中國地圖上設置點擊事件，更加當前點擊的省份信息來請求 geojson 數據並註冊地圖。
<code>mapChart.on('click', function (params) {//點擊事件
if (params.name in provinces) {
$.getJSON('https://data.jianshukeji.com/geochina/' + provinces[params.name] + '.json', function (jsondata) {
echarts.registerMap(params.name, jsondata);
var d = [];
for (var i = 0; i d.push({
name: jsondata.features[i].properties.name
})
}
renderMap(params.name, data)
})
}
})/<code>接下來就是 renderMap 函數，其實就是正常的繪製地圖代碼
<code>function renderMap(map, data) {
// 初始化繪製省市地圖配置
var cityMapContainer = document.getElementById('map_1');
var myMapChart = echarts.init(cityMapContainer);
option.title = {
text: map + '疫情地圖',
subtext: '點擊標題返回全國地圖',
triggerEvent: true
};
option.tooltip = {
trigger: 'item'
};
option.visualMap = {
min: 0,
max: 1500,
show: false,
left: 'right',
top: 'bottom',
text: ['高', '低'],
// 文本，默認為數值文本
calculable: true,
textStyle: {
color: '#fff'
}
};
option.series = [{
name: '確診人數',
type: 'map',
mapType: map,
roam: false,
data: data['city'][map],
label: {
show: true,
emphasis: { //對應的鼠標懸浮效果
show: false,
textStyle: {
color: "#800080"
}
}
},
itemStyle: {
normal: {
borderWidth: .5,
//區域邊框寬度
borderColor: '#002097',
//區域邊框顏色
areaColor: "#4c60ff",
//區域顏色
},
emphasis: {
borderWidth: .5,
borderColor: '#4b0082',
areaColor: "#ffdead",
}
}
}];
// 渲染地圖
myMapChart.setOption(option);
myMapChart.on('click',
function(params) {
if (params.componentType == 'title') {
mymap(local_var)
}
})
}/<code>這裡又做了一個判斷，如果用戶點擊標題，則會調用創建中國地圖的函數，以此來達到返回全國地圖的效果！由於從 geojson 拿到的數據和從網上接口拿到的地級市名稱不盡相同，所以有一些地級市的數據無法顯示
分享到:
閱讀更多 湛神帶你寫代碼 的文章
