
> 本文代码与截图全程由腾讯混元 **Hy3** 模型驱动完成；Hy3 正**限时两周免费体验**（7 月 6 日 – 7 月 22 日），文末附上手方式。

---

## 一、为什么想做这个

每年夏秋，台风路径图都是热搜常客。但市面上的台风产品要么要装 App，要么数据滞后、界面花哨。作为一个前端开发者，我一直想做一个**属于自己、打开网页就能看、数据真实、还能离线运行**的台风监测面板。

传统做法：搭一套 Vue 工程、装 ECharts、找地图 GeoJSON、调 CORS、对接气象 API……半天起步。而这次，我全程只做了一件事：**把需求用自然语言告诉 WorkBuddy（底层正是刚发布的腾讯混元 Hy3 模型），让它替我写代码、调样式、修 bug、跑验证**。

下面是这台「台风实时监测仪」从一行需求到可运行产品的真实过程。

![](https://developer.qcloudimg.com/http-save/yehe-5877188/f49c91878e991ad6fceb2470481b1232.png)

> 📸 截图于 2026-07-15，面板显示第9号台风「巴威」(2609) 已停编路径，右上角四台风芯片(巴威/海神/美莎克/米克拉)同屏。状态标签「◼ 已停编」+ 数据年龄「19小时前」

---

## 二、第一步：一句话搭出骨架

我的原始需求（直接丢给 WorkBuddy）：

> 用 Vue3 + ECharts 做一个台风路径实时追踪网页，能显示活跃台风位置、过去 24h 路径、未来预测路径和概率锥，5 分钟自动刷新，深色海洋背景 + 渐变路径 + 动画台风点 + 时间轴滑块。

WorkBuddy 直接产出了一套可运行的 Vue3 单页应用。但这里踩到了第一个坑——

**坑 1：CDN 不可达。** 默认用公共 CDN 引 Vue/ECharts，离线或网络受限时整页白屏。 **解决：** 把 `vue.prod.js`、`echarts.min.js` 下载到本地，并写了一个 node 脚本把世界地图 GeoJSON（`world.geo.js`）一起**内联进单个 HTML**。最终交付物是一个 **2.2MB 的 `typhoon-tracker.html`——双击即用，零网络依赖**。

这一步让我意识到：WorkBuddy 不只是「生成代码」，它还能根据运行环境**主动选择工程化方案**（本地内联而非依赖 CDN），这是有经验的工程师才会做的判断。

---

## 三、第二步：接入真实数据

骨架有了，但一开始显示的是演示数据。我要的是**真实的台风**。

WorkBuddy 帮我调研并锁定了数据源：**中央气象台 nmc.cn 的免费接口**（免密钥、开启 CORS、支持 HTTPS）：

- `list_default` —— 获取当前台风列表（含 id、名称、编号、状态）

- `view_{id}` —— 获取单个台风的完整路径点（历史 + CMA 预报）

**坑 2：JSONP 双括号解析失败。** nmc.cn 返回的是 `callback(({...}))` 这种**双层括号包裹**的格式，常规 JSON.parse 会失败，导致永远回退到演示数据。 **解决：** 写了一个鲁棒的解析器，抓「第一个 `{`/`[`」到「最后一个 `}`/`]`」之间的内容再 `JSON.parse`，并兼容单/双括号。同时修复了「选台风逻辑」——优先选 `start`（活跃）状态，全部停编时选**观测时间最新**的那一个，避免拿到过旧的数据。

> 顺带一提，我还设计了**三级数据回退**：中央气象台 nmc.cn → 美国 NHC（经 CORS 代理）→ 内置演示数据。任何一层挂了，面板都不会白屏。

---

## 四、第三步：反复打磨交互（最见功力的部分）

骨架 + 真实数据跑通后，真正的「产品感」来自一轮轮打磨。这部分 WorkBuddy 的迭代能力体现得最充分——我每次只说一句「哪里不对」，它就定位 + 修复 + 重建 + 截图验证。

### 1. 地图空白 Bug

一度所有数据正常、信息面板有内容，但地图画布**全白**。WorkBuddy 用无头浏览器做 DOM 级诊断，发现根因：`#chart` 的两条 CSS 规则互相覆盖，导致 ECharts 的 canvas **高度塌陷为 0**。

> 诊断输出：`canvasW: 1366 ✅ / canvasH: 0 ❌` → 修复后 `canvasH: 791 ✅`

这种「数据对了但画不出来」的玄学 bug，靠人眼很难定位，但让 WorkBuddy 跑一个诊断脚本，两分钟就锁死了。

### 2. 城市标注：从「太稀」到「太密」再到「刚好」

- 第一版只标了 24 个城市，太空；

- 我让它「像中国天气网那样把主要城市都标出来」，它一度扩充到 **214 个**，又太密；

- 最终方案是**按行政级别分级**：默认只显示约 **20 个核心节点**（北京、上海、广州、东京、马尼拉等），放大到 5× 才渐进显示全部 214 个，并用 `hideOverlap` 自动避让重叠。

### 3. 陆地美化：从「死黑一片」到「地形层次」

原来陆地是纯色 `#0b2236`，和海洋区分度低。WorkBuddy 基于每个国家的 centroid 纬度做了**分层设色**（`landColor(lat)`），低纬偏青绿、高纬偏冷蓝，像真实的地形/气候带图；再加台风活跃区的径向高光和更淡的经纬网，整体立刻「专业地图」了起来。

### 4. 状态透明度：为什么不是「实时」？

有次我发现「坐标时刻」停在昨天。WorkBuddy 诊断 nmc.cn 后发现：**当时根本没有活跃台风，12 个全是已停编（status:stop）**。它没简单甩锅，而是加了三处透明化设计：

- 台风状态标签：`● 实时追踪`（绿）/ `◼ 已停编`（橙）/ `◎ 演示模式`（紫）

- 数据年龄：`观测时刻：2026-07-14 19:00（14小时前）`

- 选台逻辑自动挑「观测时间最新」的停编台风，而非 id 最大但更旧的

这一改，用户看到旧数据也不会困惑——**界面自己说清楚了自己为什么不是实时的**。

### 5. 多台风同屏

我后来问：「海神和巴威要同时显示吗？」WorkBuddy 直接把单台风模型重构为 `typhoons[]` 数组：并行拉取前 8 个候选，按末次观测排序取最新 4 个，**每个台风独立配色**（8 色调色板循环），面板顶部加可点击的切换 chips。

![](https://developer.qcloudimg.com/http-save/yehe-5877188/1a85c80835a6ee88bdb885d6550b4940.svg)

### 6. 时间轴真正回放

原来时间轴滑块只是「摆设」——拖动时地图上的大点不动，面板数字也不变。WorkBuddy 重构了整个数据流：

- 新增 `replay` 计算属性，取 `track[playhead]` 实时算出当前点的位置/风速/气压/移动方向速度/最近城市

- 新增 `updateReplayMarker()` 轻量更新 ECharts 大点坐标（不重绘整张图，性能友好）

- 面板全部指标改为跟随 `replay`：**拖一下滑块，大点沿轨迹走、风速跟着变、「预测」标签在预报段才亮**

- 默认停在最后一个真实观测点（不是预报末点），避免一打开就看到未来数据

效果就像视频进度条——拖到哪，台风就走到哪。

---

## 五、第四步：视觉降噪

多台风全画概率锥 + 动画时，画面又「乱」了。WorkBuddy 做了一次「视觉降噪」：

|   |   |   |
|---|---|---|
|元素|降噪前|降噪后|
|台风数|6 个全画全套|**4 个**，聚焦 1 个完整、其余弱化成「幽灵路径」|
|非聚焦台风|概率锥 + 粗线 + 动画|仅细淡路径 + 小点 + 名称字|
|城市|默认 50 个挤一起|**~20 个核心节点**，5× 才显全部|
|经纬网 / chips|偏重|更淡、更紧凑|

![](https://developer.qcloudimg.com/http-save/yehe-5877188/306e3a8940b91395468a0b9e7aef4c75.svg)

---

## 六、核心能力一览

最终产品具备：

- ✅ **时间轴回放**：拖动即走，大点沿轨迹移动，面板指标实时跟随（风速/气压/位置/移动方向）

- ✅ **多台风同屏**：最多 4 个，独立配色、一键切换聚焦

- ✅ **真实数据**：中央气象台 nmc.cn，含历史路径 + CMA 未来预报 + 概率锥

- ✅ **三级回退**：nmc.cn → NHC → 演示，永不白屏

- ✅ **演示模式醒目横幅**：琥珀色呼吸横幅，一眼区分真实与演示数据

- ✅ **陆地分层 + 城市分级**：专业地图观感，疏密有致

- ✅ **状态透明**：活跃/停编/演示 + 数据年龄一目了然

- ✅ **5 分钟自动刷新 + 倒计时(m:ss)**：加载态 spinner，交互完整

- ✅ **图例配色一致**：色块 = 线条身份色，不再用强度色阶误导

- ✅ **单文件零依赖**：双击即用，可离线、可部署

![](https://developer.qcloudimg.com/http-save/yehe-5877188/d04d173ed8ac275e54feb737ba1417ab.svg)

---

## 七、立即体验

> 👉 **在线 Demo**：[点击这里，打开可交互的台风追踪器](https://1948aa1fe6d44a8f8fef02f2b16d5226.app.codebuddy.work)

打开后即可：

- 🎮 **拖动时间轴**看台风沿轨迹回放，面板指标实时跟随

- 🔀 **点击右上角芯片**切换多台风聚焦

- 📊 查看实时路径 + CMA 预报 + 概率锥

- ⏱️ 观察每 5 分钟自动刷新（倒计时显示）

无需安装任何东西，浏览器直接打开。

_(注：Demo 连接中央气象台 nmc.cn 接口；若当前无活跃台风会自动进入带醒目标识的演示模式)_

---

## 八、用 WorkBuddy 的真实体验

作为全程只动嘴（和偶尔读代码确认）的「产品经理 + 验证官」，我的真实感受：

1. **它真的会跑验证。** 每次改动不是「我觉得改好了」，而是用无头浏览器截图、读 DOM、查 console 错误，零 JS 错误才交付。这比很多人类实习生都稳。

2. **它能在合适层级做工程决策。** 该内联就内联、该加回退就加回退、该做诊断就做诊断——不是机械执行指令，而是在「交付一个能跑的东西」这个目标下自己补位。

3. **迭代极顺。** 「地图空白」「太密了」「太乱了」这种模糊反馈，它能精准定位 CSS 覆盖、数据阈值、视觉噪音等根因，且**全程零环境配置**——我不需要自己装 node、配构建。

而这次最让我惊喜的是——驱动这一切的，是 WorkBuddy 刚接入的**腾讯混元 Hy3 模型**。它在任务规划、长文本处理和多工具调用上明显加力，尤其前端 Coding 表现突出：从「说清需求」到「跑出能用的结果」，中间少了很多来回解释和手动修补。这篇征文的代码、截图、甚至文字润色，也都是 Hy3 在本地一气呵成的。

对一个想快速把想法落成可用产品、又不想被脚手架和环境折磨的开发者来说，WorkBuddy + Hy3 是那种「你说需求，它给结果，你只管验收」的搭档。

---

## 九、结语

从一行「帮我做个台风追踪网页」，到一个能接真实数据、多台风同屏、时间轴回放、视觉清爽、可离线运行的监测仪，整个过程我没有打开过一次 IDE 配环境。这就是我理解的「从 0 到 1」——**不是从空文件写起，而是从一个想法到一件能用的东西，中间最费劲的活都交给了会干活的 AI 搭档**。

> 👉 **现在就能玩**：[在线 Demo](https://1948aa1fe6d44a8f8fef02f2b16d5226.app.codebuddy.work) 已部署，拖时间轴、切台风、看预报——全都可以交互。
> 
> 如果你也想试试，直接把需求丢给 WorkBuddy（切到混元 Hy3 模型），然后像我一样，做个「只验收不写码」的甩手掌柜就行。

> 🔥 **顺手薅个羊毛**：混元 Hy3 正在 **限时两周免费体验**（7 月 6 日 – 7 月 22 日 23:59），打开 WorkBuddy 在模型列表切到 Hy3 即可白嫖，免费期内消耗倍率 0×、不扣额度。同期还有「**腾讯混元 Hy3 超能力挑战赛**」（Coding / Agent 双赛道，投稿至 7 月 22 日）——用 Hy3 做个能跑的作品去投稿，说不定顺手把奖品也拿了。

---

_本文配套代码与截图均由 WorkBuddy 在本地环境生成；台风数据来自中央气象台 nmc.cn 公开接口。_

本文代码与截图全程由腾讯混元 Hy3 模型驱动完成；Hy3 正限时两周免费体验（7 月 6 日 – 7 月 22 日），文末附上手方式。

从 0 到 1：混元 Hy3 限时免费，我用 WorkBuddy 半小时造出一台「台风实时监测仪」

先锋会员

人工智能

腾讯混元Hy3模型驱动开发台风实时监测网页，支持多台风同屏、时间轴回放、真实数据接入，5分钟自动刷新，零依赖单文件运行。限时免费体验Hy3模型，快速实现从想法到产品的开发流程。

数据流

WorkBuddy 

Agent

JSON

CDN免费试用


文章

问答

视频

教程

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云智能顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

EdgeOne AI 安全实战专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

聚焦“写作效率、视觉美观与运行性能”三方面进行全面升级，为您提供更高效、稳定的创作环境

社区富文本&Markdown编辑器全新改版上线，欢迎大家体验!

诚挚邀请您参与本次调研，分享您的真实使用感受与建议。您的反馈至关重要，感谢您的支持与参与！

社区新版编辑器体验调研

从 0 到 1：混元 Hy3 限时免费，我用 WorkBuddy 半小时造出一台「台风实时监测仪」-腾讯云开发者社区-腾讯云

从 0 到 1：混元 Hy3 限时免费，我用 WorkBuddy 半小时造出一台「台风实时监测仪」

从 0 到 1：混元 Hy3 限时免费，我用 WorkBuddy 半小时造出一台「台风实时监测仪」

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