基于SpringBoot和Leaflet的电影票房时序展示-以《哪吒2》为例

目录

前言

一、票房数据

1、原始表格

2、数据库设计

二、Leaflet时序实现

1、时序展示组件

2、时序组件接入

3、每日票房Color生成

三、成果展示

1、总体展示

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如下所示：

SELECTt1.*,st_asgeojson ( t2.geom ) geomJson 
FROMbiz_nezha_box_office t1,biz_province t2 
WHEREt1.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 content = ""+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的大作，祝福饺子导演。行文仓促，难免有许多不足之处，如有不足，在此恳请各位专家博主在评论区不吝留言指出，不胜感激。