用 Python 和高德 API 绘制跑步轨迹


阅读数: 次   
字数统计: 1.2k字   |   阅读时长: 6分

把2019年在不同地方跑步的轨迹都画在一张地图上，看看过去一年都跑过哪些地方。

导出 GPX 文件

第一步，先把各个地方能导出轨迹的都导出来。看了一下 .FIT 、 .TPX 和 .GPX 中，以 GPX 文件结构最简单，于是把轨迹都导成 .gpx 格式文件。

读取 GPX 文件数据

第二步，用 Python 读入这些 GPX 轨迹信息，处理后再画在地图上，直接使用 Python 自带的 xml 库完成读取，注意要剔除 lat 和 lon 为0的数据点，因为 GPX 是用这种方法来标记暂停的。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
import xml.dom.minidom as xdom

dom_tree = xdom.parse(os.path.join(filePath, gpxPath))
collection = dom_tree.documentElement
trkpts = collection.getElementsByTagName("trkpt")
data = '{"line_id":"' + gpxPath[:8] + '","lnglat":['
i = 0
for trkpt in trkpts:
    i = i + 1
    lat = trkpt.getAttribute("lat")
    lon = trkpt.getAttribute("lon")
    if lat == '0' or lon == '0':
        continue
    ret = wgs84_to_gcj02(float(lon), float(lat))
    data = data + '[' + str(ret[0]) + ',' + str(ret[1]) + ']'
    if(i < len(trkpts)):
        data = data + ','
data = data + ']},'

WGS84 转 GCJ02，解决高德坐标偏移

用 Python 实现 GPS 偏移校正，WGS84 转 GCJ02（火星坐标系）。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
import math

x_pi = 3.14159265358979324 * 3000.0 / 180.0
pi = 3.1415926535897932384626  # π
a = 6378245.0  # 长半轴
ee = 0.00669342162296594323  # 偏心率平方

def wgs84_to_gcj02(lng, lat):
    """
    WGS84转GCJ02(火星坐标系)
    :param lng:WGS84坐标系的经度
    :param lat:WGS84坐标系的纬度
    :return:
	"""
    if out_of_china(lng, lat):  # 判断是否在国内
        return [lng, lat]
    dlat = _transformlat(lng - 105.0, lat - 35.0)
    dlng = _transformlng(lng - 105.0, lat - 35.0)
    radlat = lat / 180.0 * pi
    magic = math.sin(radlat)
    magic = 1 - ee * magic * magic
    sqrtmagic = math.sqrt(magic)
    dlat = (dlat * 180.0) / ((a * (1 - ee)) / (magic * sqrtmagic) * pi)
    dlng = (dlng * 180.0) / (a / sqrtmagic * math.cos(radlat) * pi)
    mglat = lat + dlat
    mglng = lng + dlng
    return [mglng, mglat]

def _transformlat(lng, lat):
    ret = -100.0 + 2.0 * lng + 3.0 * lat + 0.2 * lat * lat + \
          0.1 * lng * lat + 0.2 * math.sqrt(math.fabs(lng))
    ret += (20.0 * math.sin(6.0 * lng * pi) + 20.0 *
            math.sin(2.0 * lng * pi)) * 2.0 / 3.0
    ret += (20.0 * math.sin(lat * pi) + 40.0 *
            math.sin(lat / 3.0 * pi)) * 2.0 / 3.0
    ret += (160.0 * math.sin(lat / 12.0 * pi) + 320 *
            math.sin(lat * pi / 30.0)) * 2.0 / 3.0
    return ret

def _transformlng(lng, lat):
    ret = 300.0 + lng + 2.0 * lat + 0.1 * lng * lng + \
          0.1 * lng * lat + 0.1 * math.sqrt(math.fabs(lng))
    ret += (20.0 * math.sin(6.0 * lng * pi) + 20.0 *
            math.sin(2.0 * lng * pi)) * 2.0 / 3.0
    ret += (20.0 * math.sin(lng * pi) + 40.0 *
            math.sin(lng / 3.0 * pi)) * 2.0 / 3.0
    ret += (150.0 * math.sin(lng / 12.0 * pi) + 300.0 *
            math.sin(lng / 30.0 * pi)) * 2.0 / 3.0
    return ret

def out_of_china(lng, lat):
    """
    判断是否在国内，不在国内不做偏移
    :param lng:
    :param lat:
    :return:
    """
    return not (lng > 73.66 and lng < 135.05 and lat > 3.86 and lat < 53.55)

