根据 lat/long 或 geojson 自动调整 Vega 地图的大小

Question

我正在尝试在数据仪表板中创建一个地图选项，其中地图将始终是德克萨斯州。出于这个原因，我不想让用户能够更改比例或使地图重新居中，因为这更有可能造成混乱，而不是贡献任何有益的东西。然而，几乎所有 Vega 文档示例都围绕具有该功能的地图展开。

但是，我确实需要根据用户的屏幕大小和仪表板的更改来更改视图 window。出于这个原因，我一直在尝试使用 Vega 的“适合”和“大小”属性，而不是明确定义中心和比例。在这一点上，我已经让地图工作了，图例在它需要的地方，颜色都很好，等等，但我不知道如何让 window 调整大小除了完整的投影。因为我只在一个州工作，所以 albersUSA 是我能得到的最接近的州，但它的视野仍然太广了。

根据 the documentation，我理解“适合”适用于 geojson 数据，我尝试使用原始地图数据，我什至继续创建了一个正方形大小约为得克萨斯州，所以我可以将坐标直接放入 javascript，但没有任何效果。

有人知道如何让它工作吗？

var figure1 = {
      $schema: "https://vega.github.io/schema/vega/v5.json",
      background: "white",
      autosize: { type: "fit", contains: "padding" },
      signals: [
        {
          name: "width",
          init: "isFinite(containerSize()[0]) ? containerSize()[0] : 200",
          on: [
            {
              update: "isFinite(containerSize()[0]) ? containerSize()[0] : 200",
              events: "window:resize",
            },
          ],
        },
        {
          name: "height",
          init: "isFinite(containerSize()[1]) ? containerSize()[1] : 200",
          on: [
            {
              update: "isFinite(containerSize()[1]) ? containerSize()[1] : 200",
              events: "window:resize",
            },
          ],
        },
      ],
      data: [
        {
          name: "source_1",
          url: "toolData.json",
          format: { type: "json" },
        },
        {
          name: "source_0",
          url: "serviceAreas.geojson",
          format: { property: "features" },
          transform: [
            {
              type: "lookup",
              from: "source_1",
              key: "ID",
              fields: ["properties.ID"],
              values: ["spDevMath"],
            },
          ],
        },
      ],
      projections: [
        {
          name: "projection",
          type: "albersUSA",
          fit: {
            type: "Feature",
            geometry: {
              type: "MultiPolygon",
              coordinates: [
                [
                  [
                    [-107.271508262248858, 37.050404907992352],
                    [-107.193379042010278, 25.721667973398588],
                    [-92.661344077634837, 25.799797193637165],
                    [-92.947817885176278, 36.946232614340914],
                    [-107.271508262248858, 37.050404907992352],
                  ],
                ],
              ],
            },
          },
          size: { signal: "[width, height]" },
        },
      ],
      marks: [
        {
          name: "marks",
          type: "shape",
          style: ["geoshape"],
          from: { data: "source_0" },
          encode: {
            update: {
              fill: { scale: "color", field: "spDevMath" },
              ariaRoleDescription: { value: "geoshape" },
              description: {
                signal: '"spDevMath: " + (format(datum["spDevMath"], ""))',
              },
            },
          },
          transform: [{ type: "geoshape", projection: "projection" }],
        },
      ],
      scales: [
        {
          name: "color",
          type: "linear",
          domain: { data: "source_0", field: "spDevMath" },
          range: "heatmap",
          interpolate: "hcl",
          zero: false,
        },
      ],
      legends: [
        {
          fill: "color",
          gradientLength: { signal: "clamp(height, 64, 200)" },
          title: "rate",
        },
      ],
    };
  }

Answer 1

在你的例子中尝试这个 Vega projections:

   "projections": [
  {
    "name": "projection",
    "type": "albersUsa",
    "fit": {"signal": "data('source_0')"},
    "size": {"signal": "[width - 120,  height]"},
  }  
],

这是按县划分的 Vega 失业地图的工作示例，但仅适用于德克萨斯州。 topojson 文件来自 https://github.com/deldersveld/topojson。当容器大小发生变化时，德克萨斯州地图会调整大小并适合容器。

View in Vega online editor

根据 lat/long 或 geojson 自动调整 Vega 地图的大小

Automatically resize Vega map based on lat/long or geojson

javascript

vega-lite

vega

geography