构建一个pip安装的车辆路径显示的python包

最近有一些车辆的gps数据要分析,想着能否先直观地感受下车辆的运行情况,正好有leaflet地图库,做起来很方便。简单实现了基本需求后,想着能不能封装下,弄成个python包的形式,这样可以在其他地方使用pip安装,在程序里import调用,也显得简洁。

基本效果

2422746-9fa6a665c6f82346.png

基本功能实现

  • 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的包及一些基本文件。
    2422746-9be93afe21697b9d.png
  • 按照命令行输出的提示,我们需要先修改myNewPackage文件夹中的.pypirc文件,将your_usernameyour_password改为你的用户名和密码,如果没有的话先去pypitestpypi注册。修改好之后将它剪切到用户配置目录,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

其他

  • 动态轨迹看到个用d3产生的效果比较漂亮,不过当前这个简陋版已经满足我的需求,就不烦了。
  • 本来想使用现成的plotly的地图效果,可惜支持好像不太好。
  • 写完两天后,突然发现一个python-leaflet的库 – folium。在开源世界探索真像淘金,不知道什么时候你的痛点别人也遇到过,而且留下了解决方案。使用效果如下,还是很不错的,基本需求使用起来非常方便,但是特定场景还是需要再费工夫的。很巧,它也使用了jinja2,哈哈。
    2422746-e4995d3956d550b0.png

    2422746-d67f585690f806b7.png

转载自:https://blog.csdn.net/weixin_34367257/article/details/86975039

You may also like...