最近有一些车辆的gps数据要分析，想着能否先直观地感受下车辆的运行情况，正好有leaflet地图库，做起来很方便。简单实现了基本需求后，想着能不能封装下，弄成个python包的形式，这样可以在其他地方使用pip安装，在程序里
import调用，也显得简洁。
基本效果
基本功能实现
- html页面借助leaflet实现由地理坐标和时间列表数据产生的动态轨迹。
- 数据获取利用jinja2模板渲染，直接往html模板（即path_template）中填充数据（经纬度，对应时间，以及轨迹运行快慢即时间间隔）。
- 最后保存渲染好的html文件到本地。
- 代码如下，很简单，就是一个模板变量加一个函数，仅供参考。将该文件保存为
car.py。
# -*- coding: utf-8 -*-
from jinja2 import Template
path_template = '''<!DOCTYPE html>
<html lang="zh">
<head>
<title> 车辆路径图 </title>
<!-- <meta charset="utf-8" /> -->
<!-- <meta name="viewport" content="width=device-width, initial-scale=1.0"> -->
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.3/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet@1.0.3/dist/leaflet.js"></script>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<!--font awesome-->
<link href="https://cdn.bootcss.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://unpkg.com/leaflet-easybutton@2.0.0/src/easy-button.css">
<script src="https://unpkg.com/leaflet-easybutton@2.0.0/src/easy-button.js"></script>
</head>
<body>
<!-- <div id="mapid" style="width:600px; height:400px"></div> -->
<div id="mapid" style="height:800px"></div>
<!-- 必须指定高度 -->
<script>
var app = new Vue({
el: '#mapid',
data: {
message: 'Hello Vue!',
latlngs: [
{% for lat,lng in latlngs %}
[ {{ lat }}, {{ lng }} ],
{% endfor %}
],
time: [
{% for i in times %}
'{{i.hour}}:{{i.minute}}:{{i.second}}',
{% endfor %}
],
num: 0,
colors: ['purple', 'pink', 'orange', 'yellow', 'green', 'blue'],
deltatime: {{ deltatime }},
},
mounted: function () {
this.$nextTick(function () {
// 代码保证 this.$el 在 document 中
this.initMap();
this.genPath();
this.addButton();
setTimeout(this.pathRun, 1000);
})
},
methods: {
initMap() {
this.mymap = L.map('mapid', {
zoom: 7, //初始聚焦程度
center: this.latlngs[0], // [lat, lng] [纬度, 经度]
minZoom: 3, //最宽广，越小越宽广
maxZoom: 18, //最细致，越大越细致
});
L.tileLayer(
'https://webrd0{s}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}', {
subdomains: ["1", "2", "3", "4"], //可用子域名，用于浏览器并发请求
attribution: "© 高德地图", //可以修改为其它内容
}).addTo(this.mymap); //添加tile层到地图
this.marker = L.marker(this.latlngs[0]).addTo(this.mymap);
this.marker.bindPopup(this.time[0]).openPopup();
},
genPath() {
L.polyline(this.latlngs).addTo(this.mymap);
this.mymap.fitBounds(this.latlngs);
this.runline = L.polyline([], {color: 'red'}).addTo(this.mymap);
},
pathRun(){
if ( this.num > (this.latlngs.length-1) ){
this.num = 0
}
this.marker.setLatLng(this.latlngs[this.num])
this.marker.getPopup().setContent(this.time[this.num])
this.runline.addLatLng(this.latlngs[this.num])
this.num += 1
if (this.changeView != null){
this.changeView()
}
<!-- changeView用于改变视域中心 -->
setTimeout(this.pathRun, {{deltatime}})
},
addButton() {
// https://github.com/CliffCloud/Leaflet.EasyButton
L.easyButton('fa-refresh', this.refresh).addTo(this.mymap);
L.easyButton('fa-taxi', this.follow).addTo(this.mymap);
this.followstate = false;
},
refresh() {
this.mymap.fitBounds(this.latlngs);
},
follow() {
if(this.followstate == true){
this.followstate = false;
this.changeView = null;
this.refresh();
this.marker.closePopup();
}
else{
this.followstate = true;
this.changeView = this._changeView ;
this.marker.openPopup();
}
},
_changeView(){
this.mymap.setView(this.marker.getLatLng());
},
}
})
</script>
</body>
</html>
'''
def producePath(latlngs, times, deltatime=50, filename="./path_rendering.html"):
rendering = Template(path_template).render(
latlngs = latlngs,
times = times,
deltatime = deltatime,
)
with open(filename, 'w', encoding='utf-8') as path_rendering:
path_rendering.write(rendering)
封装为python包并上传
- 制作python包稍微有点麻烦，之前做了个简陋的脚手架工具帮助我创建一些基本的文件，省得再动手了。
- 使用
pip install mwrz安装该工具，然后在工作目录下执行命令行fastpypi --packagename=carpathview产生一个myNewPackage的文件夹，里面有个名为carpathview的包及一些基本文件。
- 按照命令行输出的提示，我们需要先修改myNewPackage文件夹中的.pypirc文件，将
your_username和your_password改为你的用户名和密码，如果没有的话先去pypi与testpypi注册。修改好之后将它剪切到用户配置目录，windows下使用echo %HOMEPATH%命令找到该目录。 - 然后修改setup.py文件，首先这次不需要产生命令行脚本，注释掉scripts所在行，然后由于我们的程序使用了2.9版本的jinja2，在install_requires行添加依赖库，改为
install_requires = ['jinja2>=2.9'],，其他作者之类信息看情况修改，关系不大。项目说明写在README.md文件中。 - 进入carpathview包中，这是真正的项目目录。删除
pyScript.py，将car.py拷贝到当前目录。修改__init__.py，添加一行from .car import *，这里使用了相对引入。 - 最后回到myNewPackage目录下，使用提示的四个命令进行上传即可。
python setup.py register -r pypitest
python setup.py sdist upload -r pypitest
python setup.py register -r pypi
python setup.py sdist upload -r pypi
下载测试
- 国内镜像源可能不能那么及时更新，我们指定镜像源下载安装 -
pip install carpathview -i https://pypi.python.org/pypi - 然后就可以在程序中简单使用
from carpathview import producePath调用该函数实现功能了。 - 使用示例如carpathview
