Tornado+Pyecharts+LayUI搭建个人足迹地图服务

  在之前的文章 Python之绘制个人足迹地图 中,笔者采用Pyecharts和手动修改HTML代码的方式实现了个人足迹地图。本文将会介绍利用Tornado+Pyecharts+LayUI来搭建个人足迹地图web服务,这样我们只需要通过页面点选的方式就能绘制个人足迹地图,简单高效。
  前端框架我们采用layui,后端web框架采用Python的Tornado,地图生成利用Pyecharts。同时,我们需要安装的第三方模块如下:

tornado==5.1.1
pypinyin==0.35.2
pyecharts==1.6.2
echarts-china-cities-pypkg==0.0.9
echarts-china-provinces-pypkg==0.0.3

整个项目的结构如下:
项目结构
  整个项目其实只需要两个文件:index.htmlserver.py
  index.html是纯前端页面(笔者的水平比较菜,因此前端页面的实现方式不太理想),完整的代码如下:(代码较长)

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>个人足迹地图</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <link rel="stylesheet" href="https://www.layuicdn.com/layui-v2.5.6/css/layui.css"  media="all">
  <script src="https://www.layuicdn.com/layui-v2.5.6/layui.js" charset="utf-8"></script>
  <script>
layui.use(['form', 'layedit', 'laydate'], function(){
  var form = layui.form
  ,layer = layui.layer
  ,layedit = layui.layedit
  ,laydate = layui.laydate;

  //日期
  laydate.render({
    elem: '#date'
  });
  laydate.render({
    elem: '#date1'
  });

  //创建一个编辑器
  var editIndex = layedit.build('LAY_demo_editor');

  //自定义验证规则
  form.verify({
    title: function(value){
      if(value.length < 5){
        return '标题至少得5个字符啊';
      }
    }
    ,pass: [
      /^[\S]{6,12}$/
      ,'密码必须6到12位,且不能出现空格'
    ]
    ,content: function(value){
      layedit.sync(editIndex);
    }
  });

  //监听指定开关
  form.on('switch(switchTest)', function(data){
    layer.msg('开关checked:'+ (this.checked ? 'true' : 'false'), {
      offset: '6px'
    });
    layer.tips('温馨提示:请注意开关状态的文字可以随意定义,而不仅仅是ON|OFF', data.othis)
  });

  //监听提交
  form.on('submit(demo1)', function(data){
    layer.alert(JSON.stringify(data.field), {
      title: '最终的提交信息'
    })
    return false;
  });

  //表单赋值
  layui.$('#LAY-component-form-setval').on('click', function(){
    form.val('example', {
      "username": "贤心" // "name": "value"
      ,"password": "123456"
      ,"interest": 1
      ,"like[write]": true //复选框选中状态
      ,"close": true //开关状态
      ,"sex": "女"
      ,"desc": "我爱 layui"
    });
  });

  //表单取值
  layui.$('#LAY-component-form-getval').on('click', function(){
    var data = form.val('example');
    alert(JSON.stringify(data));
  });

});
</script>
</head>
<body>

<br><br>
<form class="layui-form" action="/map" method="post">
    <div class="layui-form-item">
	<label class="layui-form-label">北京</label>
	<div class="layui-input-block">
		<input type="checkbox" name="beijing" title="东城区" value="东城区">
		<input type="checkbox" name="beijing" title="西城区" value="西城区">
		<input type="checkbox" name="beijing" title="海淀区" value="海淀区">
		<input type="checkbox" name="beijing" title="朝阳区" value="朝阳区">
		<input type="checkbox" name="beijing" title="平谷区" value="平谷区">
		<input type="checkbox" name="beijing" title="顺义区" value="顺义区">
		<input type="checkbox" name="beijing" title="大兴区" value="大兴区">
		<input type="checkbox" name="beijing" title="石景山区" value="石景山区">
		<input type="checkbox" name="beijing" title="通州区" value="通州区">
		<input type="checkbox" name="beijing" title="门头沟区" value="门头沟区">
		<input type="checkbox" name="beijing" title="怀柔区" value="怀柔区">
		<input type="checkbox" name="beijing" title="密云区" value="密云区">
		<input type="checkbox" name="beijing" title="延庆区" value="延庆区">
		<input type="checkbox" name="beijing" title="昌平区" value="昌平区">
		<input type="checkbox" name="beijing" title="房山区" value="房山区">
		<input type="checkbox" name="beijing" title="丰台区" value="丰台区">
	</div>
</div>
<div class="layui-form-item">
	<label class="layui-form-label">广东</label>
	<div class="layui-input-block">
		<input type="checkbox" name="guangdong" title="广州市" value="广州市">
		<input type="checkbox" name="guangdong" title="深圳市" value="深圳市">
		<input type="checkbox" name="guangdong" title="珠海市" value="珠海市">
		<input type="checkbox" name="guangdong" title="汕头市" value="汕头市">
		<input type="checkbox" name="guangdong" title="韶关市" value="韶关市">
		<input type="checkbox" name="guangdong" title="佛山市" value="佛山市">
		<input type="checkbox" name="guangdong" title="江门市" value="江门市">
		<input type="checkbox" name="guangdong" title="湛江市" value="湛江市">
		<input type="checkbox" name="guangdong" title="茂名市" value="茂名市">
		<input type="checkbox" name="guangdong" title="肇庆市" value="肇庆市">
		<input type="checkbox" name="guangdong" title="惠州市" value="惠州市">
		<input type="checkbox" name="guangdong" title="梅州市" value="梅州市">
		<input type="checkbox" name="guangdong" title="汕尾市" value="汕尾市">
		<input type="checkbox" name="guangdong" title="河源市" value="河源市">
		<input type="checkbox" name="guangdong" title="阳江市" value="阳江市">
		<input type="checkbox" name="guangdong" title="清远市" value="清远市">
		<input type="checkbox" name="guangdong" title="东莞市" value="东莞市">
		<input type="checkbox" name="guangdong" title="中山市" value="中山市">
		<input type="checkbox" name="guangdong" title="潮州市" value="潮州市">
		<input type="checkbox" name="guangdong" title="揭阳市" value="揭阳市">
		<input type="checkbox" name="guangdong" title="云浮市" value="云浮市">
	</div>
