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

您的数据注册在笛卡尔投影(米)中，而不是地理投影(度)中。

下面的Vega-lite规范提供了可视化这类数据的正确方法。请注意identity projection和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

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

Answer 2

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