时态图根据时间轴动态播放热力图

2023-11-22 17:28
文章标签 动态 播放 力图 时态 时间轴

本文主要是介绍时态图根据时间轴动态播放热力图，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

效果图如下：

<!DOCTYPE html>
<html><head><title>时态图</title><meta charset="utf-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><!-- 引入样式 --><!-- <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"> --><link rel="stylesheet" href="../../lib/element-ui@2.13.0/index.css" /><style>html,body,#map {height: 100%;padding: 0;margin: 0;}.timeslider {position: absolute;z-index: 999;width: 100%;height: 100px;background: lightseagreen;bottom: 0px;display: flex;align-items: center;justify-content: center;}.block {width: 80%;display: flex;}.block .icon {display: flex;align-items: center;color: rgb(64, 158, 255);justify-content: center;width: 100px;cursor: pointer;}.block .timestool {flex: 1;}.timeslider .slider-demo-block {display: flex;align-items: center;}.slider-demo-block .el-slider {margin-top: 0;margin-left: 12px;}.el-slider__marks-text {position: absolute;-webkit-transform: translateX(-50%);transform: translateX(-50%);font-size: 14px;color: #fff;margin-top: 15px;}.icon:hover {color: #66b1ff;}.el-slider__marks :last-child {right: -60px;}</style><script src="../../lib/vue@2.6.11/vue.js"></script><!-- <script src="https://unpkg.com/vue@2.6.11/dist/vue.js"></script> --><!-- 引入组件库 --><!-- <script src="https://unpkg.com/element-ui@2.13.0/lib/index.js"></script> --><script src="../../lib/element-ui@2.13.0/index.js"></script><script src="../../js/prjconfig.js" maptype="leaflet"></script><!-- 引入插件 --><script src="../../lib/leaflet/plugins/leaflet.polylineDecorator.js"></script><script src="../../lib/leaflet/plugins/Leaflet.AnimatedMarker.js"></script></head><body><div id="map"></div><div id="app" class="timeslider"><div class="block"><div v-if="show" class="icon"><iclass="icon el-icon-video-play"style="font-size: 32px"@click="playChange('stop')"></i></div><div v-if="!show" class="icon"><iclass="icon el-icon-video-pause"style="font-size: 32px"@click="playChange('play')"></i></div><div class="icon"><iclass="icon el-icon-arrow-left"style="font-size: 32px"@click="prevStep()"></i></div><div class="timestool"><el-sliderv-model="currIndex":max="maxIndex":step="10":marks="marks":show-tooltip="false"@change="change"></el-slider></div><div class="icon"><iclass="icon el-icon-arrow-right"style="font-size: 32px"@click="nextStep()"></i></div></div></div><script>//'http://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineStreetPurplishBlue/MapServer/tile/{z}/{y}/{x}'var map = L.map("map", {crs: L.CRS.EPSG4326, //L.CRS.EPSG3857center: [MAPINIT.Location.lat, MAPINIT.Location.lon], //[40.76339, 106.9477844],zoom: MAPINIT.Location.zoom,minZoom: MAPINIT.zoomsExtent[0],maxZoom: MAPINIT.zoomsExtent[1],zoomControl: true,});// 使用WMTS Key-Value加载地图服务let _getc ="http://192.168.1.212:8095/server/default/getTile/wmts?request=GetCapabilities&service=wmts&layer=yx";MAPCONFIG.MAPWMTS_IMG ="http://192.168.1.212:8095/server/vtile/getTile/wmts";let ls ="http://192.168.1.212:8095/server/vtile/getTile/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=yx&STYLE=default&TILEMATRIXSET=w&FORMAT=image/png&TILEMATRIX={z}&TILECOL={x}&TILEROW={y}&tk=''";L.tileLayer(ls, {zoomOffset: 1,}).addTo(map);map.setView(L.latLng(37.550339, 104.114129), 4); //设置缩放级别及中心点var heatmapLayer;// 初始化热力图function initHeatMap(data, cfg) {heatmapLayer = new HeatmapOverlay(cfg);heatmapLayer.addTo(map);heatmapLayer.setData(data);}function clear() {map.removeLayer(heatmapLayer);}let app = new Vue({el: "#app",data: {message: "Hello Vue!",// 数据testData: {max: 8,data: [{lat: 36.793094 + Math.random(),lng: 118.054241 + Math.random(),count: 8,},{lat: 36.405841 + Math.random(),lng: 118.159911 + Math.random(),count: 5,},{lat: 36.215321 + Math.random(),lng: 118.17456 + Math.random(),count: 9,},{lat: 36.527985 + Math.random(),lng: 118.400512 + Math.random(),count: 8,},{lat: 36.512117 + Math.random(),lng: 118.401366 + Math.random(),count: 7,},{lat: 36.332074 + Math.random(),lng: 118.360107 + Math.random(),count: 6,},{lat: 36.244085 + Math.random(),lng: 118.595214 + Math.random(),count: 7,},],},// 配置cfg: {radius: 0.5, //设置每一个热力点的半径maxOpacity: 0.9, //设置最大的不透明度// minOpacity: 0.3,     //设置最小的不透明度scaleRadius: true, //设置热力点是否平滑过渡blur: 0.95, //系数越高，渐变越平滑，默认是0.85,//滤镜系数将应用于所有热点数据useLocalExtrema: true, //使用局部极值latField: "lat", //纬度lngField: "lng", //经度valueField: "count", //热力点的值gradient: {0.99: "rgba(255,0,0,1)",0.9: "rgba(255,255,0,1)",0.8: "rgba(0,255,0,1)",0.5: "rgba(0,255,255,1)",0: "rgba(0,0,255,1)",},},currIndex: 0,maxIndex: 50,show: true,curPage: 3,curMonth: "",marks: {0: "2023-01",10: "2023-02",20: "2023-03",30: "2023-04",40: "2023-05",50: "2023-06",},},mounted() {// console.log([119.23 + Math.random(), 30.14 + Math.random()]);this.getCurrentMonth();this.getBeforeMonth();initHeatMap(this.testData, this.cfg);},watch: {// watch第一次绑定值的时候不会执行监听，修改数据才会触发函数currIndex(newVal, oldVal) {console.log(newVal);let step = newVal.toString();if (Object.keys(this.marks).indexOf(step) > -1) {// console.log(this.marks[step], 222);// 先清除原来的clear();let data = {max: 8,data: [{lat: 36.60976 + Math.random(),lng: 117.067686 + Math.random(),count: 8,},{lat: 36.60976 + Math.random(),lng: 117.067686 + Math.random(),count: 5,},{lat: 36.60976 + Math.random(),lng: 117.067686 + Math.random(),count: 9,},{lat: 36.60976 + Math.random(),lng: 117.067686 + Math.random(),count: 8,},],};initHeatMap(data, this.cfg);}},},methods: {change(e) {let step = e.toString();// console.log(Object.keys(this.marks));if (Object.keys(this.marks).indexOf(step) > -1) {console.log(this.marks[step]);}// console.log(this.currIndex);},// 获取当前月份getCurrentMonth() {let data = new Date();let year = data.getFullYear();// getMonth()返回的数字范围从0到11，因此需要加1来得到正确的月份let mth = data.getMonth() + 1;let month =mth < 10 ? "0" + mth : mth;this.curMonth = data.getFullYear() + "-" + month;},// 获取当月之前半年的月份getBeforeMonth() {let dataArr = [];let data = new Date();let year = data.getFullYear();data.setMonth(data.getMonth() + 1, 1); //获取到当前月份,设置月份for (let i = 0; i < 6; i++) {data.setMonth(data.getMonth() - 1); //每次循环一次,月份值减1let m = data.getMonth() + 1;m = m < 10 ? "0" + m : m;dataArr.push(data.getFullYear() + "-" + m);}let list = dataArr.reverse();let obj = {};let labelArr = Object.keys(this.marks);labelArr.forEach((item, index) => {obj[item] = list[index];});this.marks = obj;},// 获取指定月之前半年的月份数组getBeforeCurMonth(mon) {let dataArr = [];let data = new Date(mon);let year = data.getFullYear();data.setMonth(data.getMonth(), 1); //获取到当前月份,设置月份for (let i = 0; i < 6; i++) {data.setMonth(data.getMonth() - 1); //每次循环一次,月份值减1let m = data.getMonth() + 1;m = m < 10 ? "0" + m : m;dataArr.push(data.getFullYear() + "-" + m);}let list = dataArr.reverse();let obj = {};let labelArr = Object.keys(this.marks);labelArr.forEach((item, index) => {obj[item] = list[index];});this.marks = obj;},// 获取指定月份之后半年的月份数组getAfterMonth(mon) {let dataArr = [];let data = new Date(mon);let year = data.getFullYear();data.setMonth(data.getMonth(), 1); //获取到当前月份,设置月份for (let i = 0; i < 6; i++) {data.setMonth(data.getMonth() + 1); //每次循环一次,月份值加1let m = data.getMonth() + 1;m = m < 10 ? "0" + m : m;dataArr.push(data.getFullYear() + "-" + m);}let list = dataArr;let obj = {};let labelArr = Object.keys(this.marks);labelArr.forEach((item, index) => {obj[item] = list[index];});this.marks = obj;},playChange(val) {let that = this;let data = new Date();let year = data.getFullYear();let mth = data.getMonth()+1;let month =mth < 10 ? "0" + mth : mth;var curMonth = data.getFullYear() + "-" + month;if (val == "stop") {if (that.timer) {clearInterval(that.timer);}that.show = false;that.timer = setInterval(() => {that.currIndex += 10;const lastValue = that.marks[that.maxIndex];let customM = curMonth.replace("-", "");let curMaxIndexM = lastValue.replace("-", "");if (that.currIndex > that.maxIndex) {that.currIndex = 0;// that.show = true;// clearInterval(that.timer);// 自动循环播放if (parseInt(curMaxIndexM) < parseInt(customM)) {that.getAfterMonth(lastValue.replace("-", "/"))}if (lastValue == curMonth) {that.show = true;clearInterval(that.timer);}}}, 3000);} else {clearInterval(that.timer);that.show = true;}},// 往前播放prevStep() {clearInterval(this.timer);this.show = true;if (this.currIndex === 0) {let curMonth = this.marks[this.currIndex];let customM = this.curMonth.replace("-", "/");var d = new Date(customM);d.setMonth(d.getMonth() - 12);let year = d.getFullYear();let month =d.getMonth() < 10 ? "0" + d.getMonth() : d.getMonth();let beforeM = year + "-" + month;// console.log(year + "-" + month)let curMaxIndexM = curMonth.replace("-", "");let customMs = beforeM.replace("-", "");if (parseInt(curMaxIndexM) < parseInt(customMs)) {return} else {this.getBeforeCurMonth(curMonth.replace("-", "/"))}} else {this.currIndex -= 10;}},// 往后播放nextStep() {clearInterval(this.timer);this.show = true;if (this.currIndex === this.maxIndex) {const lastValue = this.marks[this.maxIndex];const curMonth = this.marks[this.currIndex];// console.log(this.curMonth);// console.log(lastValue);// console.log(curMonth);let customM = this.curMonth.replace("-", "");let curMaxIndexM = lastValue.replace("-", "");let curM = curMonth.replace("-", "");if (parseInt(curMaxIndexM) < parseInt(customM)) {this.getAfterMonth(lastValue.replace("-", "/"))this.currIndex = 0;} else {this.currIndex = this.maxIndex;}} else {this.currIndex += 10;}},},});</script></body>
</html>