</div>
<div class="layui-form-item">
	<label class="layui-form-label">上海</label>
	<div class="layui-input-block">
		<input type="checkbox" name="shanghai" title="黄浦区" value="黄浦区">
		<input type="checkbox" name="shanghai" title="徐汇区" value="徐汇区">
		<input type="checkbox" name="shanghai" title="长宁区" value="长宁区">
		<input type="checkbox" name="shanghai" title="静安区" value="静安区">
		<input type="checkbox" name="shanghai" title="普陀区" value="普陀区">
		<input type="checkbox" name="shanghai" title="虹口区" value="虹口区">
		<input type="checkbox" name="shanghai" title="杨浦区" value="杨浦区">
		<input type="checkbox" name="shanghai" title="宝山区" value="宝山区">
		<input type="checkbox" name="shanghai" title="闵行区" value="闵行区">
		<input type="checkbox" name="shanghai" title="嘉定区" value="嘉定区">
		<input type="checkbox" name="shanghai" title="松江区" value="松江区">
		<input type="checkbox" name="shanghai" title="金山区" value="金山区">
		<input type="checkbox" name="shanghai" title="青浦区" value="青浦区">
		<input type="checkbox" name="shanghai" title="奉贤区" value="奉贤区">
		<input type="checkbox" name="shanghai" title="浦东新区" value="浦东新区">
		<input type="checkbox" name="shanghai" title="崇明区" value="崇明区">
	</div>
</div>
<div class="layui-form-item">
	<label class="layui-form-label">天津</label>
	<div class="layui-input-block">
		<input type="checkbox" name="tianjin" title="和平区" value="和平区">
		<input type="checkbox" name="tianjin" title="河东区" value="河东区">
		<input type="checkbox" name="tianjin" title="河西区" value="河西区">
		<input type="checkbox" name="tianjin" title="南开区" value="南开区">
		<input type="checkbox" name="tianjin" title="河北区" value="河北区">
		<input type="checkbox" name="tianjin" title="红桥区" value="红桥区">
		<input type="checkbox" name="tianjin" title="东丽区" value="东丽区">
		<input type="checkbox" name="tianjin" title="西青区" value="西青区">
		<input type="checkbox" name="tianjin" title="北辰区" value="北辰区">
		<input type="checkbox" name="tianjin" title="津南区" value="津南区">
		<input type="checkbox" name="tianjin" title="武清区" value="武清区">
		<input type="checkbox" name="tianjin" title="宝坻区" value="宝坻区">
		<input type="checkbox" name="tianjin" title="静海区" value="静海区">
		<input type="checkbox" name="tianjin" title="宁河区" value="宁河区">
		<input type="checkbox" name="tianjin" title="蓟州区" value="蓟州区">
		<input type="checkbox" name="tianjin" title="滨海新区" value="滨海新区">
	</div>
</div>
<div class="layui-form-item">
	<label class="layui-form-label">重庆</label>
	<div class="layui-input-block">
		<input type="checkbox" name="chongqing" title="渝中区" value="渝中区">
		<input type="checkbox" name="chongqing" title="大渡口区" value="大渡口区">
		<input type="checkbox" name="chongqing" title="江北区" value="江北区">
		<input type="checkbox" name="chongqing" title="南岸区" value="南岸区">
		<input type="checkbox" name="chongqing" title="北碚区" value="北碚区">
		<input type="checkbox" name="chongqing" title="渝北区" value="渝北区">
		<input type="checkbox" name="chongqing" title="巴南区" value="巴南区">
		<input type="checkbox" name="chongqing" title="长寿区" value="长寿区">
		<input type="checkbox" name="chongqing" title="沙坪坝区" value="沙坪坝区">
		<input type="checkbox" name="chongqing" title="万州区" value="万州区">
		<input type="checkbox" name="chongqing" title="涪陵区" value="涪陵区">
		<input type="checkbox" name="chongqing" title="黔江区" value="黔江区">
		<input type="checkbox" name="chongqing" title="永川区" value="永川区">
		<input type="checkbox" name="chongqing" title="合川区" value="合川区">
		<input type="checkbox" name="chongqing" title="江津区" value="江津区">
		<input type="checkbox" name="chongqing" title="九龙坡区" value="九龙坡区">
		<input type="checkbox" name="chongqing" title="南川区" value="南川区">
		<input type="checkbox" name="chongqing" title="綦江区" value="綦江区">
		<input type="checkbox" name="chongqing" title="潼南区" value="潼南区">
		<input type="checkbox" name="chongqing" title="荣昌区" value="荣昌区">
		<input type="checkbox" name="chongqing" title="璧山区" value="璧山区">
		<input type="checkbox" name="chongqing" title="大足区" value="大足区">
		<input type="checkbox" name="chongqing" title="铜梁区" value="铜梁区">
		<input type="checkbox" name="chongqing" title="梁平区" value="梁平区">
		<input type="checkbox" name="chongqing" title="开县" value="开县">
		<input type="checkbox" name="chongqing" title="忠县" value="忠县">
		<input type="checkbox" name="chongqing" title="城口县" value="城口县">
		<input type="checkbox" name="chongqing" title="垫江县" value="垫江县">
		<input type="checkbox" name="chongqing" title="武隆区" value="武隆区">
		<input type="checkbox" name="chongqing" title="丰都县" value="丰都县">
		<input type="checkbox" name="chongqing" title="奉节县" value="奉节县">
		<input type="checkbox" name="chongqing" title="云阳县" value="云阳县">
		<input type="checkbox" name="chongqing" title="巫溪县" value="巫溪县">
		<input type="checkbox" name="chongqing" title="巫山县" value="巫山县">
		<input type="checkbox" name="chongqing" title="石柱土家族自治县" value="石柱土家族自治县">
		<input type="checkbox" name="chongqing" title="秀山土家族苗族自治县" value="秀山土家族苗族自治县">
		<input type="checkbox" name="chongqing" title="酉阳土家族苗族自治县" value="酉阳土家族苗族自治县">
		<input type="checkbox" name="chongqing" title="彭水苗族土家族自治县" value="彭水苗族土家族自治县">
	</div>
</div>
<div class="layui-form-item">
	<label class="layui-form-label">辽宁</label>
	<div class="layui-input-block">
		<input type="checkbox" name="liaoning" title="沈阳市" value="沈阳市">
		<input type="checkbox" name="liaoning" title="大连市" value="大连市">
		<input type="checkbox" name="liaoning" title="鞍山市" value="鞍山市">
		<input type="checkbox" name="liaoning" title="抚顺市" value="抚顺市">
		<input type="checkbox" name="liaoning" title="本溪市" value="本溪市">
		<input type="checkbox" name="liaoning" title="丹东市" value="丹东市">
		<input type="checkbox" name="liaoning" title="锦州市" value="锦州市">
		<input type="checkbox" name="liaoning" title="营口市" value="营口市">
		<input type="checkbox" name="liaoning" title="阜新市" value="阜新市">
		<input type="checkbox" name="liaoning" title="辽阳市" value="辽阳市">
		<input type="checkbox" name="liaoning" title="盘锦市" value="盘锦市">
		<input type="checkbox" name="liaoning" title="铁岭市" value="铁岭市">
		<input type="checkbox" name="liaoning" title="朝阳市" value="朝阳市">
		<input type="checkbox" name="liaoning" title="葫芦岛市" value="葫芦岛市">
	</div>
