基于SpringBoot和Leaflet的电影票房时序展示-以《哪吒2》为例
目录
前言
在当今数字化时代，电影产业蓬勃发展，电影票房数据的分析与展示对于电影制作方、发行方以及市场研究人员等具有至关重要的意义。及时、准确且直观地呈现电影票房的时序变化，能够帮助相关从业者更好地把握市场动态，制定营销策略，预测电影的商业前景，也能为观众提供参考，了解影片的受欢迎程度。Spring Boot 作为一款流行的 Java 开发框架，以其简洁、高效的特性，为快速开发企业级应用提供了强大的支持。它极大地简化了应用程序的配置和部署过程，使得开发者能够更加专注于业务逻辑的实现。而 Leaflet 作为一种广泛使用的开源 JavaScript 地图库，以其轻量级、功能丰富和易于集成的优势，成为了在网页上展示地理数据和地图信息的首选工具之一。
本研究旨在利用 Spring Boot 和 Leaflet 的强大功能，构建一个能够直观展示电影票房时序变化的系统，以热门影片《哪吒 2》为例进行深入探索。《哪吒 2》作为一部备受瞩目的电影，在市场中具有广泛的影响力和较高的关注度，其票房数据的变化能够很好地反映电影市场的动态特征。
通过对《哪吒 2》票房数据的收集和整理，利用 Spring Boot 框架搭建后端服务，实现数据的存储、处理和 API 接口的开发，为前端展示提供稳定的数据支持。在前端部分，采用 Leaflet 地图库结合时序数据可视化技术，将《哪吒 2》在不同地区、不同时间段的票房数据以动态地图和图表的形式呈现出来。这样的展示方式不仅能够直观地展示票房的地域差异和时间趋势，还能够让用户通过交互操作，深入了解电影票房的具体变化情况，从而为电影行业的决策者和研究人员提供有价值的参考依据，也为电影爱好者带来更加丰富的观影信息体验。在此背景下，本前言将详细阐述基于 Spring Boot 和 Leaflet 的电影票房时序展示研究的背景、意义和目标，为后续的研究内容展开奠定坚实的基础。
一、票房数据
在上一篇博客中，我们对全国的总票房信息进行了整体的展示，基于SpringBoot和PostGIS的电影票房分省贡献排行榜-以《哪吒之魔童闹海》为例。这篇文章内容主要是讲解一个整体的展示，票房数据是非常适合带时序展示的，即每天的票房都不一样。关于数据的搜集，虽然在上一篇博客中已经进行讲解，这里再次对基础数据进行简单的讲解。
1、原始表格
本次原始数据采用原始手工采集的方式，当然如果有相关接口的朋友也可以使用在线API的方式来获取。从灯塔专业版APP上获取相应的数据后，整理成相应的Excel，表格数据如下：
同时，为了使用方便，我们也根据这张Excel设计了物理表，用于存储对应的数据。
2、数据库设计
电影票房的对应物理数据库表结构如下，这里为了演示方便，仅设计针对哪吒2的业务表，如果要保存其它的电影的数据，则需要做一些展示的扩展兼容，这里不进行扩展。
使用票房和省份空间表关联查询的sql如下所示：
SELECT t1.*, st_asgeojson ( t2.geom ) geomJson FROM biz_nezha_box_office t1, biz_province t2 WHERE t1.province_code = t2.code;在SQL客户端中执行以后可以看到以下结果：
二、Leaflet时序实现
对于SpringBoot的后台接口设计接口与之前的博客内容相同，使用同一个接口来进行数据的返回，因此这里不再进行赘述。这里重点如何在Leaflet中对时序数据进行展示。主要讲解时序组件、如何接入以及如何针对每天的票房来实时构建ColorMap实例。通过本节，希望能掌握时序组件的灵活使用。
1、时序展示组件
这里使用一个新的使用组件，即时间组件，leaflet-timeline-slider.js。
关于组件的更多知识，可以使用搜索引擎或者AI来查询相关的知识。下面将介绍几个基本的属性，如下：
position: 'bottomright', timelineItems: ["Today", "Tomorrow", "The Next Day"], changeMap: function({label, value, map}) { console.log("You are not using the value or label from the timeline to change the map."); }, extraChangeMapParams: {}, initializeChange: true, thumbHeight: "4.5px", labelWidth: "80px",参数说明如下：
| 序号 | 参数 | 说明 |
| 1 | position | 展示位置，如bottomright |
| 2 | timelineItems | 时间轴信息 |
| 3 | changeMap | 地图更新回调方法 |
| 4 | extraChangeMapParams | 扩展参数，不必要可以不用 |
2、时序组件接入
在Leaflet当中使用时序组件的步骤如下，首先先引入时序组件，脚本如下：
<!-- leaflet-timeline-slider.js --> <script th:src="@{/js/plugins/timeline/leaflet-timeline-slider.js}"></script>第二步是设置控制组件，这里将电影上映十四天的日期作为坐标轴数据传入，代码如下：
//初始化时间轴的控制单元 L.control.timelineSlider({timelineItems: ["250129", "250130", "250131", "250201", "250202", "250203","250204","250205", "250206", "250207", "250208", "250209", "250210","250211"], changeMap: getDataAddMarkers, extraChangeMapParams: {exclamation: "params"} }) .addTo(mymap); 首先来看一下数据接口，通过接口可以发现，后台接口已经将全部数据都返回给了前端，因此在切换时间的时候，只需要替换相应的票房数据即可，而无需重新发起请求。
由此，需要定义一个ajax请求来获取相应的数据，核心方法如下：
function showBoxOffice(){ $.ajax({ type:"get", url:prefix + "/list", data:{}, dataType:"json", async: false, // 设置为 false 以同步执行 cache:false, processData:false, success:function(result){ if(result.code == web_status.SUCCESS){ showData = result.data; } }, error:function(){ $.modal.alertWarning("获取空间信息失败"); } }); }最后来看一下在时间轴控件中点击切换不同的日期时，绑定的函数代码如下：
getDataAddMarkers = function( {label, value, map, exclamation} ) { $("#day").html(value); showLayerGroup.clearLayers(); var legendData = new Array(); var valueArray = new Array(); for(var i = 0;i< showData.length;i++){ var boxofficeValue = showData[i]["day" + value]; valueArray.push(boxofficeValue); } valueArray.sort(function(a,b){ return a -b; }); var maxValue = valueArray[valueArray.length - 1]; DIY_BLUE_GREEN_YELLOW_RED_SCHEME = new MultiColorScheme('', 0,maxValue , [new Color(35, 168, 231), new Color(19, 205, 84), new Color(226, 229, 10), new Color(225,56,56), new Color(255,0,0)]) for(var i = 0;i< showData.length;i++){ var areaData = showData[i]; var boxofficeValue = areaData["day" + value]; var color = ccolor = makeColor(boxofficeValue,0,maxValue,DIY_BLUE_GREEN_YELLOW_RED_SCHEME); var+areaData.provinceName + "<br/>"+boxofficeValue+"万元"; var areaLayer = L.geoJSON(JSON.parse(areaData.geomJson), {style: {color:color,fillColor:color,weight:2,"opacity":0.8, fillOpacity: 0.8 }}).bindPopup(content).addTo(showLayerGroup); legendData.push({ label: "\xa0\xa0"+areaData.provinceName + "\r\n\xa0\xa0" +boxofficeValue, type: "rectangle", radius: 12, color: color, fillColor: color, fillOpacity: 0.8, weight: 2}); } initLegend(legendData); };3、每日票房Color生成
由于每天的电影实时票房都会有所不同，因此在生成色带对象时也需要动态生成，在前面的接入代码中已经有有了讲解，主要的原理就是循环时，先获取所有省份的票房信息，然后进行排序，默认是升序的即最大的在最后面，因此我们只需要取数组中最后一个元素即可，方法如下：
var valueArray = new Array(); for(var i = 0;i< showData.length;i++){ var boxofficeValue = showData[i]["day" + value]; valueArray.push(boxofficeValue); } valueArray.sort(function(a,b){ return a -b; }); //根据实时的值动态生成colormap var maxValue = valueArray[valueArray.length - 1];三、成果展示
本节对票房14日的时序结果进行可视化展示，并且结合时间来对票房的空间时序分布做一个简单的分析讲解。
1、总体展示
经过上一节的代码实现后，在界面中就实现了一个增加了时间轴的筛选组件，如下图所示。
在地图的底部初始了从2025年1月29日到2025年2月11日一共14天的票房时序空间展示效果。可以使用鼠标点击切换不同的时间票房展示。
2、时序票房分布
通过上图可以看到，在电影上映的首日，票房收入基本来自于沿海和长三角地区，贡献非常大，也从侧面说明这些地区的饭后休闲中电影是一种比较重要的方式。
电影上映三天后，东南沿海地区的票房依然给力，而西北和西南地区的票房依然在春节假期中。 其中江苏省在前5日的票房贡献中稳居TOP1，广东省紧随其后。而从2月4号开始，也就是初七开始，广东省的票房超越江苏，联系到春节假期可知，初七了，很多朋友都回工作地点上班了，由此可以得知，人口的流动也是往江浙广东流动的。
随着时间的推移，来到2025年2月11日，随着口碑的不断上涨，山东省的票房贡献来到了top2，超越江苏省。
这一波人口大省的红利同步展示了出来，比如河南也比较耀眼。这回应该是本地的学生或者还在放假中的大学生的贡献比较多吧。 虽然时间过去了这么久，但回想哪吒，大家对其中哪个部分印象最深呢？欢迎评论区留言。
四、总结
以上就是本文的主要内容，本研究旨在利用 Spring Boot 和 Leaflet 的强大功能，构建一个能够直观展示电影票房时序变化的系统，以热门影片《哪吒 2》为例进行深入探索。《哪吒 2》作为一部备受瞩目的电影，在市场中具有广泛的影响力和较高的关注度，其票房数据的变化能够很好地反映电影市场的动态特征。通过对《哪吒 2》票房数据的收集和整理，利用 Spring Boot 框架搭建后端服务，实现数据的存储、处理和 API 接口的开发，为前端展示提供稳定的数据支持。在前端部分，采用 Leaflet 地图库结合时序数据可视化技术，将《哪吒 2》在不同地区、不同时间段的票房数据以动态地图和图表的形式呈现出来。哪吒代表的中国文化的崛起，不仅是电影的崛起，更是思想的崛起，期待哪吒3的大作，祝福饺子导演。行文仓促，难免有许多不足之处，如有不足，在此恳请各位专家博主在评论区不吝留言指出，不胜感激。