这篇关于时态图根据时间轴动态播放热力图的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/411724。

相关文章

流媒体平台/视频监控/安防视频汇聚EasyCVR播放暂停后视频画面黑屏是什么原因？

流媒体平台/视频监控/安防视频汇聚EasyCVR播放暂停后视频画面黑屏是什么原因？

视频智能分析/视频监控/安防监控综合管理系统EasyCVR视频汇聚融合平台，是TSINGSEE青犀视频垂直深耕音视频流媒体技术、AI智能技术领域的杰出成果。该平台以其强大的视频处理、汇聚与融合能力，在构建全栈视频监控系统中展现出了独特的优势。视频监控管理系统EasyCVR平台内置了强大的视频解码、转码、压缩等技术，能够处理多种视频流格式，并以多种格式（RTMP、RTSP、HTTP-FLV、WebS
阅读更多...
第10章 中断和动态时钟显示

第10章 中断和动态时钟显示

第10章 中断和动态时钟显示 从本章开始，按照书籍的划分，第10章开始就进入保护模式（Protected Mode）部分了，感觉从这里开始难度突然就增加了。 书中介绍了为什么有中断（Interrupt）的设计，中断的几种方式：外部硬件中断、内部中断和软中断。通过中断做了一个会走的时钟和屏幕上输入字符的程序。 我自己理解中断的一些作用： 为了更好的利用处理器的性能。协同快速和慢速设备一起工作
阅读更多...
动态规划---打家劫舍