</div>
<div class="layui-form-item">
	<label class="layui-form-label">江苏</label>
	<div class="layui-input-block">
		<input type="checkbox" name="jiangsu" title="南京市" value="南京市">
		<input type="checkbox" name="jiangsu" title="苏州市" value="苏州市">
		<input type="checkbox" name="jiangsu" title="无锡市" value="无锡市">
		<input type="checkbox" name="jiangsu" title="常州市" value="常州市">
		<input type="checkbox" name="jiangsu" title="镇江市" value="镇江市">
		<input type="checkbox" name="jiangsu" title="南通市" value="南通市">
		<input type="checkbox" name="jiangsu" title="泰州市" value="泰州市">
		<input type="checkbox" name="jiangsu" title="扬州市" value="扬州市">
		<input type="checkbox" name="jiangsu" title="盐城市" value="盐城市">
		<input type="checkbox" name="jiangsu" title="连云港市" value="连云港市">
		<input type="checkbox" name="jiangsu" title="徐州市" value="徐州市">
		<input type="checkbox" name="jiangsu" title="淮安市" value="淮安市">
		<input type="checkbox" name="jiangsu" title="宿迁市" value="宿迁市">
	</div>
</div>
<div class="layui-form-item">
	<label class="layui-form-label">湖北</label>
	<div class="layui-input-block">
		<input type="checkbox" name="hubei" title="武汉市" value="武汉市">
		<input type="checkbox" name="hubei" title="黄石市" value="黄石市">
		<input type="checkbox" name="hubei" title="十堰市" value="十堰市">
		<input type="checkbox" name="hubei" title="荆州市" value="荆州市">
		<input type="checkbox" name="hubei" title="宜昌市" value="宜昌市">
		<input type="checkbox" name="hubei" title="襄樊市" value="襄樊市">
		<input type="checkbox" name="hubei" title="鄂州市" value="鄂州市">
		<input type="checkbox" name="hubei" title="荆门市" value="荆门市">
		<input type="checkbox" name="hubei" title="孝感市" value="孝感市">
		<input type="checkbox" name="hubei" title="黄冈市" value="黄冈市">
		<input type="checkbox" name="hubei" title="咸宁市" value="咸宁市">
		<input type="checkbox" name="hubei" title="随州市" value="随州市">
		<input type="checkbox" name="hubei" title="恩施土家族苗族自治州" value="恩施土家族苗族自治州">
		<input type="checkbox" name="hubei" title="仙桃市" value="仙桃市">
		<input type="checkbox" name="hubei" title="天门市" value="天门市">
		<input type="checkbox" name="hubei" title="潜江市" value="潜江市">
		<input type="checkbox" name="hubei" title="神农架林区" value="神农架林区">
	</div>
</div>
<div class="layui-form-item">
	<label class="layui-form-label">四川</label>
	<div class="layui-input-block">
		<input type="checkbox" name="sichuan" title="成都市" value="成都市">
		<input type="checkbox" name="sichuan" title="自贡市" value="自贡市">
		<input type="checkbox" name="sichuan" title="攀枝花市" value="攀枝花市">
		<input type="checkbox" name="sichuan" title="泸州市" value="泸州市">
		<input type="checkbox" name="sichuan" title="德阳市" value="德阳市">
		<input type="checkbox" name="sichuan" title="绵阳市" value="绵阳市">
		<input type="checkbox" name="sichuan" title="广元市" value="广元市">
		<input type="checkbox" name="sichuan" title="遂宁市" value="遂宁市">
		<input type="checkbox" name="sichuan" title="内江市" value="内江市">
		<input type="checkbox" name="sichuan" title="乐山市" value="乐山市">
		<input type="checkbox" name="sichuan" title="南充市" value="南充市">
		<input type="checkbox" name="sichuan" title="眉山市" value="眉山市">
		<input type="checkbox" name="sichuan" title="宜宾市" value="宜宾市">
		<input type="checkbox" name="sichuan" title="广安市" value="广安市">
		<input type="checkbox" name="sichuan" title="达州市" value="达州市">
		<input type="checkbox" name="sichuan" title="雅安市" value="雅安市">
		<input type="checkbox" name="sichuan" title="巴中市" value="巴中市">
		<input type="checkbox" name="sichuan" title="资阳市" value="资阳市">
		<input type="checkbox" name="sichuan" title="阿坝藏族羌族自治州" value="阿坝藏族羌族自治州">
		<input type="checkbox" name="sichuan" title="甘孜藏族自治州" value="甘孜藏族自治州">
		<input type="checkbox" name="sichuan" title="凉山彝族自治州" value="凉山彝族自治州">
	</div>
</div>
<div class="layui-form-item">
	<label class="layui-form-label">陕西</label>
	<div class="layui-input-block">
		<input type="checkbox" name="shaanxi" title="西安市" value="西安市">
		<input type="checkbox" name="shaanxi" title="铜川市" value="铜川市">
		<input type="checkbox" name="shaanxi" title="宝鸡市" value="宝鸡市">
		<input type="checkbox" name="shaanxi" title="咸阳市" value="咸阳市">
		<input type="checkbox" name="shaanxi" title="渭南市" value="渭南市">
		<input type="checkbox" name="shaanxi" title="延安市" value="延安市">
		<input type="checkbox" name="shaanxi" title="汉中市" value="汉中市">
		<input type="checkbox" name="shaanxi" title="榆林市" value="榆林市">
		<input type="checkbox" name="shaanxi" title="安康市" value="安康市">
		<input type="checkbox" name="shaanxi" title="商洛市" value="商洛市">
	</div>
</div>
<div class="layui-form-item">
	<label class="layui-form-label">河北</label>
	<div class="layui-input-block">
		<input type="checkbox" name="hebei" title="石家庄市" value="石家庄市">
		<input type="checkbox" name="hebei" title="唐山市" value="唐山市">
		<input type="checkbox" name="hebei" title="秦皇岛市" value="秦皇岛市">
		<input type="checkbox" name="hebei" title="邯郸市" value="邯郸市">
		<input type="checkbox" name="hebei" title="邢台市" value="邢台市">
		<input type="checkbox" name="hebei" title="保定市" value="保定市">
		<input type="checkbox" name="hebei" title="张家口市" value="张家口市">
		<input type="checkbox" name="hebei" title="承德市" value="承德市">
		<input type="checkbox" name="hebei" title="沧州市" value="沧州市">
		<input type="checkbox" name="hebei" title="廊坊市" value="廊坊市">
		<input type="checkbox" name="hebei" title="衡水市" value="衡水市">
	</div>
