前端图形学3D渲染【免费下载链接】Fantasy-Map-GeneratorWeb application generating interactive and highly customizable maps项目地址https://gitcode.com/gh_mirrors/fa/Fantasy-Map-Generator点击查看免费下载本篇文章围绕 Azgaars Fantasy Map Generator下称 FMGv1.72.1 版本的两项核心更新展开一是基于机器学习气候模型的全新城镇年度温度图表可查询任意城镇在一年中任意一天的平均温度含白天与夜晚二是应用架构层面的动态数据导入改造让样式预设等数据按需加载。读完本文你将掌握温度估算模型的数据流与计算原理、图表的交互方式以及动态导入在 控制器注册表 与 样式预设模块 中的落地实现并能按仓库提供的 本地运行指南 在本地复现这套环境。一、版本更新概览v1.72.1 是一次兼顾功能纵深与架构演进的发布更新项说明版本归属据 ChangelogBurg 温度图表为所有城镇提供详细的年度温度信息以折线图渲染v1.72动态数据导入样式预设等资源按需加载每个预设为独立 JSON 文件v1.72.1本地运行限制源码级本地使用需启动本地 Web 服务器v1.72.1新增 Cyberpunk 样式预设基于社区用户地图风格的赛博朋克预设v1.72.1其中温度图表功能由社区开发者Kerravitarr实现官方作者负责重构与 UI 修复。整个更新记录可参见 docs/wiki/Changelog.md。二、Burg 温度图表从真实气候数据到任意城镇的全年温度2.1 功能目标任何城镇、任何一天、白天或夜晚的温度此前 FMG 的每个格子和城镇只有年平均温度这一单一数值。v1.72.1 之后你可以得到任意城镇在一年中任意一天的平均温度、白天温度和夜间温度——这对世界观构建story-building、农耕设定、旅行叙事等场景都非常实用。其核心思路是用机器学习分析真实世界约 1000 个城市的气候数据得到一组插值常量再把这些常量套用到 FMG 生成的城镇温度与纬度上从而把单一年均温度展开成完整的年度温度曲线。2.2 如何打开温度图表在城镇编辑器中选中任意城镇后点击温度数值旁的图表图标带data-tipShow temperature graph for the burg的icon-chart-area按钮即可弹出标题为Average temperature in 城镇名的对话框展示该城镇的全年温度曲线。入口与调用链如下UI 按钮定义与事件绑定burg-editor.ts、burg-editor.ts点击后经showTemperatureGraph()调用Controllers.TemperatureGraph.open(id)burg-editor.ts图表实现主体temperature-graph.ts2.3 模型原理三层神经网络的温度插值图表背后的温度展开逻辑完整地写在 temperature-graph.ts 中可以还原出清晰的数学模型。输入特征2 维城镇纬度与降水。其中纬度由城镇屏幕坐标反算const lat options.map.geography.coordinates.latN - (b.y / options.map.graph.height) * options.map.geography.coordinates.latT;输入归一化将纬度与年均降水映射到约 [-1, 1] 区间const In1 [(Math.abs(lat) - 26.950680212887473) / 48.378128506956, (prec - 12.229929140832644) / 29.94402033696607];网络结构三层全连接前馈网络weights数组每层输出经sigmoid激活1 / (1 Math.exp(-x))后作为下一层输入第 1 层2 → 1010 个权重向量各含 2 个系数第 2 层10 → 66 个权重向量各含 10 个系数第 3 层6 → 33 个权重向量各含 6 个系数输出 3 个统计量输出参数3 维再经线性映射还原为物理含义// 全年平均温度的离散度标准差 const yearSig lstOut[0] * 62.9466411977018 0.28613807855649165; // 全年最高温与最低温之差的标准差受 yearSig 约束 const yearDelTmpSig lstOut[1] * 13.541688670361175 0.1414213562373084 yearSig ? yearSig : lstOut[1] * 13.541688670361175 0.1414213562373084; // 全年最高温与最低温之差的期望值 const yearDelTmpMu lstOut[2] * 15.266666666666667 0.6416666666666663;年温度范围以城镇年均温度来自grid.cells.temp[pack.cells.g[b.cell]]为基准向两侧展开const delT yearDelTmpMu / 2 (0.5 * yearDelTmpSig) / 2; const minT burgTemp - Math.max(yearSig delT, 15); const maxT burgTemp (burgTemp - minT);月度曲线生成对 12 个月份采样余弦波形北半球反转相位即lat 0时取负得到每月的平均温度与昼夜温差const rate index / 11; // 0 → 一月, 1 → 十二月 let formTmp Math.cos(rate * 2 * Math.PI) / 2; if (lat 0) formTmp -formTmp; // 北半球一月最冷 const tempAverage formTmp * yearSig burgTemp; // 月均温 const tempDelta yearDelTmpMu / 2 (formTmp * yearDelTmpSig) / 2; // 昼夜温差由此得到三条曲线月均温tempMean、夜间温度tempAverage - tempDelta、白天温度tempAverage tempDelta。2.4 图表渲染与交互细节图表使用 D3.js 绘制源码引用d3的scaleTime、scaleLinear、line().curve(curveBasis)、axisBottom/axisLeft等关键呈现要素包括三条曲线橙色 平均温度Mean、蓝色 夜间温度Night即低温端、红色 白天温度Day即高温端曲线下方带颜色图例坐标轴X 轴按月份标注timeFormat(%B)即 January 至 DecemberY 轴默认 5 个刻度0 度参考线当温度范围跨越 0°C 时自动绘制灰色参考线悬停提示鼠标悬停任意曲线时按指针位置反算温度与月份弹出形如Average day temperature in June: 21°C的提示见 temperature-graph.ts尺寸自适应图表宽度取Math.max(window.innerWidth / 2, 520)高度固定 300。温度单位换算Y 轴与提示中的温度并非固定摄氏温度而是通过convertTemperature()按用户设置的温标实时换算见 unitUtils.ts。该工具函数支持 8 种温标°C、°F、K、°R、°De、°N、°Ré、°Rø并有对应的单测覆盖 unitUtils.test.ts。温度显示遵循options.map.units.temperature.unit配置可在单位编辑器中切换。2.5 架构意义与未来扩展该模型的一大特点是灵活可扩展。作者在更新说明中明确指出两条演进路径降水建模用同样的机器学习方法处理降水数据即可回答这个月是雨季吗之类的问题真实世界气候对标为 FMG 生成的每个城镇找到真实世界的气候对应城市并直接输出这些详细的气候数据。从实现看temperature-graph.ts 将模型常量、网络推断、图表绘制封装在单个控制器内未来替换或叠加新的气候模型时改动面非常小。三、动态数据导入按需加载与本地服务器3.1 动机为什么用户必须加载全部数据v1.72.1 之前作者一直希望在离线、纯静态无需服务器的场景下运行 FMG因此大量数据样式预设、纹理、地图等被提前打包进应用用户哪怕只用到其中一小部分也得加载全部资源。动态导入技术本身并不复杂真正复杂的是在不开服务器、双击 index.html 即用的旧式约束下做按需加载。最终作者决定放开必须本地服务器的限制换来简单可靠的动态数据导入。代价是源码级本地使用需要运行一个本地 Web 服务器。3.2 本地运行方案仓库中提供了完整的本地运行指引见 docs/wiki/Run-FMG-locally.md。核心步骤为# 安装依赖并启动 Vite 开发服务器 npm install npm run devVite 会打印访问地址通常为http://localhost:5173/Fantasy-Map-Generator/并支持热更新。若要构建生产版本npm run build # 生成静态构建到 dist/ npm run preview # 在本地预览该构建说明已经构建好的dist/目录也可以用通用的 Python/PHP 静态服务器托管但源码树仍须依赖 Vite 环境。此外也可用npm run electron以桌面应用方式运行npm run electron dist打包当前系统的安装包到release/。如果只是想离线使用生成器可以直接下载桌面应用安装包无需构建。3.3 落地实现样式预设的按需加载动态导入的收益最先体现在样式预设Style Presets上v1.72.1 之后每个系统预设是一个独立的 JSON 文件存放于 public/styles/ 目录如ancient.json、cyberpunk.json、cinderwood.json等不再整体打包只加载当前使用的预设切换预设时才fetch对应文件default 预设例外它内置于构建产物中src/generators/default-styles.json无需网络请求见 style-presets.js 中的注释与实现。加载逻辑的核心代码位于 style-presets.jsasync function fetchSystemPreset(preset) { // default 预设随 bundle 内置不走 fetch if (preset default) return Styles.defaults; try { const res await fetch(./styles/${preset}.json?v${VERSION}); return await res.json(); } catch (err) { throw new Error(Cannot fetch style preset, preset); } }预设还分为两类系统预设硬编码列表含 default、ancient、gloom、pale、light、watercolor、clean、atlas、darkSeas、cyberpunk、night、monochrome、ink、cinderwood、frostbite见 style-presets.js与自定义预设保存在浏览器 localStorage 中键名以fmgStyle_开头。getStylePreset()会先判断目标预设是否属于系统列表自定义预设从 localStorage 读取并校验 JSON 合法性失效时回退到 default系统预设才走上面的fetchSystemPreset()。预设文件的格式校验与解析逻辑可参见 styles.test.ts 与样式持久化端到端测试 style-persistence.spec.ts。3.4 控制器级别的动态导入动态导入并不局限于样式数据。v1.72.1 的控制器体系同样采用按需加载所有控制器都注册在 src/controllers/index.ts 的createRegistry中通过() import(/controllers/...)形式延迟加载例如TemperatureGraph: () import(/controllers/temperature-graph).then(m m.TemperatureGraph),这意味着温度图表模块本身也只在使用时才被拉取与应用体积优化一脉相承。3.5 未来方向作者明确表示动态导入机制未来将允许在项目中加入更多预制数据例如样式预设、纹理、地图、模块等。此前并非完全做不到但管理成本高拆分文件之后新增数据只需在对应目录放一个 JSON/资源文件并注册即可维护与扩展都更简单。四、新增样式预设Cyberpunk为验证动态导入方案的实际效果v1.72.1 同时新增了Cyberpunk样式预设。它基于社区Discord 用户Terraria Eyeball with Salt in it制作的赛博朋克地图风格以独立 JSON 文件形式存在于 public/styles/cyberpunk.json并已被加入系统预设列表 style-presets.js 与 UI 文档中的预设清单docs/wiki/User-Interface.md。该预设并非面向所有用户的刚需但它填补了默认列表此前缺失的一种鲜明风格。FMG 内置的 Style 编辑器本身功能丰富支持对地图观感进行彻底定制社区若提供更多风格方案也可按同样方式扩充到默认预设列表。五、延伸阅读温度图表控制器源码神经网络权重、推断与 D3 绘制全流程城镇编辑器入口温度图表按钮与调用链样式预设 UI 模块系统/自定义预设的加载与切换控制器注册表全局按需加载的控制器清单本地运行指南开发服务器、生产构建与桌面应用更新日志v1.72/v1.721/v1.722 相关条目用户界面文档预设列表与 Style 编辑器说明赞分享前端图形学3D渲染【免费下载链接】Fantasy-Map-GeneratorWeb application generating interactive and highly customizable maps项目地址https://gitcode.com/gh_mirrors/fa/Fantasy-Map-Generator点击查看免费下载相关推荐vue-devtools 源码架构解析从 Monorepo 结构到调试数据流的完整指南vue devtools 源码架构解析从 Monorepo 结构到调试数据流的完整指南 本文基于当前仓库 README.md 的核心内容展开深入解析 vue前端图形学3D渲染Svelte性能优化秘籍如何让你的应用运行得更快Svelte性能优化秘籍如何让你的应用运行得更快 Svelte作为一款编译型前端框架凭借其零运行时开销的特性为开发者提供了构建高性能Web应用的强大工具。Burp Suite汉化3条命令装好中文界面附2个常见报错排查方法Burp Suite汉化3条命令装好中文界面附2个常见报错排查方法 BurpSuiteCN Release 是一个 Burp Suite 汉化项目它用 J前端图形学3D渲染上一篇Jazz² Resurrection 是什么开源C复刻1998年经典《爵士兔2》的完整入门指南下一篇NetBox Docker终极部署指南从零到精通的容器化网络管理创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 
长河君 · 2026/10/4 1:59:15 · 阅读 1.2k Fantasy Map Generator v1.72.1 深度解析：城镇年度温度图表（Burg Temperature Graph）与动态数据导入（Dynamic Import）
前端图形学3D渲染【免费下载链接】Fantasy-Map-GeneratorWeb application generating interactive and highly customizable maps项目地址https://gitcode.com/gh_mirrors/fa/Fantasy-Map-Generator点击查看免费下载本篇文章围绕 Azgaars Fantasy Map Generator下称 FMGv1.72.1 版本的两项核心更新展开一是基于机器学习气候模型的全新城镇年度温度图表可查询任意城镇在一年中任意一天的平均温度含白天与夜晚二是应用架构层面的动态数据导入改造让样式预设等数据按需加载。读完本文你将掌握温度估算模型的数据流与计算原理、图表的交互方式以及动态导入在 控制器注册表 与 样式预设模块 中的落地实现并能按仓库提供的 本地运行指南 在本地复现这套环境。一、版本更新概览v1.72.1 是一次兼顾功能纵深与架构演进的发布更新项说明版本归属据 ChangelogBurg 温度图表为所有城镇提供详细的年度温度信息以折线图渲染v1.72动态数据导入样式预设等资源按需加载每个预设为独立 JSON 文件v1.72.1本地运行限制源码级本地使用需启动本地 Web 服务器v1.72.1新增 Cyberpunk 样式预设基于社区用户地图风格的赛博朋克预设v1.72.1其中温度图表功能由社区开发者Kerravitarr实现官方作者负责重构与 UI 修复。整个更新记录可参见 docs/wiki/Changelog.md。二、Burg 温度图表从真实气候数据到任意城镇的全年温度2.1 功能目标任何城镇、任何一天、白天或夜晚的温度此前 FMG 的每个格子和城镇只有年平均温度这一单一数值。v1.72.1 之后你可以得到任意城镇在一年中任意一天的平均温度、白天温度和夜间温度——这对世界观构建story-building、农耕设定、旅行叙事等场景都非常实用。其核心思路是用机器学习分析真实世界约 1000 个城市的气候数据得到一组插值常量再把这些常量套用到 FMG 生成的城镇温度与纬度上从而把单一年均温度展开成完整的年度温度曲线。2.2 如何打开温度图表在城镇编辑器中选中任意城镇后点击温度数值旁的图表图标带data-tipShow temperature graph for the burg的icon-chart-area按钮即可弹出标题为Average temperature in 城镇名的对话框展示该城镇的全年温度曲线。入口与调用链如下UI 按钮定义与事件绑定burg-editor.ts、burg-editor.ts点击后经showTemperatureGraph()调用Controllers.TemperatureGraph.open(id)burg-editor.ts图表实现主体temperature-graph.ts2.3 模型原理三层神经网络的温度插值图表背后的温度展开逻辑完整地写在 temperature-graph.ts 中可以还原出清晰的数学模型。输入特征2 维城镇纬度与降水。其中纬度由城镇屏幕坐标反算const lat options.map.geography.coordinates.latN - (b.y / options.map.graph.height) * options.map.geography.coordinates.latT;输入归一化将纬度与年均降水映射到约 [-1, 1] 区间const In1 [(Math.abs(lat) - 26.950680212887473) / 48.378128506956, (prec - 12.229929140832644) / 29.94402033696607];网络结构三层全连接前馈网络weights数组每层输出经sigmoid激活1 / (1 Math.exp(-x))后作为下一层输入第 1 层2 → 1010 个权重向量各含 2 个系数第 2 层10 → 66 个权重向量各含 10 个系数第 3 层6 → 33 个权重向量各含 6 个系数输出 3 个统计量输出参数3 维再经线性映射还原为物理含义// 全年平均温度的离散度标准差 const yearSig lstOut[0] * 62.9466411977018 0.28613807855649165; // 全年最高温与最低温之差的标准差受 yearSig 约束 const yearDelTmpSig lstOut[1] * 13.541688670361175 0.1414213562373084 yearSig ? yearSig : lstOut[1] * 13.541688670361175 0.1414213562373084; // 全年最高温与最低温之差的期望值 const yearDelTmpMu lstOut[2] * 15.266666666666667 0.6416666666666663;年温度范围以城镇年均温度来自grid.cells.temp[pack.cells.g[b.cell]]为基准向两侧展开const delT yearDelTmpMu / 2 (0.5 * yearDelTmpSig) / 2; const minT burgTemp - Math.max(yearSig delT, 15); const maxT burgTemp (burgTemp - minT);月度曲线生成对 12 个月份采样余弦波形北半球反转相位即lat 0时取负得到每月的平均温度与昼夜温差const rate index / 11; // 0 → 一月, 1 → 十二月 let formTmp Math.cos(rate * 2 * Math.PI) / 2; if (lat 0) formTmp -formTmp; // 北半球一月最冷 const tempAverage formTmp * yearSig burgTemp; // 月均温 const tempDelta yearDelTmpMu / 2 (formTmp * yearDelTmpSig) / 2; // 昼夜温差由此得到三条曲线月均温tempMean、夜间温度tempAverage - tempDelta、白天温度tempAverage tempDelta。2.4 图表渲染与交互细节图表使用 D3.js 绘制源码引用d3的scaleTime、scaleLinear、line().curve(curveBasis)、axisBottom/axisLeft等关键呈现要素包括三条曲线橙色 平均温度Mean、蓝色 夜间温度Night即低温端、红色 白天温度Day即高温端曲线下方带颜色图例坐标轴X 轴按月份标注timeFormat(%B)即 January 至 DecemberY 轴默认 5 个刻度0 度参考线当温度范围跨越 0°C 时自动绘制灰色参考线悬停提示鼠标悬停任意曲线时按指针位置反算温度与月份弹出形如Average day temperature in June: 21°C的提示见 temperature-graph.ts尺寸自适应图表宽度取Math.max(window.innerWidth / 2, 520)高度固定 300。温度单位换算Y 轴与提示中的温度并非固定摄氏温度而是通过convertTemperature()按用户设置的温标实时换算见 unitUtils.ts。该工具函数支持 8 种温标°C、°F、K、°R、°De、°N、°Ré、°Rø并有对应的单测覆盖 unitUtils.test.ts。温度显示遵循options.map.units.temperature.unit配置可在单位编辑器中切换。2.5 架构意义与未来扩展该模型的一大特点是灵活可扩展。作者在更新说明中明确指出两条演进路径降水建模用同样的机器学习方法处理降水数据即可回答这个月是雨季吗之类的问题真实世界气候对标为 FMG 生成的每个城镇找到真实世界的气候对应城市并直接输出这些详细的气候数据。从实现看temperature-graph.ts 将模型常量、网络推断、图表绘制封装在单个控制器内未来替换或叠加新的气候模型时改动面非常小。三、动态数据导入按需加载与本地服务器3.1 动机为什么用户必须加载全部数据v1.72.1 之前作者一直希望在离线、纯静态无需服务器的场景下运行 FMG因此大量数据样式预设、纹理、地图等被提前打包进应用用户哪怕只用到其中一小部分也得加载全部资源。动态导入技术本身并不复杂真正复杂的是在不开服务器、双击 index.html 即用的旧式约束下做按需加载。最终作者决定放开必须本地服务器的限制换来简单可靠的动态数据导入。代价是源码级本地使用需要运行一个本地 Web 服务器。3.2 本地运行方案仓库中提供了完整的本地运行指引见 docs/wiki/Run-FMG-locally.md。核心步骤为# 安装依赖并启动 Vite 开发服务器 npm install npm run devVite 会打印访问地址通常为http://localhost:5173/Fantasy-Map-Generator/并支持热更新。若要构建生产版本npm run build # 生成静态构建到 dist/ npm run preview # 在本地预览该构建说明已经构建好的dist/目录也可以用通用的 Python/PHP 静态服务器托管但源码树仍须依赖 Vite 环境。此外也可用npm run electron以桌面应用方式运行npm run electron dist打包当前系统的安装包到release/。如果只是想离线使用生成器可以直接下载桌面应用安装包无需构建。3.3 落地实现样式预设的按需加载动态导入的收益最先体现在样式预设Style Presets上v1.72.1 之后每个系统预设是一个独立的 JSON 文件存放于 public/styles/ 目录如ancient.json、cyberpunk.json、cinderwood.json等不再整体打包只加载当前使用的预设切换预设时才fetch对应文件default 预设例外它内置于构建产物中src/generators/default-styles.json无需网络请求见 style-presets.js 中的注释与实现。加载逻辑的核心代码位于 style-presets.jsasync function fetchSystemPreset(preset) { // default 预设随 bundle 内置不走 fetch if (preset default) return Styles.defaults; try { const res await fetch(./styles/${preset}.json?v${VERSION}); return await res.json(); } catch (err) { throw new Error(Cannot fetch style preset, preset); } }预设还分为两类系统预设硬编码列表含 default、ancient、gloom、pale、light、watercolor、clean、atlas、darkSeas、cyberpunk、night、monochrome、ink、cinderwood、frostbite见 style-presets.js与自定义预设保存在浏览器 localStorage 中键名以fmgStyle_开头。getStylePreset()会先判断目标预设是否属于系统列表自定义预设从 localStorage 读取并校验 JSON 合法性失效时回退到 default系统预设才走上面的fetchSystemPreset()。预设文件的格式校验与解析逻辑可参见 styles.test.ts 与样式持久化端到端测试 style-persistence.spec.ts。3.4 控制器级别的动态导入动态导入并不局限于样式数据。v1.72.1 的控制器体系同样采用按需加载所有控制器都注册在 src/controllers/index.ts 的createRegistry中通过() import(/controllers/...)形式延迟加载例如TemperatureGraph: () import(/controllers/temperature-graph).then(m m.TemperatureGraph),这意味着温度图表模块本身也只在使用时才被拉取与应用体积优化一脉相承。3.5 未来方向作者明确表示动态导入机制未来将允许在项目中加入更多预制数据例如样式预设、纹理、地图、模块等。此前并非完全做不到但管理成本高拆分文件之后新增数据只需在对应目录放一个 JSON/资源文件并注册即可维护与扩展都更简单。四、新增样式预设Cyberpunk为验证动态导入方案的实际效果v1.72.1 同时新增了Cyberpunk样式预设。它基于社区Discord 用户Terraria Eyeball with Salt in it制作的赛博朋克地图风格以独立 JSON 文件形式存在于 public/styles/cyberpunk.json并已被加入系统预设列表 style-presets.js 与 UI 文档中的预设清单docs/wiki/User-Interface.md。该预设并非面向所有用户的刚需但它填补了默认列表此前缺失的一种鲜明风格。FMG 内置的 Style 编辑器本身功能丰富支持对地图观感进行彻底定制社区若提供更多风格方案也可按同样方式扩充到默认预设列表。五、延伸阅读温度图表控制器源码神经网络权重、推断与 D3 绘制全流程城镇编辑器入口温度图表按钮与调用链样式预设 UI 模块系统/自定义预设的加载与切换控制器注册表全局按需加载的控制器清单本地运行指南开发服务器、生产构建与桌面应用更新日志v1.72/v1.721/v1.722 相关条目用户界面文档预设列表与 Style 编辑器说明赞分享前端图形学3D渲染【免费下载链接】Fantasy-Map-GeneratorWeb application generating interactive and highly customizable maps项目地址https://gitcode.com/gh_mirrors/fa/Fantasy-Map-Generator点击查看免费下载相关推荐vue-devtools 源码架构解析从 Monorepo 结构到调试数据流的完整指南vue devtools 源码架构解析从 Monorepo 结构到调试数据流的完整指南 本文基于当前仓库 README.md 的核心内容展开深入解析 vue前端图形学3D渲染Svelte性能优化秘籍如何让你的应用运行得更快Svelte性能优化秘籍如何让你的应用运行得更快 Svelte作为一款编译型前端框架凭借其零运行时开销的特性为开发者提供了构建高性能Web应用的强大工具。Burp Suite汉化3条命令装好中文界面附2个常见报错排查方法Burp Suite汉化3条命令装好中文界面附2个常见报错排查方法 BurpSuiteCN Release 是一个 Burp Suite 汉化项目它用 J前端图形学3D渲染上一篇Jazz² Resurrection 是什么开源C复刻1998年经典《爵士兔2》的完整入门指南下一篇NetBox Docker终极部署指南从零到精通的容器化网络管理创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考