标签：矢量 9.png css 截取 属性 小伙伴 语言 list lis
现有各种各样的运动app、运动手表手环以及gps码表等可以用于记录日常骑行或跑步等运动轨迹;但轨迹显示多数只限于显示一天的轨迹，经过搜索只发现一篇文章介绍跑步轨迹叠加方法（查看），根据教程尝试了下还因为perl语言的一些插件没搞定，果断放弃决定自己动手丰衣足食。
ps:那条长线不是绘制的有问题，的确是单日骑行距离最远的一次，260多公里（开始30多公里由于码表磁铁位置问题只记录了几公里，码表记录233公里）。
济南市附近轨迹，缺个环泰：
卫星地图轨迹：
作为一位骑行爱好者，手头刚好有一部捷安特码表。虽然其对应的APP显示的数据一应俱全，但是轨迹显示效果非常一般，如下图所示。作为一名经验丰富的IT从业者，多年的职业训练带来的敏锐直觉告诉我（没错，就是要自吹自擂然后加粗强调一下！）：既然它的app能画出轨迹，码表本身必然保存有轨迹的原始数据，而且很有可能是gps的经纬度组成的点的序列。只要能拿到这些轨迹的原始数据，就能根据经纬度画出所有轨迹。
说干就干，首先把码表通过USB连接电脑，尝试一下看能不能访问内部的文件。进展顺利，发现内部有很多如下所示的.fit文件，而且文件名恰好跟自己的运动日期匹配，且文件大小根据对应日期骑行距离的长短大小不一，想必就是轨迹记录源文件了。
尝试用文本编辑器打开上述.fit文件，居然是乱码——很不幸，.fit文件是二进制文件，无法直接使用。经过一系列搜索发现.fit文件可以通过如下命令转换为另一种文本类型的gpx文件。
gpsbabel -i garmin_fit -f 170712051156.fit -o gpx -F 170712051156.gpx
但是目录下一百个文件，逐个文件执行命令并生成对应的gpx文件那得啥时候搞完？
linux优势立马体现出来,接下来给出获取gpx文件的详细步骤：
1. 进入存放.fit文件的目录，列出目录下的文件;
2. 把所有的fit文件名导入到文件fitfilelist中;
打开fitfilelist查看文件内容，是一百个fit文件名（图中截取部分）：
3.使用正则表达式进行替换（正则表达式的使用），上图中的文件内容变成下图所示：
4.通过source fitfilelist执行fitfilelist文件中的一系列gpsbabel命令，等执行完就可以看到目录下多了很多gpx文件
5.创建gpxfile目录并将gpx文件移动到该目录：
查看一下gpx文件的内容，可以看到文件内容主要就是一系列经纬度、高度、时间、速度数据：
至此完成获取gpx文件部分。
这部分需要一定的python、django、javascript、HTML、CSS语言基础，以及了解高德地图API，看着语言很多，每个知识点只需要了解一点点就好;本文也直接给出了参考代码，不懂的地方可以去参考相关的官方文档。
本人也是一个跟芯片手册打交道的C语言驱动工程师，提到的这些语言基本都是为了画图现学的; 对于完成目标而言，学习难度并不高(能写出商用级别的代码又是另外一回事了)。
调用高德API画轨迹的步骤如下：
1.将第一部分获取到的gpx存放到/root/virenv_python3/django_for_study/mysite/polls/xmls/目录下;
2.django的view.py python文件导入xml解析模块：import xml.etree.ElementTree as ET，并编写函数完成如下功能：
遍历gpx文件，获取每个文件中的经纬度信息保存到变量path_dot中，所有文件的path_dot组成path_list, 通过render函数渲染给模板。
高能预警此处有坑：利用ElementTree模块递归查找gpx格式的xml文件（见上图）时，想通过查找‘trkpt’这个tag获取到每个tag下的‘lat’和‘lon’两个属性，但是无论如何获取不到，后来将tag打印出来发现内容为‘{http://www.topografix.com/GPX/1/0}trkpt‘，即在trkpt前面加了文件中定义的xmlns的内容，将代码改为下图的496行所示就搞定了。
3.模板中通过javascript调用高德地图API加载地图，并为地图添加由一系列经纬度点组成的矢量折线：
3.设置url触发步骤2中的showmap函数，在浏览器中访问该URL，大功告成。现在还有点问题就是轨迹相比地图整体向西偏移了100米左右，我的码表以及小伙伴的码表数据绘制的轨迹偏移差不多。而且多次经过同一个位置的路线基本是叠加在一起的，这样看来码表记录基本准确，在数据基础上整体加个偏移就能跟地图完美重合了;有时间再研究。
标签：矢量 9.png css 截取 属性 小伙伴 语言 list lis
原文地址：https://www.cnblogs.com/leituhaomo/p/10165286.html
