代码之家 › 专栏 › 技术社区 › Thomas

当试图在vega中渲染时,Geojson被扭曲了

vega geojson

0

Thomas · 技术社区 · 6 年前

我试图在vega中呈现geojson。我发现这个例子效果很好:

然而,当试图用我的geojson替换其中一个时,这些特性会完全失真。

{"$schema": "https://vega.github.io/schema/vega/v3.0.json",
  "width": 500,
  "height": 600,
  "autosize": "none",
  "signals": [
    {
      "name": "translate0",
      "update": "width / 2"
    },
    {
      "name": "translate1",
      "update": "height / 2"
    }
  ],
  "projections": [
    {
      "name": "projection",
      "type": "mercator",
      "scale": 1000,
      "rotate": [
        0,
        0,
        0
      ],
      "center": [
        17,
        -3
      ], 
      "translate": [
        {
          "signal": "translate0"
        },
        {
          "signal": "translate1"
        }
      ]

    }
  ],
  "data": [
    {
      "name": "drc",
      "url": "https://gist.githubusercontent.com/thomas-maschler/ef9891ef03ed4cf3fb23a4378dab485e/raw/47f3632d2135b9a783eeb76d0091762b70677c0d/drc.geojson",
      "format": {
        "type": "json",
        "property": "features"
      }
    }
  ],
  "marks": [
    {
      "type": "shape",
      "from": {
        "data": "drc"
      },
      "encode": {
        "update": {
          "strokeWidth": {
            "value": 0.5
          },
          "stroke": { 
            "value": "darkblue"
          },
          "fill": {
            "value": "lightblue"
          },
          "fillOpacity": {
            "value": 0.5
          }
        },
        "hover": {
          "fill": {
            "value": "#66C2A5"
          },
          "strokeWidth": {
            "value": 2
          },
          "stroke": {
            "value": "#FC8D62"
          }
        }
      },
      "transform": [
        {
          "type": "geoshape",
          "projection": "projection"
        }
      ]
    }
  ]
}

这是他们的样子 https://gist.github.com/thomas-maschler/ef9891ef03ed4cf3fb23a4378dab485e

谢谢,

托马斯

1 回复 | 直到 6 年前

1

0

Mattijn 6 年前

不知道发生了什么。看起来你的geojson已经损坏了,但并不像我最终在www.mapshaper.org中解析的那样。我将文件减少到35%,然后正常解析:

下面的Vega lite规范(如果需要,在编辑器中编译成Vega代码):

{
  "$schema": "https://vega.github.io/schema/vega-lite/v2.json",
  "width": 700,
  "height": 500,
  "config": {"view": {"stroke": "transparent"}},
  "layer": [
    {
      "data": {
        "url": "https://gist.githubusercontent.com/mattijn/2ce897c2020a6e5b7ae6baf03dffe179/raw/564b6d484657864dcb77d0bb18db00fc7dc7668d/drc.geojson",
        "format": {"type": "json", "property": "features"}
      },
      "mark": {"type": "geoshape", "stroke": "white", "strokeWidth": 1},
      "encoding": {"color": {"value": "#bcbcbc"}}
    }
  ]
}