紅心向陽，百鳥朝鳳詳情 - python,folium,地圖開發,地圖定位三塊錢博客

字多不看版

本文主要介紹瞭如何使用Python的GpsAndMap模塊進行地圖標記的旋轉操作。首先，作者通過在廈門市和台北市位置添加箭頭圖標，展示了圖標的旋轉功能。然後，通過計算兩個GPS座標點之間的相對方位角，實現了讓廈門和台北的圖標箭頭彼此指向對方的效果。最後，作者利用這個技術，將中國各地市的座標標記在地圖上，使用紅心作為圖標，並控制紅心的旋轉角度，實現了將所有的紅心的方向都指向北京市的效果，形象地展現了“紅心向陽，百鳥朝鳳”的場景。

背景

最近在玩 folium 模塊，基於使用過程中的一些個人體驗，對 folium 進行了二次封裝，開源在 GpsAndMap.在使用的過程中，發現在地圖上打圖標是可以進行旋轉的。遇到就發現了一些有意思的玩法。

隔海的相望

下面的代碼在地圖廈門市和台北市位置添加了箭頭的圖標。

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

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

# endregion


地圖 = 地圖類().添加瓦片.高德地圖().地圖

圖層 = 地圖.添加圖層('我有紅心向太陽')

地圖.添加標記(圖層, 圖標標記類(位置=常用座標.廈門市, 圖標='glyphicon-arrow-right'))
地圖.添加標記(圖層, 圖標標記類(位置=常用座標.台北市, 圖標='glyphicon-arrow-right'))

地圖.保存html(目標路徑='.').打開()

👆上圖中，我們可以看到在廈門和台北的兩個圖標，其箭頭都是朝東的，如何讓他們相望呢？
👇下面的代碼在圖標樣式中加了旋轉參數，將台北的圖標旋轉180度，看下效果。

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

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

# endregion


地圖 = 地圖類().添加瓦片.高德地圖().地圖

圖層 = 地圖.添加圖層('我有紅心向太陽')

地圖.添加標記(圖層, 圖標標記類(位置=常用座標.廈門市, 圖標='glyphicon-arrow-right'))
地圖.添加標記(圖層, 圖標標記類(位置=常用座標.台北市, 圖標=圖標樣式類(名稱='glyphicon-arrow-right', 角度_度=180)))

地圖.保存html(目標路徑='.').打開()

👆上圖中，台北市的圖標的箭頭，指向了大陸，但是沒有指向廈門方向。
👇下面的代碼，我們在廈門和台北之間連一條線，做為參考線。

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

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

# endregion


地圖 = 地圖類().添加瓦片.高德地圖().地圖

圖層 = 地圖.添加圖層('我有紅心向太陽')

地圖.添加標記(圖層, 圖標標記類(位置=常用座標.廈門市, 圖標='glyphicon-arrow-right'))
地圖.添加標記(圖層, 圖標標記類(位置=常用座標.台北市, 圖標=圖標樣式類(名稱='glyphicon-arrow-right', 角度_度=180)))

地圖.添加標記(圖層, 折線類(點序列=[常用座標.廈門市, 常用座標.台北市]))

地圖.保存html(目標路徑='.').打開()

👆上圖中，我們看到廈門的圖標指向台彎，台彎的圖標指向大陸，但都沒有指向彼此的方向。

角度的計算

我們又知道，圖標的方向可以通過參數角度_度來進行控制，那麼如何知道廈門在台北的哪個方位呢？反過來，如何知道廈門在台北的哪個方位呢？
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(目標路徑='.').打開()

👆上圖中，我們看到廈門和台北的圖標箭頭彼此指向對方，相互守望。

紅心向陽

有了以上關於圖標角度的控制方案，時值國慶在即，我們將之前 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

上圖中，我們可以看到，每一個紅心的心口，均朝向北京市方向。