基于Plotly在地图上绘制指定质心与半径的圆形并添加半径指示箭头的技术求助

我明白你现在的需求啦——要在Mapbox地图上绘制以纬度22、经度114为中心的圆形受影响区域，还要加上箭头标注半径长度。之前你尝试修改Plotly代码但卡在了Mapbox图层的逻辑上，我来一步步帮你搞定！

Mapbox图层依赖GeoJSON格式的地理数据，而且经纬度坐标系（EPSG:4326）不能直接用米作为半径单位，必须先转换为以米为单位的UTM平面投影，生成圆形后再转回经纬度，最后才能添加到地图上。箭头标注则可以通过Mapbox的线图层配合箭头属性实现。

import plotly.express as px
import geopandas as gpd
from shapely.geometry import Point

# ---------------------- 自定义参数 ----------------------
center_lat = 22       # 你的质心纬度
center_lon = 114      # 你的质心经度
radius_m = 10000      # 半径（单位：米，可按需修改）
# -------------------------------------------------------

# 1. 创建质心点的GeoDataFrame（初始用经纬度坐标系EPSG:4326）
center_point = Point(center_lon, center_lat)
gdf_center = gpd.GeoDataFrame({'geometry': [center_point]}, crs="epsg:4326")

# 2. 转换到UTM投影（自动匹配当前区域的UTM分区，单位为米）
utm_crs = gdf_center.estimate_utm_crs()
gdf_utm = gdf_center.to_crs(utm_crs)

# 3. 生成圆形缓冲区，再转回经纬度坐标系
circle_geo = gdf_utm.geometry.buffer(radius_m).to_crs("epsg:4326").__geo_interface__

# 4. 创建基础地图（显示质心点，调整缩放级别适配半径）
fig = px.scatter_mapbox(
    lat=[center_lat], lon=[center_lon],
    zoom=12,  # 可根据半径大小调整，半径越大zoom越小
    mapbox_style="carto-positron"
)

# 5. 添加圆形填充图层到Mapbox
fig.update_layout(
    mapbox={
        "layers": [
            {
                "source": circle_geo,
                "color": "PaleTurquoise",
                "type": "fill",
                "opacity": 0.5
            }
        ]
    }
)

# 6. 添加半径箭头标注（以正东方向为例）
# 计算UTM坐标系下的正东圆上点
utm_center = gdf_utm.geometry.iloc[0]
east_point_utm = Point(utm_center.x + radius_m, utm_center.y)
# 转回经纬度坐标系
east_point = gpd.GeoSeries([east_point_utm], crs=utm_crs).to_crs("epsg:4326").iloc[0]

# 把箭头线图层添加到地图（保留之前的圆形图层）
fig.update_layout(
    mapbox={
        "layers": [
            *fig.layout.mapbox.layers,
            {
                "type": "line",
                "source": {
                    "type": "FeatureCollection",
                    "features": [
                        {
                            "type": "Feature",
                            "geometry": {
                                "type": "LineString",
                                "coordinates": [[center_lon, center_lat], [east_point.x, east_point.y]]
                            }
                        }
                    ]
                },
                "color": "red",
                "line": {
                    "width": 2,
                    "arrow-head": {
                        "size": 10,
                        "type": "classic"  # 可选"stealth"样式
                    }
                }
            }
        ]
    }
)

fig.show()

• 投影转换的必要性：EPSG:4326是球面坐标系，单位是“度”，无法直接用米计算半径；UTM是平面坐标系，单位为米，能保证圆形的准确性。
• 箭头自定义：你可以修改箭头的颜色、宽度、大小和样式，也可以把箭头指向其他方向（比如正北，只需要修改UTM下的点坐标即可）。
• 参数调整：根据实际半径大小调整zoom值，半径越大，zoom应该设置得越小，确保圆形完整显示在视图中。

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