Plotly Mapbox中如何将Mapbox矢量图层叠加至数据图层上方

问题背景 #

希望利用Plotly的Mapbox功能，在矢量图层栈中合理放置数据层。思路是通过Mapbox Studio创建两个地图样式：一个作为基础地图（数据层需置于其上方），另一个作为要叠加在数据层之上的其余图层。参考官方文档示例后编写了演示代码，但最后一条update_layout语句无法添加目标Mapbox图层，疑问是否无法为额外图层传入Mapbox样式规范。

初始代码：

import plotly.graph_objects as go
import pandas as pd

us_cities = pd.read_csv("https://raw.githubusercontent.com/plotly/datasets/master/us-cities-top-1k.csv")

fig = go.Figure(go.Scattermapbox(lat=us_cities["lat"], lon=us_cities["lon"]))
fig.update_layout(mapbox_style="mapbox://styles/diehl/cl9gh775w000014n2jwfncok7", mapbox_accesstoken=MAPBOX_ACCESS_TOKEN)
fig.update_layout(mapbox_center_lat=38, mapbox_center_lon=-97, mapbox_zoom=3.25)
fig.update_layout(margin={"r":0,"t":0,"l":0,"b":0})

fig.update_layout(
    mapbox_layers=[
    {
        "sourcetype": "vector",
        "source": ["mapbox://styles/diehl/cl9gha8ta000914qm137qf52q"]
    }
])

fig.show()

更新后的进展与新问题 #

替换最后一条fig.update_layout语句后，有内容渲染，但本该显示新墨西哥州边界的矢量图层却呈现为额外圆点（推测因当前图表为散点图导致）。同时Chrome开发者控制台提示：几何图形超出允许范围，请减小矢量瓦片缓冲区大小

更新后的代码：

fig.update_layout(
  mapbox_layers=[
  {
      "sourcetype": "vector",
      "source": ['https://api.mapbox.com/v4/diehl.3rvgqhks/{z}/{x}/{y}.mvt'],
      "sourcelayer": "new_mexico_bnd"
  }  ])

解决建议 #

• 初始代码问题：mapbox_layers无法直接使用Mapbox样式URL（mapbox://styles/...）作为矢量数据源，该格式仅适用于底图的mapbox_style参数。矢量图层需指向具体的矢量瓦片集（如mapbox://tilesets/...格式）或直接的MVT瓦片URL。
• 圆点渲染问题：Plotly默认会将未指定类型的矢量图层按点处理，而你的边界数据是线/面类型，需在mapbox_layers配置中添加"type": "line"（或"type": "fill"），明确图层类型匹配数据格式。
• 缓冲区错误提示：这是矢量瓦片本身的问题，需在Mapbox Studio编辑瓦片集时，减小矢量瓦片的缓冲区大小，避免几何图形超出瓦片允许范围。
• 图层栈顺序控制：若要实现「基础地图 → 边界图层 → 散点数据层」的栈顺序，可在边界图层配置中添加"below": "traces"，让矢量图层置于散点图层下方；若需叠加图层在数据层之上，可调整层级或省略该参数。

修正后的示例代码：

import plotly.graph_objects as go
import pandas as pd

us_cities = pd.read_csv("https://raw.githubusercontent.com/plotly/datasets/master/us-cities-top-1k.csv")

fig = go.Figure(go.Scattermapbox(lat=us_cities["lat"], lon=us_cities["lon"]))
fig.update_layout(
    mapbox_style="mapbox://styles/diehl/cl9gh775w000014n2jwfncok7",
    mapbox_accesstoken=MAPBOX_ACCESS_TOKEN,
    mapbox_center_lat=38,
    mapbox_center_lon=-97,
    mapbox_zoom=3.25,
    margin={"r":0,"t":0,"l":0,"b":0}
)

fig.update_layout(
    mapbox_layers=[
    {
        "sourcetype": "vector",
        "source": ['https://api.mapbox.com/v4/diehl.3rvgqhks/{z}/{x}/{y}.mvt'],
        "sourcelayer": "new_mexico_bnd",
        "type": "line",
        "color": "#ff0000",
        "line_width": 2,
        "below": "traces"
    }
    ]
)

fig.show()

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