用Python來繪制自己的個人足跡地圖, 精確到市級別,
首先我們需要安裝以下Python的第三方模塊:
echarts-china-cities-pypkg==0.0.9 echarts-china-provinces-pypkg==0.0.3 pyecharts==1.6.2 PyYAML==5.3.1
本專案的完整結構如下:

我們在專案中采用YAML檔案來配置自己旅行過的省以及省下面的市,組態檔如下:
北京:
- 延慶區
- 昌平區
- 海淀區
- 東城區
- 西城區
- 大興區
- 朝陽區
上海:
- 嘉定區
- 青浦區
- 松江區
- 寶山區
- 閔行區
- 奉賢區
- 浦東新區
- 崇明區
- 徐匯區
- 黃浦區
- 靜安區
- 楊浦區
- 虹口區
- 金山區
- 長寧區
- 普陀區
天津:
- 濱海新區
- 南開區
- 河西區
- 和平區
河北:
- 保定市
- 廊坊市
山東:
- 煙臺市
- 青島市
江蘇:
- 南京市
- 蘇州市
- 揚州市
- 鎮江市
- 無錫市
浙江:
- 杭州市
- 紹興市
- 寧波市
- 舟山市
- 湖州市
- 嘉興市
- 臺州市
- 金華市
江西:
- 南昌市
- 九江市
安徽:
- 黃山市
湖北:
- 武漢市
湖南:
- 長沙市
海南:
- 海口市
- 三亞市
四川:
- 成都市
廣東:
- 湛江市
接著我們利用Python腳本來生成足跡地圖,先是全國地圖,用于顯示省和直轄市的情況,china_map.py的代碼如下:
# -*- coding: utf-8 -*- # author: Jclian91 # place: Pudong Shanghai # time: 2020/5/31 9:21 上午 # 繪制個人足跡地圖:全國范圍 # 完整原始碼加Q群:279199867 import yaml from pyecharts.charts import Map from pyecharts import options as opts # 省和直轄市 with open("travel_config.yml", 'r', encoding='utf-8') as ymlfile: province_city_dict = yaml.safe_load(ymlfile) province_dict = dict(zip(province_city_dict.keys(), [1]*len(province_city_dict.keys()))) print(province_dict) # maptype='china' 只顯示全國直轄市和省級 map = Map(init_opts=opts.InitOpts(width='1200px', height='800px')) map.set_global_opts( title_opts=opts.TitleOpts(title="個人足跡地圖"), visualmap_opts=opts.VisualMapOpts(max_=1, is_piecewise=True, pieces=[ {"max": 1, "min": 1, "label": "去過", "color": "#4EA397"}, {"max": 0, "min": 0, "label": "未去過", "color": "#FFFFFF"}, ]) #最大資料范圍,分段 ) map.add("個人足跡地圖", data_pair=province_dict.items(), maptype="china", is_roam=True) map.render('全國.html')
運行上述腳本,會生成全國.html,為了保證圖片居中顯示,我們對該HTML中的下面一行:
<div id="a438407081634ceab6af1c965034ae16" class="chart-container" style="width:1200px; height:800px;"></div>
的樣式(style)增加如下內容:
margin:auto;top:30px
全國范圍的足跡地圖效果圖如下:

接著,我們來生成每個省市的足跡地圖,利用province_map.py腳本,代碼如下:
# -*- coding: utf-8 -*- # author: Jclian91 # place: Pudong Shanghai # time: 2020/5/31 10:01 上午 # 繪制個人足跡地圖:省市范圍 import yaml from pyecharts.charts import Map from pyecharts import options as opts # 省和直轄市下面的市 with open("travel_config.yml", 'r', encoding='utf-8') as ymlfile: province_city_dict = yaml.safe_load(ymlfile) for province, cities in province_city_dict.items(): map = Map(init_opts=opts.InitOpts(width='1200px', height='800px')) map.set_global_opts( title_opts=opts.TitleOpts(title="個人足跡地圖-%s" % province), visualmap_opts=opts.VisualMapOpts(max_=1, is_piecewise=True, pieces=[ {"max": 1, "min": 1, "label": "去過", "color": "#4EA397"}, {"max": 0, "min": 0, "label": "未去過", "color": "#FFFFFF"}, ]) #最大資料范圍,分段 ) city_dict = dict(zip(cities, [1]*len(cities))) map.add("個人足跡地圖-%s" % province, data_pair=city_dict.items(), maptype=province, is_roam=True) map.render('./provinces/%s.html' % province) print("生成個人足跡地圖-%s 成功" % province)
這時,會在provinces目錄下生成每個省或者直轄市的足跡地圖,我們分別對每個HTML進行修改,保證圖片居中,我們在這里只展示三個省市的情況:



最后一步,也是最為關鍵的一步,就是我們要打通全國足跡地圖和每個省市足跡地圖的聯系,也就是說,我們點擊全國足跡地圖上去過的省份,那么可以點擊進去查看該省市下的足跡地圖情況,比如說去過哪些市,
??對此,我們修改生成的全國.html檔案,假設該地圖的影像句柄為chart_a438407081634ceab6af1c965034ae16,那么在最后的
chart_a438407081634ceab6af1c965034ae16.on('click', function (param){ var selected = param.name; if (selected) { switch(selected){ case '北京': location.href = "provinces/北京.html"; break; case '上海': location.href = "provinces/上海.html"; break; case '天津': location.href = "provinces/天津.html"; break; case '四川': location.href = "provinces/四川.html"; break; case '安徽': location.href = "provinces/安徽.html"; break; case '山東': location.href = "provinces/山東.html"; break; case '江蘇': location.href = "provinces/江蘇.html"; break; case '江西': location.href = "provinces/江西.html"; break; case '河北': location.href = "provinces/河北.html"; break; case '浙江': location.href = "provinces/浙江.html"; break; case '海南': location.href = "provinces/海南.html"; break; case '湖北': location.href = "provinces/湖北.html"; break; case '湖南': location.href = "provinces/湖南.html"; break; case '廣東': location.href = "provinces/廣東.html"; break; default: break; } } });
我特意制作了個人足跡地圖的視頻:https://live.csdn.net/v/229255
轉載請註明出處,本文鏈接:https://www.uj5u.com/houduan/501063.html
標籤:其他
上一篇:Nginx 限流的天坑!!
下一篇:JPA作持久層操作
