Altair/Vega 地图未显示。 Chrome 无法加载 SourceMap

Posted 2023-03-29

【中文标题】Altair/Vega 地图未显示。 Chrome 无法加载 SourceMap

【英文标题】：Altair/Vega map not showing. Chrome fails to load SourceMap

【发布时间】：2021-06-04 21:17:03

【问题描述】：

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

  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，更新我的库。

【参考方案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，不是指地理地图。