基于Vega实现美国可缩放地图报错求助

一、修复“Undefined data set name: 'states'”报错 #

原世界地图示例的数据集命名与us-10m.json的拓扑结构不匹配，需调整数据加载逻辑：

• 在Vega规范的data模块中，明确从美国拓扑数据提取州级要素并命名为states：

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

• 将投影类型改为适配美国区域的albersUsa，替换原世界地图的全局投影：

  "projection": {
    "type": "albersUsa",
    "scale": 1000,
    "translate": {"signal": "[width/2, height/2]"}
  }
  

二、Vega实现可缩放美国气泡图 #

在修复基础上添加气泡数据层：

1. 新增点位数据集：定义包含经纬度、标签和数值的气泡数据：

   {
     "name": "bubbleData",
     "values": [
       {"lat": 34.05, "lon": -118.24, "city": "Los Angeles", "value": 4000000},
       {"lat": 40.71, "lon": -74.01, "city": "New York", "value": 8300000}
       // 补充更多点位数据
     ]
   }
   

2. 添加气泡标记层：通过投影转换经纬度，绑定数值控制气泡大小：

   {
     "mark": "circle",
     "from": {"data": "bubbleData"},
     "encode": {
       "enter": {
         "x": {"signal": "projection([datum.lon, datum.lat])[0]"},
         "y": {"signal": "projection([datum.lon, datum.lat])[1]"},
         "size": {"field": "value", "scale": {"type": "linear", "range": [10, 1000]}},
         "fill": {"value": "rgba(255, 127, 14, 0.6)"},
         "tooltip": {"signal": "{City: datum.city, Value: datum.value}"}
       }
     }
   }
   

3. 保留缩放交互：沿用原世界地图的鼠标滚轮缩放、拖拽平移逻辑，确保投影的scale和translate信号绑定交互更新。

三、Vega-Lite实现可缩放美国气泡图（推荐） #

Vega-Lite的geo_layer可通过配置交互实现缩放，快速完成气泡图：

1. 基础地图层：加载美国州数据并设置投影：

   {
     "data": {
       "url": "us-10m.json",
       "format": {"type": "topojson", "feature": "states"}
     },
     "mark": "geoshape",
     "encoding": {
       "color": {"value": "#f0f0f0"},
       "stroke": {"value": "#fff"}
     },
     "projection": {"type": "albersUsa"}
   }
   

2. 配置缩放交互：添加区间选择器绑定缩放尺度，支持鼠标拖拽和滚轮缩放：

   "selection": {
     "zoom": {"type": "interval", "bind": "scales"}
   }
   

3. 叠加气泡层：用circle标记渲染点位，绑定经纬度和数值字段：

   {
     "data": {
       "values": [
         {"lat": 34.05, "lon": -118.24, "city": "Los Angeles", "value": 4000000},
         {"lat": 40.71, "lon": -74.01, "city": "New York", "value": 8300000}
       ]
     },
     "mark": "circle",
     "encoding": {
       "longitude": {"field": "lon"},
       "latitude": {"field": "lat"},
       "size": {"field": "value", "scale": {"range": [10, 1000]}},
       "color": {"value": "rgba(255, 127, 14, 0.6)"},
       "tooltip": [
         {"field": "city"},
         {"field": "value", "title": "Value"}
       ]
     }
   }
   

4. 组合层结构：用layer将地图层与气泡层合并，完整规范示例：

   {
     "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
     "width": 800,
     "height": 500,
     "selection": {
       "zoom": {"type": "interval", "bind": "scales"}
     },
     "layer": [
       // 美国地图层
       {
         "data": {
           "url": "us-10m.json",
           "format": {"type": "topojson", "feature": "states"}
         },
         "mark": "geoshape",
         "encoding": {
           "color": {"value": "#f0f0f0"},
           "stroke": {"value": "#fff"}
         },
         "projection": {"type": "albersUsa"}
       },
       // 气泡层
       {
         "data": {
           "values": [/* 你的点位数据 */]
         },
         "mark": "circle",
         "encoding": {
           "longitude": {"field": "lon"},
           "latitude": {"field": "lat"},
           "size": {"field": "value", "scale": {"range": [10, 1000]}},
           "color": {"value": "rgba(255, 127, 14, 0.6)"},
           "tooltip": [{"field": "city"}, {"field": "value", "title": "Value"}]
         }
       }
     ]
   }
   

内容的提问来源于stack exchange，提问作者Denys