基于 SpringBoot 和 Leaflet 的电影票房时序可视化

该组件的基本属性配置如下：

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"

参数说明：

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 = 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 生成

由于每天的电影实时票房都会有所不同，因此在生成色带对象时也需要动态生成。主要原理是在循环时先获取所有省份的票房信息，然后进行升序排序，取数组最后一个元素即为最大值，以此为基础动态生成 colormap。

三、成果展示

本节对票房 14 日的时序结果进行可视化展示，并结合时间分析票房的空间时序分布。

1、总体展示

经过代码实现后，界面中增加了一个带有时间轴的筛选组件。

地图底部初始化了从 2025 年 1 月 29 日到 2025 年 2 月 11 日一共 14 天的票房时序空间展示效果，可以通过鼠标点击切换不同的时间票房展示。

2、时序票房分布

通过上图可以看到，在电影上映的首日，票房收入基本来自于沿海和长三角地区，贡献非常大，也从侧面说明这些地区的休闲活动中电影是一种比较重要的方式。

电影上映三天后，东南沿海地区的票房依然给力，而西北和西南地区的票房依然在春节假期中。其中江苏省在前 5 日的票房贡献中稳居 TOP1，广东省紧随其后。而从 2 月 4 号开始，也就是初七开始，广东省的票房超越江苏。联系到春节假期可知，初七了，很多朋友都回工作地点上班了，由此可以得知，人口的流动也是往江浙广东流动的。

随着时间的推移，来到 2025 年 2 月 11 日，随着口碑的不断上涨，山东省的票房贡献来到了 top2，超越江苏省。

这一波人口大省的红利同步展示了出来，比如河南也比较耀眼。这回应该是本地的学生或者还在放假中的大学生的贡献比较多吧。

四、总结

以上就是本文的主要内容。本研究旨在利用 Spring Boot 和 Leaflet 的强大功能，构建一个能够直观展示电影票房时序变化的系统。通过对《哪吒 2》票房数据的收集和整理，利用 Spring Boot 框架搭建后端服务，实现数据的存储、处理和 API 接口的开发，为前端展示提供稳定的数据支持。在前端部分，采用 Leaflet 地图库结合时序数据可视化技术，将《哪吒 2》在不同地区、不同时间段的票房数据以动态地图的形式呈现出来。哪吒代表的中国文化的崛起，不仅是电影的崛起，更是思想的崛起，期待后续更多优秀作品的诞生。