Plotly中如何在choropleth_mapbox上方显示固定文本标签？

问题描述 #

尝试在choropleth_mapbox图层上方添加固定文本标签，使用add_scattermapbox方法后，仅标记点可见，文本仅在悬停时显示。

问题代码 #

fig = px.choropleth_mapbox(
        data,
        geojson=geojson,
        color="typ",
        locations="par_id",
        # TODO u novejsi verze uz neni featureidkey
        featureidkey="properties.par_id",
        center=center,
        zoom=zoom,
        opacity=0.1,
        color_discrete_map={
            "poptávaná": "#CB4B41",
            "nepoptávaná": "#E4E4A1",
            "v kú": "#E4E4A1"
        })

fig.update_layout(
    margin={"r": 0, "t": 0, "l": 0, "b": 0},
    height=800,
    showlegend=False,
    mapbox_style="white-bg",
    mapbox_layers=[
        {
            "below": 'traces',
            "sourcetype": "raster",
            "sourceattribution": "CUZK",
            "source": [
                url_ags_orto
            ],
            "visible": layer_visibility['orto']
        },
        {
            "below": 'traces',
            "sourcetype": "raster",
            "sourceattribution": "CUZK",
            "source": [
                url_ags_zm
            ],
            "visible": layer_visibility['zm']
        },
        {
            "below": 'traces',
            "sourcetype": "raster",
            "sourceattribution": "CUZK",
            "source": [
                kn_wms_url
            ],
            "visible": layer_visibility['kn']
        },
        {
            "below": 'traces',
            "color": "#aaff77",
            "fill": {
              "outlinecolor": "#66ff33"
            },
            "sourcetype": "vector",
            "sourceattribution": "LPIS",
            "source": [
                url_vt_lpis
            ],
            "sourcelayer": "lpis_pudni_bloky_vt-c3c011",
            "type": "fill",
            "visible": layer_visibility['lpis'],
            "opacity": 0.25
        },
        #tady vykreslovat border pod jednou vrstvou
        {
            "color": "#ff5233",
            "type": "fill",
            "fill": {
              "outlinecolor": "#ff5233"
            },
            "sourcetype": "geojson",
            "source": par_selection_geojson,
            "opacity": 0.3
        },
        {
            "color": "#ff5233",
            "type": "line",
            "sourcetype": "geojson",
            "source": par_selection_geojson
        }
    ])

gdf_labels = (
    gpd
        .GeoDataFrame(
            data,
            geometry=gpd.GeoSeries.from_wkt(data['geom_4326'])
            )   
        .assign(
            lat=lambda df: df.geometry.centroid.y,
            lon=lambda df: df.geometry.centroid.x
        )        
    )

fig.add_scattermapbox(
        lat=gdf_labels.lat,
        lon=gdf_labels.lon,
        text=gdf_labels.par_cislo,
        textfont={"color":"white","size":20, "family":"Courier New"},
        mode="text",
        texttemplate='%{gdf_labels.par_cislo}'
    )

用户疑问：怀疑标签被fig.update_layout中的某个mapbox_layers遮挡，但不知道如何解决；另外了解到可能涉及glyph样式，但不清楚在Python中该如何设置。

解决方案 #

1. 修正texttemplate语法错误 #

texttemplate的写法不符合Plotly模板语法，不能直接引用DataFrame列对象，应使用%{text}调用已传入的text字段值：

fig.add_scattermapbox(
        lat=gdf_labels.lat,
        lon=gdf_labels.lon,
        text=gdf_labels.par_cislo,
        textfont={"color":"white","size":20, "family":"Courier New"},
        mode="text",
        texttemplate='%{text}'  # 修正此处
    )

2. 调整图层层级，解决遮挡问题 #

• 给文本图层指定层级：在add_scattermapbox中添加layer='above'参数，确保文本显示在所有mapbox_layers上方：

  fig.add_scattermapbox(
          # 其他参数不变
          layer='above'
      )
  

• 调整GeoJSON图层层级：最后两个GeoJSON图层未设置"below": 'traces'，默认会显示在traces（散点/文本图层）上方，需添加该参数让它们位于基础轨迹图层下方：

  # 填充图层
  {
      "below": 'traces',  # 添加此行
      "color": "#ff5233",
      "type": "fill",
      "fill": {
        "outlinecolor": "#ff5233"
      },
      "sourcetype": "geojson",
      "source": par_selection_geojson,
      "opacity": 0.3
  },
  # 线图层
  {
      "below": 'traces',  # 添加此行
      "color": "#ff5233",
      "type": "line",
      "sourcetype": "geojson",
      "source": par_selection_geojson
  }
  

3. 增强文本可读性（可选） #

如果文本和背景颜色对比度不足，可给文本添加描边：

textfont={"color":"white","size":20, "family":"Courier New", "stroke":"black", "strokewidth":1}

内容的提问来源于stack exchange，提问作者Tomáš Seidler