В последнее время я видел много статей о бурении карт в Интернете.Я чувствую себя очень хорошо.Я занимаюсь исследованием этой части знаний, поэтому я хочу интегрировать функцию сверления в большой экран эпидемии, чтобы это может быть лучше отображено Информация об эпидемиях в разных провинциях. Не говори ерунды, иди сразу к галантерейным товарам!
Идеи функции детализации
Я все еще использую ECharts для обработки здесь.Есть API под названием registerMap, который можно использовать для создания карт. У него есть еще два важных параметра: mapName и geoJson.
mapName Как следует из названия, это имя зарегистрированной карты.
Для geoJson данные должны быть в формате GeoJson. Конкретный формат см. на http://geojson.org/. Проще говоря, это данные json, содержащие информацию о широте и долготе, а также географические названия. Многие веб-сайты предоставляют такие данные. Я выбрал следующие веб-сайты для получения
https://data.jianshukeji.com/geochina/tianjin.json
Видно, что при замене имени json, например: tianjin, можно получить данные geojson, соответствующие Тяньцзину.
Ниже приведена обычная карта рисования, просто обратите внимание на установку mapType на имя карты, зарегистрированное ранее.
Подготовка фоновых данных
Поскольку данные каждого уровня города должны отображаться сейчас, нам необходимо повторно подготовить интерфейс данных в фоновом режиме и извлечь информацию о городах уровня префектуры в каждой провинции.Обратите внимание, что для муниципалитетов требуется особая обработка напрямую при центральном правительстве.
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
Затем объединены в один интерфейс для возврата
@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})
Реализация фронтенд-функции
Код фронтенда напишем по задумке: сначала зададим событие клика на карте Китая, и запросим данные геоджсона и зарегистрируем карту с информацией о кликнувшейся в данный момент провинции.
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 < jsondata.features.length; i++) {
d.push({
name: jsondata.features[i].properties.name
})
}
renderMap(params.name, data)
})
}
})
Далее идет функция renderMap, которая на самом деле является нормальным кодом отрисовки карты.
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)
}
})
}
Здесь делается еще одно суждение.Если пользователь нажмет на заголовок, будет вызвана функция создания карты Китая, чтобы добиться эффекта возврата национальной карты!
Наконец, давайте взглянем на рендеры.Поскольку данные, полученные из geojson, и названия городов на уровне префектур, полученные из онлайн-интерфейса, не совпадают, данные некоторых городов на уровне префектур не могут быть отображены, и это не годится. решение на данный момент.