Météo Climat France
358个可索引页面，一张覆盖72个时次的动态地图——没有一行框架代码。
- 年份
- 2026
- 制作周期
- 6 周
- 技术栈
- JavaScript · MapLibre · HTML/CSS · Vercel
- 信息架构
- 界面设计
- 开发
- 地图制作
- 程序化 SEO
- 科学文案撰写
KAYZEN自主开发的产品，在启用正式域名之前，暂以Vercel预览地址提供服务。
- 个可索引页面180 个市镇 · 141 个气候资料页 · 16 个科普页 · 12 张地图
- 358
- 个插值网格点
- 247
- 个逐小时动画时次
- 72
- 个地图 API 密钥MapLibre 与 IGN 底图均为自托管
- 0
需要解决的问题。
背景
Météo Climat France 是由 KAYZEN 推出的一项免费的全国性天气服务。它以同一个数据库覆盖三种不同用途：日常天气（48 小时逐小时预报，10 天趋势）、气候学（各气象站的气候常年值与极值记录）以及农业气象（土壤温度与湿度、ET0、水分平衡、积温、喷药条件）。
限制
三个约束彼此冲突。服务需要显示一张覆盖 72 个逐小时时次的法国动态地图——也就是说，浏览器端要承担繁重的计算。它必须能在田边用手机查看，而那里常常只有 3G 信号。它还必须在 Google 上出现在“météo Vénissieux 69200”（韦尼雪 69200 天气）这类超本地化的搜索中——而这片阵地已被深耕二十年的老牌网站占据。
对策
我们拒绝了“先上框架”的条件反射。网站用原生 JavaScript 编写，拆分为十一个按需加载的模块，地图部分使用自托管的 MapLibre。在运行时上省下的预算，被重新投入到真正重要的地方：247 个网格点的插值、358 个页面的预渲染，以及农学术语的严谨措辞。
每一个设计取舍，及其理由。
以地图为首页
首屏不是搜索表单，而是已经渲染好的、当前时刻的法国地图。访客在采取任何操作之前就已经看到了答案。按市镇或邮政编码搜索的功能就在正下方，从页面任何位置按“/”键即可将焦点移回搜索框。
每种气象要素一套色阶
温度、降水、风、云量、气压、湿度、雷暴和紫外线，各有一套设定了上下限并附有图例的色阶。没有一套只用红绿渐变：绿色弱视影响着 6% 的男性，选错配色的天气地图，对他们来说将无法辨读。
可用键盘操作的时间滑块
左右方向键切换小时，Shift + 方向键切换日期，空格键播放动画，Home 键回到当前时刻。快捷键就写在滑块下方，而不是藏在帮助页面里。
完整的文字描述
地图下方有一个“以文字描述地图”的链接，用文字还原地图所呈现的内容。这对屏幕阅读器不可或缺，顺带也能被搜索引擎读取——对它们来说，canvas 地图只是一张空白图片。
单一字体，自托管
Nunito 可变字体，从网站自身的域名提供。不向 Google Fonts 发出任何请求：在一个每天都被访问的服务上使用第三方字体，意味着一项网络依赖，以及一次缺乏法律依据的境外数据传输。
项目配色
天蓝
#2E7BB6
结构、链接、页头
石板灰
#1F2933
主要文字
麦色
#C9A227
农业板块
警报红
#C6413B
超出阈值、气象预警
字体系统
标题字体
Nunito 700
正文字体
Nunito 400
单一可变字体，自托管。数字采用等宽字形：否则温度一变化，逐小时表格的整列数字都会跳动。
幕后的技术实现。
- JavaScript
- MapLibre
- HTML/CSS
- Vercel
原生 JavaScript，十一个模块
menu、logique、couches、meteo-api、agro、app、climat、comprendre、glossaire、bandeau，以及 MapLibre 第三方库。每个页面只加载自己需要的部分：某个气象站的气候资料页既不会加载农学引擎，也不会加载雷达播放器。
选择自托管的 MapLibre，而非 Mapbox
没有 API 密钥，没有按浏览量计费，每次加载都不调用第三方。底图来自法国国家地理研究所（IGN）——法国的公共数据，与一项以市镇为单位的服务相得益彰。
基于 247 个网格点的插值
公共模型提供的是网格；界面需要的是连续场。插值和渲染在浏览器中完成，每个时次一次计算，并缓存全部 72 个时次：动画保持流畅，无需再次调用 API。
禁止爬虫访问 /api/ 路由
robots.txt 排除了 /api/。否则，爬虫的每次抓取都会白白消耗 Open-Meteo 的配额——而配额一旦耗尽，真实访客就无法使用服务。
服务端数据函数
对模型的调用都经过服务端函数，由它们对响应进行规范化、缓存和限界。浏览器从不直接与数据提供方通信：哪天更换数据源，界面也纹丝不动。
网站如何被搜索到。
358 个 URL，四种模板
180 个市镇页面（/meteo/lyon-69001）、141 个气候资料页（/climat/…）、16 个科普说明页（/comprendre/…）和 12 个专题地图页（/cartes/radar…）。每种模板回应一种不同的意图；没有任何一个页面只是另一个页面的表面变体。
每个市镇都有专属内容
程序化 SEO 一旦重复就会失败。每个市镇页面都有自己的坐标、海拔、所属气象站的气候常年值及极值记录——这些数值在不同城市之间确实各不相同。
三组结构化数据
WebApplication（天气类别，声明免费）、带有指向真实站内搜索的 SearchAction 的 WebSite，以及由页面中实际解答的问题生成的 FAQPage。
有意义的内部链接
页脚链接到十六个最大的城市；每个市镇页面都链接到对应的气候资料页、地图和术语表。内链遵循阅读路径，而不是一张铺满链接的地毯。
一致的站点地图与 canonical
每个页面只有一个 canonical，站点地图精确列出实际提供的 358 个 URL。不在站点地图中的 URL 不会被抓取；站点地图中有、却没有对应页面的 URL 就是软 404，会拖累整个域名。
人人都能使用。
自2025年6月起，《欧洲无障碍法案》（European Accessibility Act）要求大量在线服务实现数字无障碍。我们在设计阶段就着手处理，而非事后补救。
看不见也能“读”到的地图
地图的文字描述不是一个 alt 属性：它是动态生成的内容，与当前显示的时次同步更新，可通过键盘到达，并能被语音合成朗读。
全部可用键盘完成
切换图层、市镇、时次，播放动画：没有任何交互需要鼠标。快捷键在屏幕上有说明。
色阶经过色觉异常测试
每套色阶都在红色盲、绿色盲和蓝色盲条件下进行了模拟。各数值依然可以区分，图例也始终标有数值上下限。
交付了哪些内容。
- 首页——动态地图与搜索
- /meteo/<市镇>-<邮编>——180 个市镇页面
- /climat/<气象站>——141 个气候常年值与极值记录页
- /cartes/<图层>——雷达、红外与可见光卫星云图、闪电、紫外线……
- /meteo-agricole——土壤、ET0、水分平衡、喷药
- /comprendre——16 个科普页面与术语表
- /lune、/contact、法律声明、隐私政策、使用条款/销售条款、无障碍声明
项目的推进过程。
数据模型
选择公共数据源（Open-Meteo、IGN），统一气象要素，管理配额。
地图制作
网格、插值、色阶、时间滑块。
农业板块
ET0 FAO-56、P − ET0 水分平衡、积温、Delta T、蒲福风级 3 级阈值。
程序化 SEO
四种模板，生成 358 个页面，站点地图，内部链接。
合规
法律声明、植保法规免责说明、无障碍、GDPR。
