Vega Zoomable 美国地图

Question

我想使用这张地图 https://vega.github.io/vega/examples/zoomable-world-map/ 但仅限于美国。

我用过这个规格。

  private specVega = {
    "$schema": "https://vega.github.io/schema/vega/v5.json",
    "description": "An interactive world map supporting pan and zoom.",
    "width": 900,
    "height": 500,
    "autosize": "none",

    "signals": [
      { "name": "tx", "update": "width / 2" },
      { "name": "ty", "update": "height / 2" },
      {
        "name": "scale",
        "value": 150,
        "on": [{
          "events": {"type": "wheel", "consume": true},
          "update": "clamp(scale * pow(1.0005, -event.deltaY * pow(16, event.deltaMode)), 150, 3000)"
        }]
      },
      {
        "name": "angles",
        "value": [0, 0],
        "on": [{
          "events": "mousedown",
          "update": "[rotateX, centerY]"
        }]
      },
      {
        "name": "cloned",
        "value": null,
        "on": [{
          "events": "mousedown",
          "update": "copy('projection')"
        }]
      },
      {
        "name": "start",
        "value": null,
        "on": [{
          "events": "mousedown",
          "update": "invert(cloned, xy())"
        }]
      },
      {
        "name": "drag", "value": null,
        "on": [{
          "events": "[mousedown, window:mouseup] > window:mousemove",
          "update": "invert(cloned, xy())"
        }]
      },
      {
        "name": "delta", "value": null,
        "on": [{
          "events": {"signal": "drag"},
          "update": "[drag[0] - start[0], start[1] - drag[1]]"
        }]
      },
      {
        "name": "rotateX", "value": 0,
        "on": [{
          "events": {"signal": "delta"},
          "update": "angles[0] + delta[0]"
        }]
      },
      {
        "name": "centerY", "value": 0,
        "on": [{
          "events": {"signal": "delta"},
          "update": "clamp(angles[1] + delta[1], -60, 60)"
        }]
      }
    ],

    "projections": [
      {
        "name": "projection",
        "type": "mercator",
        "scale": {"signal": "scale"},
        "rotate": [{"signal": "rotateX"}, 0, 0],
        "center": [0, {"signal": "centerY"}],
        "translate": [{"signal": "tx"}, {"signal": "ty"}]
      }
    ],

    "data": [
      {
        "name": "counties",
        values: null,
        "format": {"type": "topojson", "feature": "states"},
      },
      {
        "name": "graticule",
        "transform": [
          { "type": "graticule", "step": [15, 15] }
        ]
      }
    ],

    "marks": [
      {
        "type": "shape",
        "from": {"data": "graticule"},
        "encode": {
          "enter": {
            "strokeWidth": {"value": 1},
            "stroke": {"value": "#ddd"},
            "fill": {"value": null}
          }
        },
        "transform": [
          { "type": "geoshape", "projection": "projection" }
        ]
      },
      {
        "type": "shape",
        "from": {"data": "states"},
        "encode": {
          "enter": {
            "strokeWidth": {"value": 0.5},
            "stroke": {"value": "#bbb"},
            "fill": {"value": "#e5e8d3"}
          }
        },
        "transform": [
          { "type": "geoshape", "projection": "projection" }
        ]
      }
    ]
  }

this.specVega["data"][0]["values"] = "data/us-10m.json" （这只是为了了解我使用了哪些数据）

所以我在这里只放了美国的数据，但它没有用。在控制台中出现错误：

Undefined data set name: "states"

一般来说，我只需要一张仅限美国的可缩放地图，我将把它用作气泡图。 如果这张地图有缩放我肯定会用它https://vega.github.io/vega-lite/examples/geo_layer.html

Answer 1

将“数据”更改为：

"data": [
  {
    "name": "states",
    "url": "data/us-10m.json",
    "format": {"type": "topojson", "feature": "states"}
  },

View in Vega online editor

Answer 2

抱歉，我不是地图专家。我有以下缩放工作正常但拖动有点笨拙但绝对可用的地方。我可能需要很长时间才能使它变得更好。

罗伊的回答是您的另一种选择。

{
  "$schema": "https://vega.github.io/schema/vega/v5.json",
  "autosize": "none",
  "background": "white",
  "padding": 5,
  "width": 500,
  "height": 300,
  "signals": [
    {"name": "tx", "update": "width / 2"},
    {"name": "ty", "update": "height / 2"},
    {
      "name": "scale",
      "value": 150,
      "on": [
        {
          "events": {"type": "wheel", "consume": true},
          "update": "clamp(scale * pow(1.0005, -event.deltaY * pow(16, event.deltaMode)), 150, 3000)"
        }
      ]
    },
    {
      "name": "angles",
      "value": [0, 0],
      "on": [{"events": "mousedown", "update": "[rotateX, centerY]"}]
    },
    {
      "name": "cloned",
      "value": null,
      "on": [{"events": "mousedown", "update": "copy('projection')"}]
    },
    {
      "name": "start",
      "value": null,
      "on": [{"events": "mousedown", "update": "invert(cloned, xy())"}]
    },
    {
      "name": "drag",
      "value": null,
      "on": [
        {
          "events": "[mousedown, window:mouseup] > window:mousemove",
          "update": "invert(cloned, xy())"
        }
      ]
    },
    {
      "name": "delta",
      "value": null,
      "on": [
        {
          "events": {"signal": "drag"},
          "update": "[(drag[0] - start[0])*2, (start[1] - drag[1])*2]"
        }
      ]
    },
    {
      "name": "rotateX",
      "value": 0,
      "on": [{"events": {"signal": "delta"}, "update": "angles[0] + delta[0]"}]
    },
    {
      "name": "centerY",
      "value": 0,
      "on": [{"events": {"signal": "delta"}, "update": "angles[1] + delta[1]"}]
    }
  ],
  "data": [
    {
      "name": "source_0",
      "url": "data/us-10m.json",
      "format": {"type": "topojson", "feature": "states"}
    }
  ],
  "projections": [
    {
      "name": "projection",
      "scale": {"signal": "scale"},
      "translate": [{"signal": "rotateX"}, {"signal": "centerY"}],
      "type": "albersUsa"
    }
  ],
  "marks": [
    {
      "name": "marks",
      "type": "shape",
      "style": ["geoshape"],
      "from": {"data": "source_0"},
      "encode": {
        "update": {"fill": {"value": "lightgray"}, "stroke": {"value": "white"}}
      },
      "transform": [{"type": "geoshape", "projection": "projection"}]
    }
  ]
}