</div>
<div class="layui-form-item">
	<label class="layui-form-label">山西</label>
	<div class="layui-input-block">
		<input type="checkbox" name="shanxi" title="太原市" value="太原市">
		<input type="checkbox" name="shanxi" title="大同市" value="大同市">
		<input type="checkbox" name="shanxi" title="阳泉市" value="阳泉市">
		<input type="checkbox" name="shanxi" title="长治市" value="长治市">
		<input type="checkbox" name="shanxi" title="晋城市" value="晋城市">
		<input type="checkbox" name="shanxi" title="朔州市" value="朔州市">
		<input type="checkbox" name="shanxi" title="晋中市" value="晋中市">
		<input type="checkbox" name="shanxi" title="运城市" value="运城市">
		<input type="checkbox" name="shanxi" title="忻州市" value="忻州市">
		<input type="checkbox" name="shanxi" title="临汾市" value="临汾市">
		<input type="checkbox" name="shanxi" title="吕梁市" value="吕梁市">
	</div>
</div>
<div class="layui-form-item">
	<label class="layui-form-label">河南</label>
	<div class="layui-input-block">
		<input type="checkbox" name="henan" title="郑州市" value="郑州市">
		<input type="checkbox" name="henan" title="开封市" value="开封市">
		<input type="checkbox" name="henan" title="洛阳市" value="洛阳市">
		<input type="checkbox" name="henan" title="平顶山市" value="平顶山市">
		<input type="checkbox" name="henan" title="安阳市" value="安阳市">
		<input type="checkbox" name="henan" title="鹤壁市" value="鹤壁市">
		<input type="checkbox" name="henan" title="新乡市" value="新乡市">
		<input type="checkbox" name="henan" title="焦作市" value="焦作市">
		<input type="checkbox" name="henan" title="濮阳市" value="濮阳市">
		<input type="checkbox" name="henan" title="许昌市" value="许昌市">
		<input type="checkbox" name="henan" title="漯河市" value="漯河市">
		<input type="checkbox" name="henan" title="三门峡市" value="三门峡市">
		<input type="checkbox" name="henan" title="南阳市" value="南阳市">
		<input type="checkbox" name="henan" title="商丘市" value="商丘市">
		<input type="checkbox" name="henan" title="信阳市" value="信阳市">
		<input type="checkbox" name="henan" title="周口市" value="周口市">
		<input type="checkbox" name="henan" title="驻马店市" value="驻马店市">
		<input type="checkbox" name="henan" title="焦作市" value="焦作市">
	</div>
</div>
<div class="layui-form-item">
	<label class="layui-form-label">吉林</label>
	<div class="layui-input-block">
		<input type="checkbox" name="jilin" title="长春市" value="长春市">
		<input type="checkbox" name="jilin" title="吉林市" value="吉林市">
		<input type="checkbox" name="jilin" title="四平市" value="四平市">
		<input type="checkbox" name="jilin" title="辽源市" value="辽源市">
		<input type="checkbox" name="jilin" title="通化市" value="通化市">
		<input type="checkbox" name="jilin" title="白山市" value="白山市">
		<input type="checkbox" name="jilin" title="松原市" value="松原市">
		<input type="checkbox" name="jilin" title="白城市" value="白城市">
		<input type="checkbox" name="jilin" title="延边朝鲜族自治州" value="延边朝鲜族自治州">
	</div>
</div>
<div class="layui-form-item">
	<label class="layui-form-label">黑龙江</label>
	<div class="layui-input-block">
		<input type="checkbox" name="heilongjiang" title="哈尔滨市" value="哈尔滨市">
		<input type="checkbox" name="heilongjiang" title="齐齐哈尔市" value="齐齐哈尔市">
		<input type="checkbox" name="heilongjiang" title="鹤岗市" value="鹤岗市">
		<input type="checkbox" name="heilongjiang" title="双鸭山市" value="双鸭山市">
		<input type="checkbox" name="heilongjiang" title="鸡西市" value="鸡西市">
		<input type="checkbox" name="heilongjiang" title="大庆市" value="大庆市">
		<input type="checkbox" name="heilongjiang" title="伊春市" value="伊春市">
		<input type="checkbox" name="heilongjiang" title="牡丹江市" value="牡丹江市">
		<input type="checkbox" name="heilongjiang" title="佳木斯市" value="佳木斯市">
		<input type="checkbox" name="heilongjiang" title="七台河市" value="七台河市">
		<input type="checkbox" name="heilongjiang" title="黑河市" value="黑河市">
		<input type="checkbox" name="heilongjiang" title="绥化市" value="绥化市">
		<input type="checkbox" name="heilongjiang" title="大兴安岭地区" value="大兴安岭地区">
	</div>
</div>
<div class="layui-form-item">
	<label class="layui-form-label">内蒙古</label>
	<div class="layui-input-block">
		<input type="checkbox" name="neimenggu" title="呼和浩特市" value="呼和浩特市">
		<input type="checkbox" name="neimenggu" title="包头市" value="包头市">
		<input type="checkbox" name="neimenggu" title="乌海市" value="乌海市">
		<input type="checkbox" name="neimenggu" title="赤峰市" value="赤峰市">
		<input type="checkbox" name="neimenggu" title="通辽市" value="通辽市">
		<input type="checkbox" name="neimenggu" title="鄂尔多斯市" value="鄂尔多斯市">
		<input type="checkbox" name="neimenggu" title="呼伦贝尔市" value="呼伦贝尔市">
		<input type="checkbox" name="neimenggu" title="巴彦淖尔市" value="巴彦淖尔市">
		<input type="checkbox" name="neimenggu" title="乌兰察布市" value="乌兰察布市">
		<input type="checkbox" name="neimenggu" title="锡林郭勒盟" value="锡林郭勒盟">
		<input type="checkbox" name="neimenggu" title="兴安盟" value="兴安盟">
		<input type="checkbox" name="neimenggu" title="阿拉善盟" value="阿拉善盟">
	</div>
