地图可视化向导:先出结构骨架,再决定接不接地图 API

前言

做地理空间数据可视化时,常见顺序是先挑底图、再调 ECharts 文档、最后边写边改数据结构。结果是地图类型换了(分布图变成热力图),数据字段和 series 结构全要重来。这个 Skill 把顺序倒过来:先确定要画什么、数据长什么样、骨架怎么拼,再考虑底图数据从哪里来。

下面介绍的「地图可视化向导」就是按这个思路做的方法论型 Skill。它由社区开发者 user_af163eaa 发布,坐标 @user_af163eaa/z-viz-map,当前版本 1.0.1,分类 data-analysis,来源标记为 community,标签 requires_api_key=false(即不需要 API Key)。

这是什么

一句话定位:它是一个地理可视化方法论指南,不生成真实底图,而是输出 HTML + ECharts-map / GeoJSON 的结构骨架,覆盖分布图、热力图、路线轨迹三类常见地图。

它解决的是从「数据字段」到「图表结构」这一段设计问题:数据里哪些字段是经纬度、哪些是数值、用散点还是热力聚合、轨迹是单条还是多条,这些决定 ECharts series 和 option 的写法。底图数据来源是另一层决策。

核心功能

1、输出结构骨架。针对三类地图给出对应的 HTML 骨架与 ECharts-map 配置结构,而不是完整可运行页面。落地时仍需自行填充地图数据和容器样式。

2、覆盖三种可视化类型:

  • 分布图:点位分布,对应 ECharts 的散点/气泡系列;
  • 热力图:按坐标聚合强度,对应热力系列;
  • 路线轨迹:折线按顺序连点,对应线系列。

3、输出 GeoJSON 结构骨架。用于承载行政区划或自定义边界等几何数据,作为地图层的输入格式。

4、默认不接外部接口。Skill 本身不含真实地理底图和 POI 数据,也不需要 API Key。

5、把底图决策留给用户。资料中明确说明:若需要真实地理底图与 POI 数据,可接入地图 API/MCP(如高德、腾讯地图);是否走 API/MCP 由用户选择。

安装与启用

官方资料中未提供具体的安装命令或 SKILL.md 安装路径。可核实的信息如下:

  • 官方地址:https://api.skillhub.cn/user_af163eaa/z-viz-map
  • SkillHub 页面:https://www.skillhub.cn/skills/user_af163eaa/z-viz-map
  • 坐标:@user_af163eaa/z-viz-map
  • 版本:1.0.1
  • 标签:requires_api_key=false

获取后需按所用 Agent 的 Skill 目录约定放置 SKILL.md,并在对话中以 Skill 名称或坐标引用。Cursor、Codex CLI、Claude Code 各自的 Skill 目录与引用方式不同,官方资料未逐一说明,请以所用 Agent 的文档为准,这里不臆造路径。

典型用法

把下面的流程当作一次规划对话来用,而不是一次性提问。

1、先说明数据形态。例如「有 200 条门店记录,字段是 lng、lat、order_count,想看订单量的空间分布」。这一步决定用分布图还是热力图。

2、再确认可视化类型。如果是轨迹数据,需要说明是单条还是多条路径、是否需要按时间排序。资料覆盖了路线轨迹这一类,具体参数仍需按 ECharts 文档调整。

3、让 Skill 输出骨架。得到的应是 HTML + ECharts-map 的结构骨架,以及承载边界数据的 GeoJSON 结构骨架。此时不要急着要完整页面。

4、最后决定数据来源。需要真实底图或 POI 时,再说明走哪条路:地图 API,还是 MCP。高德、腾讯地图是资料中提到的可选接入方,API Key 与配额由你自己的账号决定,Skill 不提供。

适用场景与注意

适合的场景:

  • 数据已具备经纬度或边界字段,缺的是图表结构设计;
  • 需要在分布图、热力图、路线轨迹之间比较方案;
  • 团队内部需要一套统一的地图配置写法,而不是每人各写一份。

需要注意的地方:

  • 它产出的是骨架,不是可交付页面。容器尺寸、底图瓦片、数据接口都要自己补;
  • 默认不接外部接口,所以不提供真实底图和 POI 数据;
  • 是否调用地图 API/MCP 是可选决策,接入后产生的费用和权限问题由调用方承担;
  • 官方页面目前抓取不到,页面上是否有更新的用法示例未能核实,写作时以官方地址为准。

小结

地图可视化向导的价值在于把「先定结构、再定数据」的顺序固定下来,适合不想从零拼 ECharts 配置、又暂时不需要真实底图的场景。资料中显示它由社区发布、分类为 data-analysis、标签 requires_api_key=false。

官方地址:https://api.skillhub.cn/user_af163eaa/z-viz-map

羽毛球分组比赛记分
小程序二维码

欢迎使用《羽毛球分组比赛记分》微信小程序

小夜