如何用Folium在GPS坐标点按heading_direction航向角绘制指向目标物的箭头

实现思路及代码修改方案 #

1. 核心逻辑拆解

要实现需求只要完成三个核心步骤即可：

• 坐标换算：根据GPS原点经纬度、航向角、目标距离，计算出目标点的精确经纬度
• 元素绘制：分别绘制原点定位标记、航向箭头、目标星标、距离文本
• 逻辑整合：将上述逻辑和你现有热力图、聚合逻辑合并

2. 依赖安装

首先安装坐标换算需要的依赖：
pip install geopy

3. 完整修改后代码

import folium
from folium.plugins import HeatMap
from folium.plugins import FastMarkerCluster
from folium import Icon, DivIcon
from geopy.distance import geodesic
import pandas as pd

# 坐标换算函数：输入原点经纬度、航向角（正北为0顺时针旋转）、距离（米），返回目标点经纬度
def get_target_point(origin_lat, origin_lon, heading, distance_m):
    target = geodesic(meters=distance_m).destination((origin_lat, origin_lon), heading=heading)
    return target.latitude, target.longitude

default_location=[11.1657, 45.4515]
m = folium.Map(location=default_location, zoom_start=13)

# 假设你的test数据集包含lat, lon, heading_direction, distance_of_item四个字段
heat_data = [[row['lat'],row['lon']] for index, row in test.iterrows()]
# 原有热力图逻辑保留
HeatMap(heat_data).add_to(m)

# 数据量不大的情况下直接遍历添加自定义元素，性能要求高可以把逻辑写到callback里
for idx, row in test.iterrows():
    lat, lon = row['lat'], row['lon']
    heading = row['heading_direction']
    dist = row['distance_of_item']
    # 计算目标点坐标
    target_lat, target_lon = get_target_point(lat, lon, heading, dist)
    
    # 1. 绘制航向箭头：直接用箭头图标，旋转角度对应航向角
    folium.Marker(
        location=[lat, lon],
        icon=Icon(
            icon='arrow-up',
            prefix='fa',
            color='red',
            rotation=heading # 直接旋转对应航向角
        )
    ).add_to(m)
    
    # 2. 绘制目标星标
    folium.Marker(
        location=[target_lat, target_lon],
        icon=Icon(
            icon='star',
            prefix='fa',
            color='yellow'
        )
    ).add_to(m)
    
    # 3. 标注距离数值
    folium.Marker(
        location=[target_lat, target_lon],
        icon=DivIcon(
            icon_size=(100,20),
            icon_anchor=(0, -10),
            html=f'<div style="font-size: 12px; color: black; font-weight: bold;">{dist}m</div>'
        )
    ).add_to(m)

# 原有聚合逻辑保留
callback = ('function (row) {' 
                'var marker = L.marker(new L.LatLng(row[0], row[1]), {color: "red"});'
                'var icon = L.AwesomeMarkers.icon({'
                "icon: 'info-sign',"
                "iconColor: 'white',"
                "markerColor: 'green',"
                "prefix: 'glyphicon',"
                "extraClasses: 'fa-rotate-0'"
                    '});'
                'marker.setIcon(icon);'
                "var popup = L.popup({maxWidth: '300'});"
                "const display_text = {text1: row[0], text2: row[1]};"
                "var mytext = $(`<div id='mytext' class='display_text' style='width: 100.0%; height: 100.0%;'>"
                "<a href=https://www.google.com/maps?ll=${display_text.text1},${display_text.text2} target='_blank'>Open Google Maps</a></div>`)[0];"
                "popup.setContent(mytext);"
                "marker.bindPopup(popup);"
                'return marker};')
            
m.add_child(FastMarkerCluster(heat_data, callback=callback))

m

4. 补充说明

• 如果一个GPS点对应多个目标，遍历每个目标的航向角和距离重复调用坐标换算函数添加元素即可
• 箭头、星标的样式、颜色、大小可以根据需要调整Icon的参数
• 如果数据量超过1万条，建议把自定义元素的生成逻辑写到JavaScript的callback里，避免Python端渲染卡顿

内容的提问来源于stack exchange，提问作者Deb