如何使用 vega-lite 放大地图？

Question

我正在使用 vega-lite 将一些数据渲染到地图上。目前，我有这个架构，它呈现所附图像：

{
  "title": "What's the nearest city to you?",
  "data": {
    "values": "...",
    "format": {
      "type": "csv"
    }
  },
  "encoding": {},
  "projection": {
    "type": "mercator"
  },
  "layer": [
    {
      "data": {
        "values": "...",
        "format": {
          "type": "topojson",
          "feature": "world-borders"
        }
      },
      "mark": {
        "type": "geoshape",
        "fill": "lightgrey",
        "stroke": "darkgrey"
      },
      "width": 800,
      "height": 600
    },
    {
      "mark": {
        "type": "circle",
        "size": 50
      },
      "encoding": {
        "latitude": {
          "field": "latitude",
          "type": "quantitative"
        },
        "longitude": {
          "field": "longitude",
          "type": "quantitative"
        },
        "color": {
          "field": "count",
          "type": "quantitative",
          "scale": {
            "range": [ "#f0f921", "#fcce25", "#fca636", "#f2844b", "#e16462", "#cc4778", "#b12a90", "#8f0da4", "#6a00a8", "#41049d", "#0d0887" ]
          }
        },
        "size": {
          "field": "count",
          "type": "quantitative"
        }
      }
    }
  ]
}

现在整体看起来相当不错！我很高兴！但我真的希望能够提供放大到数据最密集区域的渲染图像，特别是欧洲和美国大陆。我已经尝试了 vega 和 vega-lite 文档中指定的所有我能想到的方法，但都无济于事（我尝试的所有属性都很奇怪，比如在单个像素处渲染所有圆圈或只是剪切地图。）

我真正想要的只是一种方式来表达“向我展示 lat°long° 和 lat°long° 之间的数据+地图视图”，但我并没有意识到这是为此目的而设计的。我该怎么做？

Answer 1

在当前的 Vega-Lite 版本中，平移和缩放不适用于地理投影。请参阅 https://github.com/vega/vega-lite/issues/3306 了解更多详细信息。

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": {}
}

图表快乐！

亚当（建业报告）