</div>
<div class="layui-form-item">
	<label class="layui-form-label">山东</label>
	<div class="layui-input-block">
		<input type="checkbox" name="shandong" title="济南市" value="济南市">
		<input type="checkbox" name="shandong" title="青岛市" value="青岛市">
		<input type="checkbox" name="shandong" title="淄博市" value="淄博市">
		<input type="checkbox" name="shandong" title="枣庄市" value="枣庄市">
		<input type="checkbox" name="shandong" title="东营市" value="东营市">
		<input type="checkbox" name="shandong" title="烟台市" value="烟台市">
		<input type="checkbox" name="shandong" title="潍坊市" value="潍坊市">
		<input type="checkbox" name="shandong" title="济宁市" value="济宁市">
		<input type="checkbox" name="shandong" title="泰安市" value="泰安市">
		<input type="checkbox" name="shandong" title="威海市" value="威海市">
		<input type="checkbox" name="shandong" title="日照市" value="日照市">
		<input type="checkbox" name="shandong" title="临沂市" value="临沂市">
		<input type="checkbox" name="shandong" title="德州市" value="德州市">
		<input type="checkbox" name="shandong" title="聊城市" value="聊城市">
		<input type="checkbox" name="shandong" title="滨州市" value="滨州市">
		<input type="checkbox" name="shandong" title="菏泽市" value="菏泽市">
	</div>
</div>
<div class="layui-form-item">
	<label class="layui-form-label">安徽</label>
	<div class="layui-input-block">
		<input type="checkbox" name="anhui" title="合肥市" value="合肥市">
		<input type="checkbox" name="anhui" title="芜湖市" value="芜湖市">
		<input type="checkbox" name="anhui" title="蚌埠市" value="蚌埠市">
		<input type="checkbox" name="anhui" title="淮南市" value="淮南市">
		<input type="checkbox" name="anhui" title="马鞍山市" value="马鞍山市">
		<input type="checkbox" name="anhui" title="淮北市" value="淮北市">
		<input type="checkbox" name="anhui" title="铜陵市" value="铜陵市">
		<input type="checkbox" name="anhui" title="安庆市" value="安庆市">
		<input type="checkbox" name="anhui" title="黄山市" value="黄山市">
		<input type="checkbox" name="anhui" title="滁州市" value="滁州市">
		<input type="checkbox" name="anhui" title="阜阳市" value="阜阳市">
		<input type="checkbox" name="anhui" title="宿州市" value="宿州市">
		<input type="checkbox" name="anhui" title="巢湖市" value="巢湖市">
		<input type="checkbox" name="anhui" title="六安市" value="六安市">
		<input type="checkbox" name="anhui" title="亳州市" value="亳州市">
		<input type="checkbox" name="anhui" title="池州市" value="池州市">
		<input type="checkbox" name="anhui" title="宣城市" value="宣城市">
	</div>
</div>
<div class="layui-form-item">
	<label class="layui-form-label">浙江</label>
	<div class="layui-input-block">
		<input type="checkbox" name="zhejiang" title="杭州市" value="杭州市">
		<input type="checkbox" name="zhejiang" title="宁波市" value="宁波市">
		<input type="checkbox" name="zhejiang" title="温州市" value="温州市">
		<input type="checkbox" name="zhejiang" title="嘉兴市" value="嘉兴市">
		<input type="checkbox" name="zhejiang" title="湖州市" value="湖州市">
		<input type="checkbox" name="zhejiang" title="绍兴市" value="绍兴市">
		<input type="checkbox" name="zhejiang" title="金华市" value="金华市">
		<input type="checkbox" name="zhejiang" title="衢州市" value="衢州市">
		<input type="checkbox" name="zhejiang" title="舟山市" value="舟山市">
		<input type="checkbox" name="zhejiang" title="台州市" value="台州市">
		<input type="checkbox" name="zhejiang" title="丽水市" value="丽水市">
	</div>
</div>
<div class="layui-form-item">
	<label class="layui-form-label">福建</label>
	<div class="layui-input-block">
		<input type="checkbox" name="fujian" title="福州市" value="福州市">
		<input type="checkbox" name="fujian" title="厦门市" value="厦门市">
		<input type="checkbox" name="fujian" title="莆田市" value="莆田市">
		<input type="checkbox" name="fujian" title="三明市" value="三明市">
		<input type="checkbox" name="fujian" title="泉州市" value="泉州市">
		<input type="checkbox" name="fujian" title="漳州市" value="漳州市">
		<input type="checkbox" name="fujian" title="南平市" value="南平市">
		<input type="checkbox" name="fujian" title="龙岩市" value="龙岩市">
		<input type="checkbox" name="fujian" title="宁德市" value="宁德市">
	</div>
</div>
<div class="layui-form-item">
	<label class="layui-form-label">湖南</label>
	<div class="layui-input-block">
		<input type="checkbox" name="hunan" title="长沙市" value="长沙市">
		<input type="checkbox" name="hunan" title="株洲市" value="株洲市">
		<input type="checkbox" name="hunan" title="湘潭市" value="湘潭市">
		<input type="checkbox" name="hunan" title="衡阳市" value="衡阳市">
		<input type="checkbox" name="hunan" title="邵阳市" value="邵阳市">
		<input type="checkbox" name="hunan" title="岳阳市" value="岳阳市">
		<input type="checkbox" name="hunan" title="常德市" value="常德市">
		<input type="checkbox" name="hunan" title="张家界市" value="张家界市">
		<input type="checkbox" name="hunan" title="益阳市" value="益阳市">
		<input type="checkbox" name="hunan" title="郴州市" value="郴州市">
		<input type="checkbox" name="hunan" title="永州市" value="永州市">
		<input type="checkbox" name="hunan" title="怀化市" value="怀化市">
		<input type="checkbox" name="hunan" title="娄底市" value="娄底市">
		<input type="checkbox" name="hunan" title="湘西土家族苗族自治州" value="湘西土家族苗族自治州">
	</div>
</div>
<div class="layui-form-item">
	<label class="layui-form-label">广西</label>
	<div class="layui-input-block">
		<input type="checkbox" name="guangxi" title="南宁市" value="南宁市">
		<input type="checkbox" name="guangxi" title="柳州市" value="柳州市">
		<input type="checkbox" name="guangxi" title="桂林市" value="桂林市">
		<input type="checkbox" name="guangxi" title="梧州市" value="梧州市">
		<input type="checkbox" name="guangxi" title="北海市" value="北海市">
		<input type="checkbox" name="guangxi" title="防城港市" value="防城港市">
		<input type="checkbox" name="guangxi" title="钦州市" value="钦州市">
		<input type="checkbox" name="guangxi" title="贵港市" value="贵港市">
		<input type="checkbox" name="guangxi" title="玉林市" value="玉林市">
		<input type="checkbox" name="guangxi" title="百色市" value="百色市">
		<input type="checkbox" name="guangxi" title="贺州市" value="贺州市">
		<input type="checkbox" name="guangxi" title="河池市" value="河池市">
		<input type="checkbox" name="guangxi" title="来宾市" value="来宾市">
		<input type="checkbox" name="guangxi" title="崇左市" value="崇左市">
	</div>
