Vega lite 地理图表：是否存在鼠标滚动缩放功能？

Question

我正在使用这张地图https://vega.github.io/vega-lite/examples/geo_layer.html我想知道这里原则上是否有缩放功能？在文档中找不到任何内容。

Answer 1

您可以通过更改投影比例因子来手动缩放地图，如下所示。据我所知，目前不支持将其实际绑定到鼠标滚动。这里有一个未解决的问题，您可以讨论：https://github.com/vega/vega-lite/issues/3306

如果我是你，我只会使用 Vega，这里已经有一个示例：https://vega.github.io/vega/examples/zoomable-world-map/

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "width": 500,
  "height": 300,

  "layer": [
    {
      "data": {
        "url": "data/us-10m.json",
        "format": {
          "type": "topojson",
          "feature": "states"
        }
      },
      "projection": {
        "type": "albersUsa", "scale":300
      },
      "mark": {
        "type": "geoshape",
        "fill": "lightgray",
        "stroke": "white"
      }
    },
    {
      "data": {
        "url": "data/airports.csv"
      },
      "projection": {
        "type": "albersUsa", "scale":300
      },
      "mark": "circle",
      "encoding": {
        "longitude": {
          "field": "longitude",
          "type": "quantitative"
        },
        "latitude": {
          "field": "latitude",
          "type": "quantitative"
        },
        "size": {"value": 10},
        "color": {"value": "steelblue"}
      }
    }
  ]
}

Answer 2

您可以尝试以下 vega-lite 规范。在这里，我应用参数/信号来控制缩放和平移。使用鼠标滚轮滚动进/出。单击并按住可平移。当我们放大和缩小时，每个州的动态颜色和机场的动态大小。我们必须使用墨卡托投影类型进行平移。如果您只想要特定的国家/地区，那么我们可以轻松添加过滤器以根据长/纬度等进行限制

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "width": 800,
  "height": 600,
  "padding": 15,
  "autosize": "fit",
  "params": [
    {"name": "tx", "update": "width / 2"},
    {"name": "ty", "update": "height / 2"},
    {
      "name": "scale",
      "value": 300,
      "on": [
        {
          "events": {"type": "wheel", "consume": true},
          "update": "clamp(scale * pow(1.003, -event.deltaY * pow(16, event.deltaMode)), 150, 50000)"
        }
      ]
    },
    {
      "name": "angles",
      "value": [0, 0],
      "on": [{"events": "pointerdown", "update": "[rotateX, centerY]"}]
    },
    {
      "name": "cloned",
      "value": null,
      "on": [{"events": "pointerdown", "update": "copy('projection')"}]
    },
    {
      "name": "start",
      "value": null,
      "on": [{"events": "pointerdown", "update": "invert(cloned, xy())"}]
    },
    {
      "name": "drag",
      "value": null,
      "on": [
        {
          "events": "[pointerdown, window:pointerup] > window:pointermove",
          "update": "invert(cloned, xy())"
        }
      ]
    },
    {
      "name": "delta",
      "value": null,
      "on": [
        {
          "events": {"signal": "drag"},
          "update": "[drag[0] - start[0], start[1] - drag[1]]"
        }
      ]
    },
    {
      "name": "rotateX",
      "value": -240,
      "on": [{"events": {"signal": "delta"}, "update": "angles[0] + delta[0]"}]
    },
    {
      "name": "centerY",
      "value": 40,
      "on": [
        {
          "events": {"signal": "delta"},
          "update": "clamp(angles[1] + delta[1], -60, 60)"
        }
      ]
    }
  ],
  "layer": [
    {
      "data": {
        "url": "data/us-10m.json",
        "format": {"type": "topojson", "feature": "states"}
      },
      "projection": {
        "type": "mercator",
        "scale": {"signal": "scale"},
        "rotate": [{"signal": "rotateX"}, 0, 0],
        "center": [0, {"signal": "centerY"}],
        "translate": [{"signal": "tx"}, {"signal": "ty"}]
      },
      "mark": {"type": "geoshape", "fill": "lightgray", "stroke": "white"}
    },
    {
      "transform": [
        {"calculate": "scale", "as": "scale"},
        {"calculate": "round(scale/25)", "as": "size"}
      ],
      "data": {"url": "data/airports.csv"},
      "projection": {
        "type": "mercator",
        "scale": {"signal": "scale"},
        "rotate": [{"signal": "rotateX"}, 0, 0],
        "center": [0, {"signal": "centerY"}],
        "translate": [{"signal": "tx"}, {"signal": "ty"}]
      },
      "mark": {"type": "circle", "size": {"expr": "datum.size"}},
      "encoding": {
        "longitude": {"field": "longitude", "type": "quantitative"},
        "latitude": {"field": "latitude", "type": "quantitative"},
        "color": {"field": "state", "legend": false},
        "tooltip": [
          {"field": "name", "type": "nominal"},
          {"field": "city", "type": "nominal"},
          {"field": "state", "type": "nominal"}
        ]
      }
    }
  ],
  "config": {}
}

图表快乐！

亚当（建业报告）