Altair/Vega 地图未显示。 Chrome 加载 SourceMap 失败

Question

我正在尝试在欧洲地图上放置一些点。

  import altair as alt
  import pandas as pd

  mydf = pd.DataFrame({
    'name': ['Constanta', 'Turin', 'Madrid', 'Copenhagen', 'Berlin'],
    'lat': [45.1598, 45.0703, 40.4168, 55.6761, 52.5200],
    'long': [28.6348, 7.6869, -3.7038, 12.5683, 13.40]
    })

    alt.Chart(mydf).mark_circle().encode(
        longitude='long',
        latitude='lat',
        size=alt.value(50),
        tooltip='name'
    ).project(
        type= 'mercator',
        scale= 350,                          
        center= [20,50],                     
        clipExtent= [[0, 0], [400, 300]],    
    ).properties(
        width=500,
        height=400
    )

点出现在正确的地方，但地图没有显示，它只是一个空白图。在 Chrome (Jupyter Notebook) 中，我收到以下错误：

DevTools failed to load SourceMap: Could not load content for https://cdn.jsdelivr.net/npm/vega.min.js.map: HTTP error: status code 404, net::ERR_HTTP_RESPONSE_CODE_FAILURE

我尝试切换浏览器、嵌入 Streamlit、更新我的库。

Answer 1

Altair 不会自动显示地图背景；你必须在一个图层中手动执行此操作，如下所示：

import altair as alt
from vega_datasets import data
import pandas as pd

countries = alt.topo_feature(data.world_110m.url, 'countries')

mydf = pd.DataFrame({
    'name': ['Constanta', 'Turin', 'Madrid', 'Copenhagen', 'Berlin'],
    'lat': [45.1598, 45.0703, 40.4168, 55.6761, 52.5200],
    'long': [28.6348, 7.6869, -3.7038, 12.5683, 13.40]
})

points = alt.Chart(mydf).mark_circle().encode(
    longitude='long',
    latitude='lat',
    size=alt.value(50),
    tooltip='name'
).project(
    type= 'mercator',
    scale= 350,                          
    center= [20,50],                     
    clipExtent= [[0, 0], [400, 300]],    
).properties(
    width=500,
    height=400
)

background = alt.Chart(countries).mark_geoshape(
    fill='#CCCCCC',
    stroke='white'
).project(
    type= 'mercator',
    scale= 350,                          # Magnify
    center= [20,50],                     # [lon, lat]
    clipExtent= [[0, 0], [400, 300]],    # [[left, top], [right, bottom]]
).properties(
    width=400, height=300
)

background + points

旁注：“sourceMap”是一个转移注意力的东西：那是 javascript concept，不是指地理地图。

Altair/Vega 地图未显示。 Chrome 加载 SourceMap 失败

Altair/Vega map not showing. Chrome fails to load SourceMap

python

altair

vega

streamlit