</div>
<div class="layui-form-item">
	<label class="layui-form-label">江西</label>
	<div class="layui-input-block">
		<input type="checkbox" name="jiangxi" title="南昌市" value="南昌市">
		<input type="checkbox" name="jiangxi" title="景德镇市" value="景德镇市">
		<input type="checkbox" name="jiangxi" title="萍乡市" value="萍乡市">
		<input type="checkbox" name="jiangxi" title="九江市" value="九江市">
		<input type="checkbox" name="jiangxi" title="新余市" value="新余市">
		<input type="checkbox" name="jiangxi" title="鹰潭市" value="鹰潭市">
		<input type="checkbox" name="jiangxi" title="赣州市" value="赣州市">
		<input type="checkbox" name="jiangxi" title="吉安市" value="吉安市">
		<input type="checkbox" name="jiangxi" title="宜春市" value="宜春市">
		<input type="checkbox" name="jiangxi" title="抚州市" value="抚州市">
		<input type="checkbox" name="jiangxi" title="上饶市" value="上饶市">
	</div>
</div>
<div class="layui-form-item">
	<label class="layui-form-label">贵州</label>
	<div class="layui-input-block">
		<input type="checkbox" name="guizhou" title="贵阳市" value="贵阳市">
		<input type="checkbox" name="guizhou" title="六盘水市" value="六盘水市">
		<input type="checkbox" name="guizhou" title="遵义市" value="遵义市">
		<input type="checkbox" name="guizhou" title="安顺市" value="安顺市">
		<input type="checkbox" name="guizhou" title="铜仁市" value="铜仁市">
		<input type="checkbox" name="guizhou" title="毕节市" value="毕节市">
		<input type="checkbox" name="guizhou" title="黔西南布依族苗族自治州" value="黔西南布依族苗族自治州">
		<input type="checkbox" name="guizhou" title="黔东南苗族侗族自治州" value="黔东南苗族侗族自治州">
		<input type="checkbox" name="guizhou" title="黔南布依族苗族自治州" value="黔南布依族苗族自治州">
	</div>
</div>
<div class="layui-form-item">
	<label class="layui-form-label">云南</label>
	<div class="layui-input-block">
		<input type="checkbox" name="yunnan" title="昆明市" value="昆明市">
		<input type="checkbox" name="yunnan" title="曲靖市" value="曲靖市">
		<input type="checkbox" name="yunnan" title="玉溪市" value="玉溪市">
		<input type="checkbox" name="yunnan" title="保山市" value="保山市">
		<input type="checkbox" name="yunnan" title="昭通市" value="昭通市">
		<input type="checkbox" name="yunnan" title="丽江市" value="丽江市">
		<input type="checkbox" name="yunnan" title="普洱市" value="普洱市">
		<input type="checkbox" name="yunnan" title="临沧市" value="临沧市">
		<input type="checkbox" name="yunnan" title="德宏傣族景颇族自治州" value="德宏傣族景颇族自治州">
		<input type="checkbox" name="yunnan" title="怒江傈僳族自治州" value="怒江傈僳族自治州">
		<input type="checkbox" name="yunnan" title="迪庆藏族自治州" value="迪庆藏族自治州">
		<input type="checkbox" name="yunnan" title="大理白族自治州" value="大理白族自治州">
		<input type="checkbox" name="yunnan" title="楚雄彝族自治州" value="楚雄彝族自治州">
		<input type="checkbox" name="yunnan" title="红河哈尼族彝族自治州" value="红河哈尼族彝族自治州">
		<input type="checkbox" name="yunnan" title="文山壮族苗族自治州" value="文山壮族苗族自治州">
		<input type="checkbox" name="yunnan" title="西双版纳傣族自治州" value="西双版纳傣族自治州">
	</div>
</div>
<div class="layui-form-item">
	<label class="layui-form-label">西藏</label>
	<div class="layui-input-block">
		<input type="checkbox" name="xizang" title="拉萨市" value="拉萨市">
		<input type="checkbox" name="xizang" title="那曲地区" value="那曲地区">
		<input type="checkbox" name="xizang" title="昌都市" value="昌都市">
		<input type="checkbox" name="xizang" title="林芝市" value="林芝市">
		<input type="checkbox" name="xizang" title="山南市" value="山南市">
		<input type="checkbox" name="xizang" title="日喀则市" value="日喀则市">
		<input type="checkbox" name="xizang" title="阿里地区" value="阿里地区">
	</div>
</div>
<div class="layui-form-item">
	<label class="layui-form-label">海南</label>
	<div class="layui-input-block">
		<input type="checkbox" name="hainan" title="海口市" value="海口市">
		<input type="checkbox" name="hainan" title="三亚市" value="三亚市">
		<input type="checkbox" name="hainan" title="五指山市" value="五指山市">
		<input type="checkbox" name="hainan" title="琼海市" value="琼海市">
		<input type="checkbox" name="hainan" title="儋州市" value="儋州市">
		<input type="checkbox" name="hainan" title="文昌市" value="文昌市">
		<input type="checkbox" name="hainan" title="万宁市" value="万宁市">
		<input type="checkbox" name="hainan" title="东方市" value="东方市">
		<input type="checkbox" name="hainan" title="澄迈县" value="澄迈县">
		<input type="checkbox" name="hainan" title="定安县" value="定安县">
		<input type="checkbox" name="hainan" title="屯昌县" value="屯昌县">
		<input type="checkbox" name="hainan" title="临高县" value="临高县">
		<input type="checkbox" name="hainan" title="白沙黎族自治县" value="白沙黎族自治县">
		<input type="checkbox" name="hainan" title="昌江黎族自治县" value="昌江黎族自治县">
		<input type="checkbox" name="hainan" title="乐东黎族自治县" value="乐东黎族自治县">
		<input type="checkbox" name="hainan" title="陵水黎族自治县" value="陵水黎族自治县">
		<input type="checkbox" name="hainan" title="保亭黎族苗族自治县" value="保亭黎族苗族自治县">
		<input type="checkbox" name="hainan" title="琼中黎族苗族自治县" value="琼中黎族苗族自治县">
	</div>
