Recently, I saw a lot of articles about map drilling on the Internet, and I felt very good. I happened to be studying this part of knowledge, so I thought to combine the function of map drilling into the epidemic screen, so that I could better display the epidemic information of different provinces. Without further ado, let’s get straight to the business!
Drilling function thinking
I’m still using ECharts here. There is an API called registerMap that can be used to generate maps. It has two important parameters, mapName and geoJson.
MapName is the name of the registered map. For geoJson, you need data in geoJson format, which can be found at http://geojson.org/. To put it bluntly, it is json data containing latitude and longitude information and geographical name. Many websites provide such data, so I selected the following website to obtain it
https://data.jianshukeji.com/geochina/tianjin.json
It can be seen that as long as you replace the JSON name, such as tianjin, you can obtain the geoJSON data corresponding to Tianjin.
Below is the normal map drawing, just need to pay attention to the mapType set to the previous registered map name.
Background Data Preparation
Since we need to display the city-level data now, we need to re-prepare the data interface of the background to retrieve the prefecture-level city information of each province, and pay attention to the special treatment for municipalities directly under the central government
def get_chart_city_map_data(a):
city_map_dict = {}
map_data = json.loads(rd.get('trend'))
city_data = map_data['data'] ['areaTree'] [0]
special = ['Beijing'.'tianjin'.'Shanghai'.'chongqing'.'Hong Kong'.'the']
for data in city_data['children'] :
city_list = []
if data['name'] in special:
for inner_data in data['children'] :
if 'area' in inner_data['name'] :
city_list.append({'name': inner_data['name'].'value': inner_data['total'] ['confirm']})
else:
city_list.append({'name': inner_data['name'] + 'area'.'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
Copy the codeIt is then returned in a unified interface
@app.route('/get_map_data')
def get_map_data(a):
map_data = get_chart_map_data()
city_data = get_chart_city_map_data()
return jsonify({'country': map_data, 'city': city_data})
Copy the codeFront-end function realization
Next, we will write the front-end code according to the ideas. First, we will set the click event on the Map of China and request geoJSON data and register the map based on the information of the currently clicked province.
mapChart.on('click'.function (params) {// Click the event
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 < jsondata.features.length; i++) {
d.push({
name: jsondata.features[i].properties.name
})
}
renderMap(params.name, data)
})
}
})
Copy the codeThen there’s the renderMap function, which is just normal map code
function renderMap (map, data) {
// Initialize the map configuration
var cityMapContainer = document.getElementById('map_1');
var myMapChart = echarts.init(cityMapContainer);
option.title = {
text: map + 'Epidemic Map'.
subtext: 'Click on title to return to national map'.
triggerEvent: true
};
option.tooltip = {
trigger: 'item'
};
option.visualMap = {
min: 0.
max: 1500.
show: false.
left: 'right'.
top: 'bottom'.
text: ['high'.'low'].// Text, which defaults to numeric text
calculable: true.
textStyle: {
color: '#fff'
}
};
option.series = [
{
name: 'Number of confirmed cases'.
type: 'map'.
mapType: map,
roam: false.
data: data['city'][map],
label: {
show: true.
emphasis: {// Corresponding mouse hover effect
show: false.
textStyle: {color:"# 800080"}
}
},
itemStyle: {
normal: {
borderWidth: . 5.// Area border width
borderColor: '# 002097'.// Area border color
areaColor:"#4c60ff".// Region color
},
emphasis: {
borderWidth: . 5.
borderColor: '#4b0082'.
areaColor:"#ffdead".
}
}
}
];
// Render the map
myMapChart.setOption(option);
myMapChart.on('click'.function (params) {
if (params.componentType == 'title') {
mymap(local_var)
}
})
}
Copy the codeHere again made a judgment, if the user clicks on the title, it will call the function to create a map of China, in order to achieve the effect of returning to the national map!
Finally, we take a look at the effect map, because the data from geoJSON and from the Internet interface to get the name of the prefecture-level city is not the same, so there are some prefecture-level city data can not be displayed, there is no good solution for the moment, helpless!
