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

Question

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

{
 "$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",
 "width": 700,
 "height": 500,
 "config": {"view": {"stroke": "transparent"}},
 "data": {
   "url": "https://raw.githubusercontent.com/funkeinteraktiv/Berlin-Geodaten/master/berlin_bezirke.topojson",
   "format": {"type": "topojson", "feature": "states"}
 },
 "mark": {"type": "geoshape", "stroke": "white", "strokeWidth": 2},
 "encoding": {"color": {"value": "#eee"}}
}

这里是 online Vega-Lite Editor

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

Answer 1

您的 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 查看器也显示它包含覆盖整个地图的几何体。

Answer 2

您的数据以笛卡尔投影（米）而非地理投影（度）注册。

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

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

Open the Chart in the Vega Editor

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

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

Vega-Lite: Map from Amsterdam not show

vega-lite

vega