</div>
<div class="layui-form-item">
	<label class="layui-form-label">甘肃</label>
	<div class="layui-input-block">
		<input type="checkbox" name="gansu" title="兰州市" value="兰州市">
		<input type="checkbox" name="gansu" title="嘉峪关市" value="嘉峪关市">
		<input type="checkbox" name="gansu" title="金昌市" value="金昌市">
		<input type="checkbox" name="gansu" title="白银市" value="白银市">
		<input type="checkbox" name="gansu" title="天水市" value="天水市">
		<input type="checkbox" name="gansu" title="武威市" value="武威市">
		<input type="checkbox" name="gansu" title="酒泉市" value="酒泉市">
		<input type="checkbox" name="gansu" title="张掖市" value="张掖市">
		<input type="checkbox" name="gansu" title="庆阳市" value="庆阳市">
		<input type="checkbox" name="gansu" title="平凉市" value="平凉市">
		<input type="checkbox" name="gansu" title="定西市" value="定西市">
		<input type="checkbox" name="gansu" title="陇南市" value="陇南市">
		<input type="checkbox" name="gansu" title="临夏回族自治州" value="临夏回族自治州">
		<input type="checkbox" name="gansu" title="甘南藏族自治州" value="甘南藏族自治州">
	</div>
</div>
<div class="layui-form-item">
	<label class="layui-form-label">宁夏</label>
	<div class="layui-input-block">
		<input type="checkbox" name="ningxia" title="银川市" value="银川市">
		<input type="checkbox" name="ningxia" title="石嘴山市" value="石嘴山市">
		<input type="checkbox" name="ningxia" title="吴忠市" value="吴忠市">
		<input type="checkbox" name="ningxia" title="固原市" value="固原市">
		<input type="checkbox" name="ningxia" title="中卫市" value="中卫市">
	</div>
</div>
<div class="layui-form-item">
	<label class="layui-form-label">青海</label>
	<div class="layui-input-block">
		<input type="checkbox" name="qinghai" title="西宁市" value="西宁市">
		<input type="checkbox" name="qinghai" title="海东市" value="海东市">
		<input type="checkbox" name="qinghai" title="海北藏族自治州" value="海北藏族自治州">
		<input type="checkbox" name="qinghai" title="海南藏族自治州" value="海南藏族自治州">
		<input type="checkbox" name="qinghai" title="黄南藏族自治州" value="黄南藏族自治州">
		<input type="checkbox" name="qinghai" title="果洛藏族自治州" value="果洛藏族自治州">
		<input type="checkbox" name="qinghai" title="玉树藏族自治州" value="玉树藏族自治州">
		<input type="checkbox" name="qinghai" title="海西蒙古族藏族自治州" value="海西蒙古族藏族自治州">
	</div>
</div>
<div class="layui-form-item">
	<label class="layui-form-label">新疆</label>
	<div class="layui-input-block">
		<input type="checkbox" name="xinjiang" title="乌鲁木齐市" value="乌鲁木齐市">
		<input type="checkbox" name="xinjiang" title="克拉玛依市" value="克拉玛依市">
		<input type="checkbox" name="xinjiang" title="吐鲁番地区" value="吐鲁番地区">
		<input type="checkbox" name="xinjiang" title="哈密地区" value="哈密地区">
		<input type="checkbox" name="xinjiang" title="和田地区" value="和田地区">
		<input type="checkbox" name="xinjiang" title="阿克苏地区" value="阿克苏地区">
		<input type="checkbox" name="xinjiang" title="喀什地区" value="喀什地区">
		<input type="checkbox" name="xinjiang" title="克孜勒苏柯尔克孜自治州" value="克孜勒苏柯尔克孜自治州">
		<input type="checkbox" name="xinjiang" title="巴音郭楞蒙古自治州" value="巴音郭楞蒙古自治州">
		<input type="checkbox" name="xinjiang" title="昌吉回族自治州" value="昌吉回族自治州">
		<input type="checkbox" name="xinjiang" title="博尔塔拉蒙古自治州" value="博尔塔拉蒙古自治州">
		<input type="checkbox" name="xinjiang" title="石河子市" value="石河子市">
		<input type="checkbox" name="xinjiang" title="阿拉尔市" value="阿拉尔市">
		<input type="checkbox" name="xinjiang" title="图木舒克市" value="图木舒克市">
		<input type="checkbox" name="xinjiang" title="五家渠市" value="五家渠市">
		<input type="checkbox" name="xinjiang" title="伊犁哈萨克自治州" value="伊犁哈萨克自治州">
	</div>
</div>
<div class="layui-form-item">
	<label class="layui-form-label">香港</label>
	<div class="layui-input-block">
		<input type="checkbox" name="xianggang" title="中西区" value="中西区">
		<input type="checkbox" name="xianggang" title="湾仔区" value="湾仔区">
		<input type="checkbox" name="xianggang" title="东区" value="东区">
		<input type="checkbox" name="xianggang" title="南区" value="南区">
		<input type="checkbox" name="xianggang" title="深水埗区" value="深水埗区">
		<input type="checkbox" name="xianggang" title="油尖旺区" value="油尖旺区">
		<input type="checkbox" name="xianggang" title="九龙城区" value="九龙城区">
		<input type="checkbox" name="xianggang" title="黄大仙区" value="黄大仙区">
		<input type="checkbox" name="xianggang" title="观塘区" value="观塘区">
		<input type="checkbox" name="xianggang" title="北区" value="北区">
		<input type="checkbox" name="xianggang" title="大埔区" value="大埔区">
		<input type="checkbox" name="xianggang" title="沙田区" value="沙田区">
		<input type="checkbox" name="xianggang" title="西贡区" value="西贡区">
		<input type="checkbox" name="xianggang" title="元朗区" value="元朗区">
		<input type="checkbox" name="xianggang" title="屯门区" value="屯门区">
		<input type="checkbox" name="xianggang" title="荃湾区" value="荃湾区">
		<input type="checkbox" name="xianggang" title="葵青区" value="葵青区">
		<input type="checkbox" name="xianggang" title="离岛区" value="离岛区">
	</div>
</div>
<div class="layui-form-item">
	<label class="layui-form-label">澳门</label>
	<div class="layui-input-block">
		<input type="checkbox" name="aomen" title="花地玛堂区" value="花地玛堂区">
		<input type="checkbox" name="aomen" title="圣安多尼堂区" value="圣安多尼堂区">
		<input type="checkbox" name="aomen" title="大堂区" value="大堂区">
		<input type="checkbox" name="aomen" title="望德堂区" value="望德堂区">
		<input type="checkbox" name="aomen" title="风顺堂区" value="风顺堂区">
		<input type="checkbox" name="aomen" title="嘉模堂区" value="嘉模堂区">
		<input type="checkbox" name="aomen" title="圣方济各堂区" value="圣方济各堂区">
		<input type="checkbox" name="aomen" title="路凼市" value="路凼市">
	</div>
