头图

字多不看版

本文主要介绍了如何使用Python的GpsAndMap模块进行地图标记的旋转操作。首先,作者通过在厦门市和台北市位置添加箭头图标,展示了图标的旋转功能。然后,通过计算两个GPS坐标点之间的相对方位角,实现了让厦门和台北的图标箭头彼此指向对方的效果。最后,作者利用这个技术,将中国各地市的坐标标记在地图上,使用红心作为图标,并控制红心的旋转角度,实现了将所有的红心的方向都指向北京市的效果,形象地展现了“红心向阳,百鸟朝凤”的场景。

背景

最近在玩 folium 模块,基于使用过程中的一些个人体验,对 folium 进行了二次封装,开源在 GpsAndMap.在使用的过程中,发现在地图上打图标是可以进行旋转的。遇到就发现了一些有意思的玩法。

隔海的相望

下面的代码在地图 厦门市 和 台北市 位置添加了箭头的图标。

# -*- coding:UTF-8 -*-

# region 引入必要依赖
from GpsAndMap.MapModule import *

# endregion


地图 = 地图类().添加瓦片.高德地图().地图

图层 = 地图.添加图层('我有红心向太阳')

地图.添加标记(图层, 图标标记类(位置=常用坐标.厦门市, 图标='glyphicon-arrow-right'))
地图.添加标记(图层, 图标标记类(位置=常用坐标.台北市, 图标='glyphicon-arrow-right'))

地图.保存html(目标路径='.').打开()

image.png
👆上图中,我们可以看到在厦门和台北的两个图标,其箭头都是朝东的,如何让他们相望呢?
👇下面的代码在图标样式中加了旋转参数,将台北的图标旋转180度,看下效果。

# -*- coding:UTF-8 -*-

# region 引入必要依赖
from GpsAndMap.MapModule import *

# endregion


地图 = 地图类().添加瓦片.高德地图().地图

图层 = 地图.添加图层('我有红心向太阳')

地图.添加标记(图层, 图标标记类(位置=常用坐标.厦门市, 图标='glyphicon-arrow-right'))
地图.添加标记(图层, 图标标记类(位置=常用坐标.台北市, 图标=图标样式类(名称='glyphicon-arrow-right', 角度_度=180)))

地图.保存html(目标路径='.').打开()

image.png
👆上图中,台北市的图标的箭头,指向了大陆,但是没有指向厦门方向。
👇下面的代码,我们在厦门和台北之间连一条线,做为参考线。

# -*- coding:UTF-8 -*-

# region 引入必要依赖
from GpsAndMap.MapModule import *

# endregion


地图 = 地图类().添加瓦片.高德地图().地图

图层 = 地图.添加图层('我有红心向太阳')

地图.添加标记(图层, 图标标记类(位置=常用坐标.厦门市, 图标='glyphicon-arrow-right'))
地图.添加标记(图层, 图标标记类(位置=常用坐标.台北市, 图标=图标样式类(名称='glyphicon-arrow-right', 角度_度=180)))

地图.添加标记(图层, 折线类(点序列=[常用坐标.厦门市, 常用坐标.台北市]))

地图.保存html(目标路径='.').打开()

image.png
👆上图中,我们看到厦门的图标指向台弯,台弯的图标指向大陆,但都没有指向彼此的方向。

角度的计算

我们又知道,图标的方向可以通过参数角度_度来进行控制,那么如何知道厦门在台北的哪个方位呢?反过来,如何知道厦门在台北的哪个方位呢?
GpsAndMap模块的 GpsModule 模块内的 GPS坐标类,为我们提供了计算两个GPS坐标点之间相对方位角的方法。
👇下面的代码中,我们基于厦门市的GPS坐标,计算了台北市的方位角,并打印之

# -*- coding:UTF-8 -*-

# region 引入必要依赖
from GpsAndMap.MapModule import *

# endregion

# 计算以厦门位置为原点,纬度正东为正,逆时针方向为正的坐标下,北台所在的方位角
print(常用坐标.厦门市.倾角(常用坐标.台北市).墨卡托倾角deg)

👆面的代码告诉我们,台北在厦门的东方偏北10.236476087381755度角的位置。
👇下面的代码,基于上述角度计算的方法,使厦门和台北进入相望状态。

# -*- coding:UTF-8 -*-

# region 引入必要依赖
from GpsAndMap.MapModule import *

# endregion

地图 = 地图类().添加瓦片.高德地图().地图

图层 = 地图.添加图层('我有红心向太阳')

地图.添加标记(图层, 图标标记类(位置=常用坐标.厦门市, 图标=图标样式类(名称='glyphicon-arrow-right', 角度_度=-常用坐标.厦门市.倾角(常用坐标.台北市).墨卡托倾角deg)))
地图.添加标记(图层, 图标标记类(位置=常用坐标.台北市, 图标=图标样式类(名称='glyphicon-arrow-right', 角度_度=-常用坐标.台北市.倾角(常用坐标.厦门市).墨卡托倾角deg)))

地图.添加标记(图层, 折线类(点序列=[常用坐标.厦门市, 常用坐标.台北市]))

地图.保存html(目标路径='.').打开()

image.png
👆上图中,我们看到厦门和台北的图标箭头彼此指向对方,相互守望。

红心向阳

有了以上关于图标角度的控制方案,时值国庆在即,我们将之前 GpsModule 模块中收集的常用地市的坐标标记在地图中,使用红心做为图标,控制红心的旋转角度,就可以轻松实现将所有的红心的方向都指向北京市的效果,红心向阳,百鸟朝凤。

# -*- coding:UTF-8 -*-

# region 引入必要依赖
from GpsAndMap.MapModule import *

# endregion

地图 = 地图类().添加瓦片.高德地图().地图

图层 = 地图.添加图层('我有红心向太阳')

北京坐标 = 常用坐标.北京市

地图.添加基地(图标标记类(位置=北京坐标, 图标=图标样式类(名称='glyphicon-star', 颜色=颜色名.红)))

图标层 = 地图.添加图层('万众归心', 默认显示=True)

for 城市, 坐标 in 常用坐标.常用坐标字典.items():
    if 坐标.有效 and 城市 != '北京市' and 城市[-1] in ['市', '州']:
        图标 = 图标标记类(位置=坐标, 图标=图标样式类(名称='glyphicon-heart-empty', 颜色=颜色名.浅红, 角度_度=-坐标.倾角(北京坐标).墨卡托倾角deg+90), 消息=城市)
        地图.添加标记(图标层, 标记点=图标)

地图.保存html(文档名='我有红心向太阳', 目标路径='.').打开()

以上代码生成的html文档见:红心向阳 百鸟朝凤, 提取码:nn5k




上图中,我们可以看到,每一个红心的心口,均朝向北京市方向。

小结

以上便是今天分享的 红心向阳,百鸟朝凤 效果了。


三块钱
7 声望0 粉丝