动态规划---打家劫舍

题目： 你是一个专业的小偷，计划偷窃沿街的房屋。每间房内都藏有一定的现金，影响你偷窃的唯一制约因素就是相邻的房屋装有相互连通的防盗系统，如果两间相邻的房屋在同一晚上被小偷闯入，系统会自动报警。 给定一个代表每个房屋存放金额的非负整数数组，计算你 不触动警报装置的情况下 ，一夜之内能够偷窃到的最高金额。 思路： 动态规划五部曲： 1.确定dp数组及含义 dp数组是一维数组，dp[i]代表
阅读更多...
Android平台播放RTSP流的几种方案探究（VLC VS ExoPlayer VS SmartPlayer）

Android平台播放RTSP流的几种方案探究（VLC VS ExoPlayer VS SmartPlayer）

技术背景 好多开发者需要遴选Android平台RTSP直播播放器的时候，不知道如何选的好，本文针对常用的方案，做个大概的说明： 1. 使用VLC for Android VLC Media Player（VLC多媒体播放器），最初命名为VideoLAN客户端，是VideoLAN品牌产品，是VideoLAN计划的多媒体播放器。它支持众多音频与视频解码器及文件格式，并支持DVD影音光盘，VCD影
阅读更多...
代码随想录冲冲冲 Day39 动态规划Part7