</div>
<div class="layui-form-item">
	<label class="layui-form-label">台湾</label>
	<div class="layui-input-block">
		<input type="checkbox" name="taiwan" title="台北市" value="台北市">
		<input type="checkbox" name="taiwan" title="高雄市" value="高雄市">
		<input type="checkbox" name="taiwan" title="台北县" value="台北县">
		<input type="checkbox" name="taiwan" title="桃园县" value="桃园县">
		<input type="checkbox" name="taiwan" title="新竹县" value="新竹县">
		<input type="checkbox" name="taiwan" title="苗栗县" value="苗栗县">
		<input type="checkbox" name="taiwan" title="台中县" value="台中县">
		<input type="checkbox" name="taiwan" title="彰化县" value="彰化县">
		<input type="checkbox" name="taiwan" title="南投县" value="南投县">
		<input type="checkbox" name="taiwan" title="云林县" value="云林县">
		<input type="checkbox" name="taiwan" title="嘉义县" value="嘉义县">
		<input type="checkbox" name="taiwan" title="台南县" value="台南县">
		<input type="checkbox" name="taiwan" title="高雄县" value="高雄县">
		<input type="checkbox" name="taiwan" title="屏东县" value="屏东县">
		<input type="checkbox" name="taiwan" title="宜兰县" value="宜兰县">
		<input type="checkbox" name="taiwan" title="花莲县" value="花莲县">
		<input type="checkbox" name="taiwan" title="台东县" value="台东县">
		<input type="checkbox" name="taiwan" title="澎湖县" value="澎湖县">
		<input type="checkbox" name="taiwan" title="基隆市" value="基隆市">
		<input type="checkbox" name="taiwan" title="新竹市" value="新竹市">
		<input type="checkbox" name="taiwan" title="台中市" value="台中市">
		<input type="checkbox" name="taiwan" title="嘉义市" value="嘉义市">
		<input type="checkbox" name="taiwan" title="台南市" value="台南市">
	</div>
</div>

  <div class="layui-form-item">
    <div class="layui-input-block">
      <button type="submit" class="layui-btn" >立即提交</button>
      <button type="reset" class="layui-btn layui-btn-primary">重置</button>
    </div>

</form>

</body>
</html>

这是整个服务的首页,页面如下:

网页首页
  后端的web服务代码如下:(核心代码已经在 Python之绘制个人足迹地图 给出)

# -*- coding: utf-8 -*-
# author: Jclian91
# place: Pudong Shanghai
# time: 2020/6/2 9:44 下午
import os

import os.path
import tornado.httpserver
import tornado.ioloop
import tornado.options
import tornado.web
from tornado.options import define, options

from pyecharts.charts import Map
from pyecharts import options as opts
from pypinyin import lazy_pinyin

define("port", default=8100, help="run on the given port", type=int)


class IndexHandler(tornado.web.RequestHandler):
    def get(self):
        self.render('index.html')


class MapHandler(tornado.web.RequestHandler):
    def post(self):
        provinces = "上海 云南 内蒙古 北京 台湾 吉林 四川 天津 宁夏 安徽 山东 山西 广东 广西 新疆 江苏 江西 河北 河南 浙江 海南 湖北" \
                    " 湖南 澳门 甘肃 福建 西藏 贵州 辽宁 重庆 陕西 青海 香港 黑龙江"
        pinyin_dict = {province: "".join(lazy_pinyin(province)) for province in provinces.split()}
        pinyin_dict["陕西"] = "shaanxi"

        # 获取参数
        province_dict = {}
        for k, v in pinyin_dict.items():
            cities = self.get_arguments(v)
            if cities:
                province_dict[k] = cities

        print(province_dict)

        # 绘制全国地图
        # 指定chart_id,便于后续添加JS function
        map = Map(init_opts=opts.InitOpts(chart_id="123", width='1200px', height='700px'))
        map.set_global_opts(
            title_opts=opts.TitleOpts(title="个人足迹地图"),
            toolbox_opts=opts.ToolboxOpts(is_show=True, orient="vertical"),
            visualmap_opts=opts.VisualMapOpts(max_=20, is_piecewise=True)
        )

        map.add("个人足迹地图", data_pair={k: len(v) for k, v in province_dict.items()}.items(), maptype="china",
                is_roam=True)
        # 添加JS function
        js_func = """
                chart_123.on('click', function (param){
                    var selected = param.name;
                        if (selected) {
                            switch(selected){
                  """

        for province, cities in province_dict.items():
            js_func += '\t\t\t\t\t\tcase "%s":\n\t\t\t\t\t\t\tlocation.href = "./provinces?province=%s";' \
                       '\n\t\t\t\t\t\t\tbreak;\n' % (province, province)

        js_func += "\t\t\t\t\t\tdefault:\n\t\t\t\t\t\t\tbreak;}}});"
        map.add_js_funcs(js_func)

        print("生成个人足迹地图-全国 成功")
        map.render('./templates/全国.html')

        # 绘制每个省的地图
        for province, cities in province_dict.items():
            map = Map(init_opts=opts.InitOpts(width='1200px', height='700px'))
            map.set_global_opts(
                title_opts=opts.TitleOpts(title="个人足迹地图-%s" % province),
                toolbox_opts=opts.ToolboxOpts(is_show=True, orient="vertical"),
                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('./templates/provinces/%s.html' % province)
            print("生成个人足迹地图-%s 成功" % province)

        self.render("全国.html")


class ProvinceHandler(tornado.web.RequestHandler):
    def get(self):
        self.render("./provinces/%s.html" % self.get_argument("province"))


def main():
    if not os.path.exists("./templates/provinces"):
        os.system("mkdir -p ./templates/provinces")
    tornado.options.parse_command_line()
    app = tornado.web.Application(
            handlers=[(r'/index', IndexHandler),
                      (r'/map', MapHandler),
                      (r'/provinces', ProvinceHandler)
                      ],
            template_path=os.path.join(os.path.dirname(__file__), "templates")
          )
    http_server = tornado.httpserver.HTTPServer(app)
    http_server.listen(options.port)
    tornado.ioloop.IOLoop.instance().start()


main()

运行该脚本,在浏览器中输入http://127.0.0.1:8100/index即可访问该服务。
  选择自己去过的地市级,点击提交后就能产生个人足迹地图了。
  本项目已经开源至Github,网址为:https://github.com/percent4/personal_travel_map, 分支为dev_20200603 。
  操作视频可以参考网址: https://mp.weixin.qq.com/s?__biz=MzU2NTYyMDk5MQ==&mid=2247484691&idx=1&sn=9fba244fc63c1098a268289fa797c873&chksm=fcb9bc83cbce3595583e96858543adc05c473068f6e4fce0a68bfbda0733cd5a2043b42a68c2&token=194171999&lang=zh_CN#rd

  本次分享到此结束,感谢大家阅读~

posted @ 2020-06-03 22:12  山阴少年  阅读(837)  评论(0编辑  收藏  举报