西安网站到首页排名鞍山百姓网免费发布信息

当前位置： 首页 > news >正文

西安网站到首页排名,鞍山百姓网免费发布信息,微信 怎么上传 wordpress,全屋定制怎么样做网站目录 前言 一、票房数据 1、原始表格 2、数据库设计 二、Leaflet时序实现 1、时序展示组件 2、时序组件接入 3、每日票房Color生成 三、成果展示 1、总体展示 2、时序票房分布 四、总结 前言 在当今数字化时代#xff0c;电影产业蓬勃发展#xff0c;电影票房数据…目录 前言 一、票房数据 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, 参数说明如下 序号参数说明1position展示位置如bottomright2timelineItems时间轴信息3changeMap地图更新回调方法4extraChangeMapParams扩展参数不必要可以不用 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\xa0areaData.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的大作祝福饺子导演。行文仓促难免有许多不足之处如有不足在此恳请各位专家博主在评论区不吝留言指出不胜感激。