用 Python 和高德地图 API 绘制我的足迹

最近3年多去了不少城市，拍了不少照片，因此萌生了写个程序提取照片位置信息，转换为轨迹点画在一张地图上的想法。

导出 GPX 文件

使用 GeoSetter 软件批量提取并导出图像 GPS 信息，保存为 GPX 文件，下面是一段 .gpx 文件的记录点格式。

<trkpt lat="35.94073611" lon="120.17107500">
<time>2017-10-19T20:40:31Z</time>
<ele>11.170000</ele>
<speed>0.000000</speed>
<course>293.078156</course>
</trkpt>

读取 GPX 文件数据

直接使用 Python 自带的 xml 库完成读取。

import xml.dom.minidom as xdom

dom_tree = xdom.parse(os.path.join(filePath, gpxPath))
collection = dom_tree.documentElement
trkpts = collection.getElementsByTagName("trkpt")
data = ""
rets = []

for trkpt in trkpts:
    lat = trkpt.getAttribute("lat")
    lon = trkpt.getAttribute("lon")
    if lat == '0' or lon == '0':
        continue
    ret = wgs84_to_gcj02(float(lon), float(lat))
    rets.append(ret)
    data = data + "{ 'center': '" + str(ret[0]) + "," + str(ret[1]) + "' },\n"

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

做过地图相关开发的同学肯定会遇到这样一个问题：同样的经纬度坐标，在谷歌地图和高德地图上的位置是不一样的。

常用地图坐标系介绍

WGS-84：是使用最广泛的坐标系，也是世界通用的坐标系，GPS 设备得到的经纬度就是在 WGS84 坐标系下的经纬度。通常底层接口（ HTML5 Geolocation 或 iOS、安卓 API ）得到的定位信息都是 WGS84 坐标系。
GCJ-02：又被称为火星坐标系，中国坐标偏移标准，高德地图、腾讯地图以及 Google 中国区地图使用。
BD-09 ：百度坐标偏移标准，百度地图使用。

Python 实现 GPS 偏移校正 ( WGS-84 ) 到 ( GCJ-02 )

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)

输出 JS 文件

import os

jsDir = os.path.abspath('./js')
if not os.path.exists(jsDir):
    os.mkdir(jsDir)
jsonPath = os.path.join(jsDir, gpxPath) + '.js'
with open(jsonPath, 'w') as f:
    f.write(data)
    f.close()

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

def main():
    filePath = os.path.abspath('./gpxs')
    fileList = os.listdir(filePath)
    for gpxPath in fileList:
        print('Processing ' + str(gpxPath))
        procXml(filePath, gpxPath)
        print('Coresponding JS file was generated.')

if __name__ == '__main__':
    main()

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

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <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 src="https://webapi.amap.com/maps?v=1.4.15&key=8b093298b30af4240493f7a641ed0029"></script>
    <script src="https://webapi.amap.com/loca?v=1.3.2&key=8b093298b30af4240493f7a641ed0029"></script>
    <script src="./data.js"></script>
    <script type="text/javascript" src="https://cache.amap.com/lbs/static/addToolbar.js"></script>

    <script>
        var map = new AMap.Map('container', {
            mapStyle: 'amap://styles/1de318cbb8d12c02303a22c550b9ccc9',
            zoom: 5,
            center: [112.12255, 35.2044],
            mapStyle: 'dark',
            features: ['bg', 'road', 'point'],
        });

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

        layer.setData(districts, {
            // 指定经纬度所在字段
            lnglat: 'center'
        });

        layer.setOptions({
            style: {
                // 圆形半径，单位像素
                radius: 2.5,
                // 填充颜色
                color: '#14B4C9',
                // 描边颜色
                borderColor: '#14B4C9',
                // 描边宽度，单位像素
                borderWidth: 1,
                // 透明度 [0-1]
                opacity: 0.9,
            }
        });

        layer.render();

        //输入提示
        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());
        })
    </script>
</body>
</html>

参考: 高德地图 API 散点示例

效果

我的足迹