Plotly Mapbox 图层不显示图像

Question

我正在尝试使用 open-street-map 创建一个绘图散点地图框，以及当用户放大地图时我想将其叠加为图层的图像。

目前我的代码如下所示：

import pandas as pd
import plotly.express as px
import os

dir_path = os.path.dirname(os.path.realpath(__file__))

map_file = dir_path + "\\map.png"

df_event = pd.Dataframe()#dataframe containing long and lattitude coordinates

fig = px.scatter_mapbox(df_event, lat="Latitude", lon="Longitude", zoom=10)
fig.update_layout(mapbox_style="open-street-map",
                    mapbox_layers=[
                        {
                            "sourcetype": "image",
                            "source": "file://"+map_file,
                            "coordinates": [[10.0025794227684, 53.6280250042934] [10.0016447071323, 53.6280250042934] [10.0016447071323, 53.6281356890004] [10.0025794227684, 53.6281356890004]]
                        }
                    ])
fig.show()

该图在地图上很好地显示了所有观测结果。但尽管如此，我尝试叠加的 png 文件并未出现在地图上。

Answer 1

如果您想将本地图像添加到地图中，则需要使用 base64 对它们进行编码，我使用了来自plotly社区的示例answers，并根据参考文献调整了代码以适应您的问题。由于不清楚您要叠加哪种地图，因此我使用了此处本地保存的蒙特利尔交通拥堵地图来匹配参考。 我使用了图形对象并使用了地图框的免费 API 密钥。有关 Mapbox API 的更多信息，请参阅此处。 最底层是openstreetmap，第二层是拥堵信息图像。顶层是散点图。层的顺序由

below="traces"

参数控制。图层的显示范围是根据数据框的最大和最小经纬度手动调整的。这并不准确。如果您知道要叠加的地图的纬度和经度，请将其替换为它。

import plotly.graph_objects as go
import plotly.express as px

mapbox_access_token = open("mapbox_api_key.txt").read()
df = px.data.carshare()

# add map layer
map_filename = './data/montreal_road_map.png'
montreal_road_map = base64.b64encode(open(map_filename, 'rb').read())

fig = go.Figure()#go.Scattermapbox()

fig.add_trace(go.Scattermapbox(
    lat=df['centroid_lat'],
    lon=df['centroid_lon'],
    mode='markers',
    marker=go.scattermapbox.Marker(
        size=10,
        color=df['peak_hour'],
    ),
))

fig.update_layout(mapbox_style="open-street-map",
                  mapbox_accesstoken=mapbox_access_token,
                  mapbox_center=dict(lat=df.centroid_lat.mean(), lon=df.centroid_lon.mean()),
                  mapbox_zoom=10,
                  mapbox_layers=[{
                      "sourcetype": "image",
                      "opacity": 1.0,
                      "below": "traces", 
                      "source": 'data:image/png;base64,{}'.format(montreal_road_map.decode('utf-8')),
                      "coordinates": 
                      [[-73.73894559925054-0.03, 45.61087892678886+0.015],
                       [-73.5124596370787+0.075, 45.61087892678886+0.015],
                       [-73.5124596370787+0.075, 45.448903185047335-0.025],
                       [-73.73894559925054-0.03, 45.448903185047335-0.025],
                       ]
                        }])

fig.update_layout(height=600)

fig.show()