输出 JSON 文件

输出 JS 可以方便读取的 JSON 文件。

1
2
3
4
5
6
7
8
9
import os

jsonDir = os.path.abspath('./jsons')
if not os.path.exists(jsonDir):
    os.mkdir(jsonDir)
jsonPath = os.path.join(jsonDir, gpxPath[:8]) + '.json'
with open(jsonPath, 'w') as f:
    f.write(data)
    f.close()

为了方便的处理多条数据，把上面 Python 的部分写成一个 procXml 函数。

1
2
3
4
5
6
7
8
9
10
def main():
    filePath = os.path.abspath('./gpxs')
    fileList = os.listdir(filePath)
    for gpxPath in fileList:
        print('Processing ' + str(gpxPath))
        procXml(filePath, gpxPath)
        print('Coresponding JSON file was generated.')

if __name__ == '__main__':
    main()

对位置数据进行可视化展示

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
    <title>跑步轨迹</title>
    <link rel="stylesheet" href="https://cache.amap.com/lbs/static/main1119.css"/>
</head>

<body>
    <div id="container" class="container"></div>
    <div id="myPageTop">
        <table>
            <tr>
                <td>
                    <label>请输入关键字：</label>
                </td>
            </tr>
            <tr>
                <td>
                    <input id="tipinput"/>
                </td>
            </tr>
        </table>
    </div>

    <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=您申请的key值"></script>
    <script type="text/javascript" src="https://webapi.amap.com/loca?v=1.3.2&key=您申请的key值"></script>
    <script type="text/javascript" src="./line.js"></script>
    <script type="text/javascript" src="https://cache.amap.com/lbs/static/addToolbar.js"></script>

    <script type="text/javascript">		
        var map = new AMap.Map('container', {
            mapStyle: 'amap://styles/1de318cbb8d12c02303a22c550b9ccc9',
            zoom: 11,
            center: [120.168109,35.943654], // 青岛
            // zoom: 15,
            // center: [121.37553692,28.3687836300], // 温岭
            mapStyle: 'dark',
			features: ['bg','point'],
            resizeEnable: true
        });

        //输入提示
        var autoOptions = {
            input: "tipinput"
        };

        AMap.plugin(['AMap.Autocomplete','AMap.PlaceSearch','AMap.MapType'],function(){
            var auto = new AMap.Autocomplete(autoOptions);
            var placeSearch = new AMap.PlaceSearch({
                map: map
            });  //构造地点查询类
            AMap.event.addListener(auto, "select", select);//注册监听，当选中某条记录时会触发
            function select(e) {
                placeSearch.setCity(e.poi.adcode);
                placeSearch.search(e.poi.name);  //关键字查询查询
            }
            map.addControl(new AMap.MapType());
        })

        var layer = new Loca.LineLayer({
            map: map
        });

		var colors = ['#07E8E4','#1f78b4','#b2df8a','#33a02c','#fb9a99','#e31a1c','#fdbf6f','#ff7f00','#D1E87D','#AD92D1','#3346BD','#EBEB8D','#7FC97F'];

        layer.setData(lines, {
            lnglat: 'lnglat'
        });

        layer.setOptions({
            style: {
                borderWidth: 3,
                opacity: 1,
                color: function(v){
                    var id = v.value.line_id;
                    var len = colors.length;
                    return colors[id % len];
                },
            }
        });
		// 渲染
		layer.render();
    </script>
</body>
</html>

参考: 高德地图 API 分类路径示例

效果

跑步轨迹

赏

谢谢你请我吃糖果

支付宝
微信

扫一扫，分享到微信

微信分享二维码

tag:

    缺失模块。
    1、请确保node版本大于6.2
    2、在博客根目录（注意不是yilia根目录）执行以下命令：
    npm i hexo-generator-json-content --save

    3、在根目录_config.yml里添加配置： 

      jsonContent:
    meta: false
    pages: false
    posts:
      title: true
      date: true
      path: true
      text: false
      raw: false
      content: false
      slug: false
      updated: false
      comments: false
      link: false
      permalink: false
      excerpt: false
      categories: false
      tags: true

sky，<br>本科石大，硕士清华<br><br>专业是材料，<br>但喜欢编程<br><br>但行好事，莫问前程，<br>河狭水急，人急计生。