Plotly Mapbox 图层未显示图像

Question

我正在尝试使用开放街图（open-street-map）创建一个plotly散点地图，并且我想在用户放大地图时叠加一张图片作为图层。

目前我的代码大致是这样的：

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社区的一个例子，并把代码调整了一下，以便更好地回答你的问题。因为不太清楚你想叠加什么样的地图，我用了一个本地保存的蒙特利尔交通拥堵地图，来配合参考资料。 我使用了一个图形对象，并用免费的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()