代码随想录冲冲冲 Day39 动态规划Part7

198. 打家劫舍 dp数组的意义是在第i位的时候偷的最大钱数是多少 如果nums的size为0 总价值当然就是0 如果nums的size为1 总价值是nums[0] 遍历顺序就是从小到大遍历 之后是递推公式 对于dp[i]的最大价值来说有两种可能 1.偷第i个 那么最大价值就是dp[i-2]+nums[i] 2.不偷第i个 那么价值就是dp[i-1] 之后取这两个的最大值就是d
阅读更多...
LeetCode：64. 最大正方形 动态规划 时间复杂度O(nm)

LeetCode：64. 最大正方形 动态规划 时间复杂度O(nm)

64. 最大正方形 题目链接 题目描述 给定一个由 0 和 1 组成的二维矩阵，找出只包含 1 的最大正方形，并返回其面积。 示例1: 输入: 1 0 1 0 01 0 1 1 11 1 1 1 11 0 0 1 0输出: 4 示例2: 输入: 0 1 1 0 01 1 1 1 11 1 1 1 11 1 1 1 1输出: 9 解题思路 这道题的思路是使用动态规划
阅读更多...
vue2实践：el-table实现由用户自己控制行数的动态表格

vue2实践：el-table实现由用户自己控制行数的动态表格

需求 项目中需要提供一个动态表单，如图： 当我点击添加时，便添加一行；点击右边的删除时，便删除这一行。 至少要有一行数据，但是没有上限。 思路 这种每一行的数据固定，但是不定行数的，很容易想到使用el-table来实现，它可以循环读取:data所绑定的数组，来生成行数据，不同的是： 1、table里面的每一个cell，需要放置一个input来支持用户编辑。 2、最后一列放置两个b
阅读更多...
一款支持同一个屏幕界面同时播放多个视频的视频播放软件

一款支持同一个屏幕界面同时播放多个视频的视频播放软件

GridPlayer 是一款基于 VLC 的免费开源跨平台多视频同步播放工具，支持在一块屏幕上同时播放多个视频。其主要功能包括： 多视频播放：用户可以在一个窗口中同时播放任意数量的视频，数量仅受硬件性能限制。支持多种格式和流媒体：GridPlayer 支持所有由 VLC 支持的视频格式以及流媒体 URL（如 m3u8 链接）。自定义网格布局：用户可以配置播放器的网格布局，以适应不同的观看需求。硬
阅读更多...
Windows下php扩展开发c++动态库

Windows下php扩展开发c++动态库

PHP扩展开发，从零了解到初步完成一个小项目，经过三天的仔细研究，现整理如下 一、需求介绍 PHP扩展开发，调用自己之前的c++动态库，完成功能 二、项目之前 系统：windows xp  开发工具：vs 2008 web环境：apache2.4  PHP5.3.29-VC9-ts-x86 aphach和PHP 环境之前已经搭建完成 PHP源码：去官网http://www.php.n
阅读更多...
LeetCode:3177. 求出最长好子序列 II 哈希表+动态规划实现n*k时间复杂度

LeetCode:3177. 求出最长好子序列 II 哈希表+动态规划实现n*k时间复杂度

3177. 求出最长好子序列 II 题目链接 题目描述 给你一个整数数组 nums 和一个非负整数k 。如果一个整数序列 seq 满足在下标范围 [0, seq.length - 2] 中 最多只有 k 个下标i满足 seq[i] != seq[i + 1] ，那么我们称这个整数序列为好序列。请你返回 nums中好子序列的最长长度。 实例1: 输入：nums = [1,2,1,1,3],
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2