尧图网站建设 
让数据随滚动登场谢幕Mapbox Storytelling onChapterEnter/Exit 图层透明度动画实战指南【免费下载链接】storytellingStorytelling with maps template项目地址: https://gitcode.com/gh_mirrors/st/storytellingMapbox Storytelling 是一款用于制作地图滚动叙事Scrollytelling故事的开源模板读者滚动页面时地图自动飞行到对应章节视角配合onChapterEnter/onChapterExit两个配置项地图上的数据图层可以淡入登场、淡出谢幕让时间序列与对比类数据故事一目了然。本文带你搞懂这套图层透明度动画的工作原理并手把手完成实战配置 ️为什么地图故事需要滚动叙事普通文章讲变化很吃力——比如一座冰川 17 年间缩小了 37%一张静态地图很难传递这种冲击力。而 Scrollytelling 的做法是把故事拆分成多个章节chapter每个章节绑定一个地图视角读者往下滚动镜头随之推进数据图层同步显隐就像看一部由地图演绎的电影。这个模板基于 Mapbox GL JS 与 Scrollama.js 构建最终产物只是普通的 HTML 和 JavaScript 文件扔到任何静态托管上即可运行零额外基础设施。核心代码就在 src/index.html。onChapterEnter / onChapterExit 工作原理动画的触发器是 Scrollama 的滚动侦测章节滚入视口 → 触发onStepEnter→ 执行该章节的onChapterEnter列表章节滚出视口 → 触发onStepExit→ 执行onChapterExit列表。真正的淡入淡出由 src/index.html 中的setLayerOpacity函数完成。模板内置了一张图层类型对照表能自动识别fill、line、circle、symbol、raster、fill-extrusion、heatmap七类图层并分别设置对应的透明度绘制属性如fill-opacity、raster-opacity——你只管写图层名不用关心底层属性差异。每个动画条目有三个参数参数含义示例值layerStudio 中图层的名称gnpglaciers-2015opacity目标不透明度0 全透明1 完全不透明0.25duration过渡时长毫秒默认 3005000快速上手三步开启图层透明度动画第一步获取模板并创建配置文件git clone https://gitcode.com/gh_mirrors/st/storytelling进入src/目录把 src/config.js.template 复制为config.js填入地图样式和访问令牌。第二步在 Mapbox Studio 中准备图层关键把你讲故事的自定义数据图层添加到样式里但发布前务必把图层的初始透明度设为0同时千万不要隐藏或删除图层。这样故事页加载时地图是干净的数据只在正确的章节才登场。第三步在章节里编写 enter / exit 规则参考模板中的示例结构src/config.js.template给每个章节配上成对的规则{ id: harrison2015, title: Harrison Glacier, 2015, location: { center: [-113.72917, 48.58938], zoom: 12.92, pitch: 39.5, bearing: 36 }, onChapterEnter: [ { layer: gnpglaciers-2015, opacity: 0.25 } ], onChapterExit: [ { layer: gnpglaciers-2015, opacity: 0 } ] }读者滚到这一章时2015 年的冰川图层以 25% 不透明度淡入覆盖在底图上滚走时再淡出。✨ 地图视角不会调用自带的 src/helper.html 工具搜索地点、缩放、倾斜、旋转左上角会实时给出可直接粘贴进config.js的位置参数。实例拆解用透明度动画讲冰川消退仓库自带的 example/glacier/config.js 是这套玩法的教科书级示范。它的编排逻辑值得学习开场章节config.js同时淡入 1998 年冰川图层与公园边界给读者建立舞台逐年切换每个1998 → 2015的章节用onChapterEnter亮出当年图层、onChapterExit收掉图层形成数据随滚动登场谢幕的节奏半透明叠图opacity 取 0.25 而非 1让底图山川依然可见数据与地形叠加出层次感。另一个 example/bike-philly/config.js 则展示了用同一机制切换城市骑行设施图层的做法可以对照学习不同业务场景的写法。调优技巧清单进出成对写onChapterEnter亮灯、onChapterExit熄灯漏写 exit 会让图层赖场opacity 留缝隙数据图层用 0.20.4 的半透明值底图不抢戏信息又清晰duration 控节奏默认 300ms 干脆利落想制造缓缓揭开的戏剧感可拉长到 2000ms 以上图层名精确到字符layer必须与 Studio 中图层 ID 完全一致差一个空格动画就不会触发隐藏章节也能驱动图层把章节设为hidden: true时文字不显示但地图飞行与图层切换照常执行适合做纯过场。常见坑速查图层根本不出现→ 九成是 Studio 里把图层隐藏了。正确做法是设 0 透明度而非移除图层动画没有过渡直接闪现→ 检查是否误用了mapAnimation: jumpTo它会让地图瞬间跳转flyTo/easeTo才有飞行过程嵌入 iFrame 后滚动失灵→ 滚动驱动依赖整页滚动请整页发布不要嵌 iframe想要自动播放→ 在配置里开启auto选项地图会自动逐章推进适合展会大屏。结语onChapterEnter与onChapterExit让图层拥有了登场与谢幕的能力滚动即运镜章节即幕布透明度即灯光。从冰川消退到城市设施变迁只要把数据切成章节地图就会替你讲故事 更多配置项说明可查阅 README.md。【免费下载链接】storytellingStorytelling with maps template项目地址: https://gitcode.com/gh_mirrors/st/storytelling创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 让数据随滚动登场谢幕：Mapbox Storytelling onChapterEnter/Exit 图层透明度动画实战指南
让数据随滚动登场谢幕Mapbox Storytelling onChapterEnter/Exit 图层透明度动画实战指南【免费下载链接】storytellingStorytelling with maps template项目地址: https://gitcode.com/gh_mirrors/st/storytellingMapbox Storytelling 是一款用于制作地图滚动叙事Scrollytelling故事的开源模板读者滚动页面时地图自动飞行到对应章节视角配合onChapterEnter/onChapterExit两个配置项地图上的数据图层可以淡入登场、淡出谢幕让时间序列与对比类数据故事一目了然。本文带你搞懂这套图层透明度动画的工作原理并手把手完成实战配置 ️为什么地图故事需要滚动叙事普通文章讲变化很吃力——比如一座冰川 17 年间缩小了 37%一张静态地图很难传递这种冲击力。而 Scrollytelling 的做法是把故事拆分成多个章节chapter每个章节绑定一个地图视角读者往下滚动镜头随之推进数据图层同步显隐就像看一部由地图演绎的电影。这个模板基于 Mapbox GL JS 与 Scrollama.js 构建最终产物只是普通的 HTML 和 JavaScript 文件扔到任何静态托管上即可运行零额外基础设施。核心代码就在 src/index.html。onChapterEnter / onChapterExit 工作原理动画的触发器是 Scrollama 的滚动侦测章节滚入视口 → 触发onStepEnter→ 执行该章节的onChapterEnter列表章节滚出视口 → 触发onStepExit→ 执行onChapterExit列表。真正的淡入淡出由 src/index.html 中的setLayerOpacity函数完成。模板内置了一张图层类型对照表能自动识别fill、line、circle、symbol、raster、fill-extrusion、heatmap七类图层并分别设置对应的透明度绘制属性如fill-opacity、raster-opacity——你只管写图层名不用关心底层属性差异。每个动画条目有三个参数参数含义示例值layerStudio 中图层的名称gnpglaciers-2015opacity目标不透明度0 全透明1 完全不透明0.25duration过渡时长毫秒默认 3005000快速上手三步开启图层透明度动画第一步获取模板并创建配置文件git clone https://gitcode.com/gh_mirrors/st/storytelling进入src/目录把 src/config.js.template 复制为config.js填入地图样式和访问令牌。第二步在 Mapbox Studio 中准备图层关键把你讲故事的自定义数据图层添加到样式里但发布前务必把图层的初始透明度设为0同时千万不要隐藏或删除图层。这样故事页加载时地图是干净的数据只在正确的章节才登场。第三步在章节里编写 enter / exit 规则参考模板中的示例结构src/config.js.template给每个章节配上成对的规则{ id: harrison2015, title: Harrison Glacier, 2015, location: { center: [-113.72917, 48.58938], zoom: 12.92, pitch: 39.5, bearing: 36 }, onChapterEnter: [ { layer: gnpglaciers-2015, opacity: 0.25 } ], onChapterExit: [ { layer: gnpglaciers-2015, opacity: 0 } ] }读者滚到这一章时2015 年的冰川图层以 25% 不透明度淡入覆盖在底图上滚走时再淡出。✨ 地图视角不会调用自带的 src/helper.html 工具搜索地点、缩放、倾斜、旋转左上角会实时给出可直接粘贴进config.js的位置参数。实例拆解用透明度动画讲冰川消退仓库自带的 example/glacier/config.js 是这套玩法的教科书级示范。它的编排逻辑值得学习开场章节config.js同时淡入 1998 年冰川图层与公园边界给读者建立舞台逐年切换每个1998 → 2015的章节用onChapterEnter亮出当年图层、onChapterExit收掉图层形成数据随滚动登场谢幕的节奏半透明叠图opacity 取 0.25 而非 1让底图山川依然可见数据与地形叠加出层次感。另一个 example/bike-philly/config.js 则展示了用同一机制切换城市骑行设施图层的做法可以对照学习不同业务场景的写法。调优技巧清单进出成对写onChapterEnter亮灯、onChapterExit熄灯漏写 exit 会让图层赖场opacity 留缝隙数据图层用 0.20.4 的半透明值底图不抢戏信息又清晰duration 控节奏默认 300ms 干脆利落想制造缓缓揭开的戏剧感可拉长到 2000ms 以上图层名精确到字符layer必须与 Studio 中图层 ID 完全一致差一个空格动画就不会触发隐藏章节也能驱动图层把章节设为hidden: true时文字不显示但地图飞行与图层切换照常执行适合做纯过场。常见坑速查图层根本不出现→ 九成是 Studio 里把图层隐藏了。正确做法是设 0 透明度而非移除图层动画没有过渡直接闪现→ 检查是否误用了mapAnimation: jumpTo它会让地图瞬间跳转flyTo/easeTo才有飞行过程嵌入 iFrame 后滚动失灵→ 滚动驱动依赖整页滚动请整页发布不要嵌 iframe想要自动播放→ 在配置里开启auto选项地图会自动逐章推进适合展会大屏。结语onChapterEnter与onChapterExit让图层拥有了登场与谢幕的能力滚动即运镜章节即幕布透明度即灯光。从冰川消退到城市设施变迁只要把数据切成章节地图就会替你讲故事 更多配置项说明可查阅 README.md。【免费下载链接】storytellingStorytelling with maps template项目地址: https://gitcode.com/gh_mirrors/st/storytelling创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考