Vega-Lite：阿姆斯特丹的地图未显示

问题描述

大家好，我正在尝试使用非常基本的代码从阿姆斯特丹创建地图，但地图没有显示：

{
 "$schema": "https://vega.github.io/schema/vega-lite/v4.json","width": 700,"height": 500,"config": {"view": {"stroke": "transparent"}},"data": {
   "url": "https://raw.githubusercontent.com/minhquan9408/gdv_1/main/data/map.topojson","format": {"type": "topojson","feature": "states"}
 },"mark": {"type": "geoshape","stroke": "white","strokeWidth": 2},"encoding": {"color": {"value": "#eee"}}
}

但是当我使用柏林的数据时，它按预期工作

{
 "$schema": "https://vega.github.io/schema/vega-lite/v4.json","data": {
   "url": "https://raw.githubusercontent.com/funkeinteraktiv/Berlin-Geodaten/master/berlin_bezirke.topojson","encoding": {"color": {"value": "#eee"}}
}

这里是online Vega-Lite Editor

有人知道这个问题的答案吗？我想这可能是因为数据。非常感谢您的帮助。

解决方法

您的 topojson 文件没有名为 "states" 的几何集合，但它有一个名为 "collection" 的几何集合。更改此设置可以正确加载和显示文件：

{
 "width": 700,"height": 500,"config": {"view": {"stroke": "transparent"}},"data": {
   "url": "https://raw.githubusercontent.com/minhquan9408/gdv_1/main/data/map.topojson","format": {"type": "topojson","feature": "collection"}
 },"mark": {"type": "geoshape","stroke": "white","strokeWidth": 2}
}

结果显然不是预期的，但这似乎是数据质量问题而不是 Vega-Lite 问题：其他 topojson 查看器也显示它包含覆盖整个地图的几何体。

您的数据是以笛卡尔投影（米）而不是地理投影（度）记录的。

以下 Vega-lite 规范提供了可视化此类数据的正确方法。请注意 identity 投影和 reflectY 参数设置。

{
  "data": {
    "url": "https://raw.githubusercontent.com/minhquan9408/gdv_1/quan-new/data/map.topojson","feature": "collection"}
  },"mark": {"type": "geoshape"},"projection": {"type": "identity","reflectY": true}
}

Open the Chart in the Vega Editor

我不得不承认，你可能永远猜不到这个..

vega vega-lite