前兩年，足跡地圖小程序風靡朋友圈，一時間大家都流行曬自己的旅行地圖。但是，筆者最近體驗了好幾款足跡地圖的小程序，發現這些小程序雖然號稱是足跡地圖，但最多隻是展示到省級別，無法精確到市級別，因此，筆者週末花了點時間，用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 上午
# 繪製個人足跡地圖：全國範圍
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，那麼在最後的<script>對中添加內容如下：（確保點擊去過的省份，可以查看該省市的足跡地圖）
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://mp.weixin.qq.com/s?__biz=MzU2NTYyMDk5MQ==&mid=2247484682&idx=1&sn=7805d4149684829fcdbf1324a6e11aeb&chksm=fcb9bc9acbce358cbd0cec06493fbd384b844dd25143e7209dc2523c7c067d1b60e34d1ff62a&token=656172195&lang=zh_CN#rd 。
本項目已經開源至Github，網址爲：https://github.com/percent4/personal_travel_map 。
本文只是筆者對於足跡地圖（精確到市級別）的demo，後續我們還可以做更多有意思的事情~