可视化大屏开发，知道了这些经验以及解决方案，效率至少提升2倍！（完结篇）

news2024/12/23 20:29:56

大家好，我是日拱一卒的攻城师不浪，专注可视化、数字孪生、前端、nodejs、AI学习、GIS等学习沉淀，这是2024年输出的第16/100篇文章；

前言

之前写了两篇可视化大屏开发的经验总结，小伙伴们反应还不错。

最近，总会听到身边的开发同事抱怨：现在干的真没意思，每天就是做一个无情的crud搬运机器。

是啊，每天重复的做一些无聊的事情，时间久了，自己都麻木了。

那能不能去自己主动寻找一些挑战呢，例如如何能把目前的开发需求快速的实现，那剩余的时间是不是就能用来愉快的摸鱼了呢。

日常工作中，多积累，多思考，多总结。

可视化大屏，提高效率我认为目前只有2个途径：

  1. 低代码：只是目前市面上可用的产品很少，一些相对出色的产品都需要收费。

    有条件的公司可以直接买来用，用的时候让出色的工程师去基于开源项目进行二开，不断的去模仿研究优秀的技术解决方案，打造自己的技术产品。

  2. 封装组件库，多用优秀开源库：把常用组件的业务逻辑进行封装，UI可配置。一些比较成熟的开源库收集用起来。

基于以上，针对不同项目的业务需求拿出最快和最优解！

这篇文章将对可视化大屏系列做一个完结，主要是对大屏开发常用到的资料和框架进行整合，以及多个特效组件封装等内容。

GIS地图框架推荐

Turf.js

Turf: 地理空间分析库，处理各种地图算法，推荐做GIS业务的可以用起来，非常强大且方便。

【中文地址】：https://turfjs.fenxianglu.cn/

openlayers

openlayers：开源免费，支持渲染二维GIS，不支持三维渲染，支持Google Maps、Yahoo Map、微软Virtual Earth等资源，并且可以通过WMS服务调用其他服务器上的空间数据，通过WFS服务调用空间服务。

也支持渲染国内厂商地图，例如：天地图、高德等，也支持叠加效果相对较好的mapbox的瓦片地图。

大屏开发中一些地图交互，openlayers都能支持，例如地图放大、缩小、平移、打点、路径规划、地点查询、选取面、选取线、要素选择、图层叠加等诸多功能。

【我的开源】（vue3+vite+ol）：https://github.com/tingyuxuan2302/openlayers-learning

【英文官网】：https://openlayers.org/
【中文官网】：https://openlayers.vip/

mapbox

mapbox：一个功能强大且具有吸引力的地图平台，它提供了高质量的地图数据、多种样式选择和高级功能，如动态地图样式和3D效果，并支持地图主题定制化。

Mapbox适合那些对地图视觉效果有较高要求，或者需要与Mapbox的其他服务（如数据可视化、位置分析等）集成的项目。

使用Mapbox，访问量大的话可能触发收费，它每天会有一个免费的流量额度。

Mapbox的学习成本相对较高，如果真想发挥它的优势，还是需要一定的成本的。最佳适用场景是适合需要高度定制化地图和强大地理数据处理能力的项目。

【官网地址】：https://www.mapbox.com/

cesiumjs

cesiumjs：一个强大的二三维都支持的GIS开源框架，可用于创建3D地球和地图，支持广泛的地理空间数据格式。高性能，支持复杂GIS数据分析演示。

框架底层是WebGL渲染，能够渲染复杂3D场景，支持3D模型加载，支持高度定制化地图样式，拥有丰富且庞大的API接口，能够与threejs配合使用，免费开源！

【我的开源】：https://github.com/tingyuxuan2302/cesium-vue3-vite
【预览地址】：www.brown77.cn:3389
【cesium组件库】：https://github.com/zouyaoji/vue-cesium
【cesium官网】：https://cesium.com/

视频预览

开源：30个cesium场景效果大全

leaflet

leaflet：一个轻量级的JavaScript库，用于在网页上创建交互式地图。它以其简洁的API、易用性以及对移动设备的友好支持而广受欢迎。

如果是GIS地图应用新手，而且业务需求对地图要求不高的话，建议先上手leaflet会更容易些。

优点：易上手，文件体积小，所以加载速度很快，周边生态也很完善，完全开源，无需付费。

缺点：不支持3D，高级GIS功能不太好实现。

【官网地址】：https://leafletjs.com/

国内厂商

如果甲方允许使用国内厂商地图的话，那肯定优先选择国内厂商啊，毕竟全是中文，而且文档也特别适合国人阅读。

像高德地图、百度地图、天地图等，使用起来也非常方便。

我个人的话，还是比较推荐高德地图，UI设计高大上、API丰富，非常好用！

大屏常用组件封装

数字翻牌器

TODO：gif

number-flip：数字翻牌器有很多种类，今天为大家推荐一个开源库，然后我基于这个开源库用vue3进行了二次封装，可以直接拿去用。

<template>
  <div v-if="to" :id="nodeId" class="count-to">
    <span class="num count-color"></span>
    <span class="num count-color">
      <slot name="unit"></slot>
    </span>
  </div>

  <!-- fix flip插件数字为0的时候不显示 -->
  <span v-else-if="to == 0 || !to" class="num_0 count-color">{{ 0 }}</span>
</template>

<script setup name='count-to'>
import uniqueId from 'lodash/uniqueId'
import { nextTick, onMounted, onUnmounted, onUpdated, ref, watch } from 'vue'
import { Flip } from 'number-flip'

const props = defineProps({
  // 翻动起始数值
  from: {
    type: [String, Number],
    default: 0
  },
  // 最终展示数值
  to: [String, Number],
  // 数字翻动时间
  duration: {
    type: Number,
    default: 2
  },
  color: {
    type: String,
    default: '#fff'
  },
  nodeId: {
    type: String,
    default: () => {
      // 生成随机不重复id
      return uniqueId(['countCard_'])
    }
  },
  // flip插件的其他参数
  params: {
    type: Object,
    default: () => ({})
  }
})
let flip = null
const initFlip = () => {
  const numNode = document.querySelector(`#${props.nodeId} .num`)
  if (numNode && props.to) {
    numNode.innerHTML = ''
    flip = new Flip({
      ...props.params,
      node: numNode,
      from: props.from,
      to: props.to,
      duration: props.duration
    })
  }
}
onMounted(() => {
  initFlip()
})
onUpdated(() => {
  initFlip()
})

onUnmounted(() => {
  flip = null
})
</script>

<style lang="less" scoped>
.count-to {
  overflow: hidden;
  height: 24px;
  text-align: center;
  width: 100%;
}

.num,
.num_0 {
  font-size: 20px;
  text-align: center;
}

.count-color {
  color: v-bind(color);
}
</style>

使用：

<count-to :to="6789" />

3D旋转菜单

效果：TODO

很多大屏菜单喜欢使用3D旋转效果，我们使用纯Css3实现一个。

<template>
<div class="menu">
  <div
    v-for="(item, index) in MENU_LIST"
    :key="index"
    class="menu-item"
    @click="linkTo(xxx)"
  >
    <img :src="item.icon" alt="" class="menu-icon" />
  </div>
</div>
</template>
<script setup>
const MENU_LIST = [
  {
    icon: '/imgs/icon1.png',
    name: '菜单1',
  },
  {
    icon: '/imgs/icon2.png',
    name: '菜单2',
  },
  {
    icon: '/imgs/icon3.png',
    name: '菜单3',
]
</script>  
<style lang="less">
.menu {
  position: relative;
  width: 80%;
  height: 100%;
  left: 50%;
  transform: translateX(-50%);
  .menu-item {
      width: 376px;
      height: 436px;
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 33px 0;
      position: absolute;
      cursor: pointer;
      //3个卡片,x和y轴动画加起来是20s , 20s/3 约等于 6.667s
      //每个球y轴动画延迟 从0递减2.857s,x轴与y相差动画时长的一半（10s/2）
      &:nth-child(1) {
        animation: animateX 10s cubic-bezier(0.36, 0, 0.64, 1) -5s infinite alternate,
          animateY 10s cubic-bezier(0.36, 0, 0.64, 1) 0s infinite alternate,
          scaleAnimate 20s cubic-bezier(0.36, 0, 0.64, 1) 0s infinite alternate;
      }
      &:nth-child(2) {
        animation: animateX 10s cubic-bezier(0.36, 0, 0.64, 1) -11.667s infinite alternate,
          animateY 10s cubic-bezier(0.36, 0, 0.64, 1) -6.667s infinite alternate,
          scaleAnimate 20s cubic-bezier(0.36, 0, 0.64, 1) -6.667s infinite alternate;
      }

      &:nth-child(3) {
        animation: animateX 10s cubic-bezier(0.36, 0, 0.64, 1) -18.334s infinite alternate,
          animateY 10s cubic-bezier(0.36, 0, 0.64, 1) -13.334s infinite alternate,
          scaleAnimate 20s cubic-bezier(0.36, 0, 0.64, 1) -13.334s infinite alternate;
      }
    }
}
@keyframes animateX {
  0% {
    left: -50px;
  }
  100% {
    left: 75%;
  }
}

@keyframes animateY {
  0% {
    top: -100px;
  }
  100% {
    top: 400px;
  }
}

@keyframes scaleAnimate {
  0% {
    transform: scale(0.6);
  }
  50% {
    transform: scale(1);
  }
  100% {
    transform: scale(0.6);
  }
}
</style>

原理：主要运用了贝塞尔曲线实现曲线运动轨迹，然后通过控制元素运动时间差实现前后跟随，再通过animate控制元素位置和近大远小的视觉效果。

跑马灯

vue3-marquee：一个无缝滚动，性能优良，使用简单的开源组件，可以用来实现滚动列表，弹幕效果等。

<template>
  <Vue3Marquee>
    <img height="200" width="300" src="...img" />
    <img height="200" width="300" src="...img" />
    <img height="200" width="300" src="...img" />
  </Vue3Marquee>
</template>

<script>
import { Vue3Marquee } from 'vue3-marquee'

export default {
  components: {
    Vue3Marquee,
  },
}
</script>

【开源地址】：https://github.com/megasanjay/vue3-marquee

3D图表

开发3D图表，我看很多人喜欢用echarts的3D插件去开发，然而我感觉效果并不理想，而且开发起来还很费劲。

这里我无脑推荐highcharts，不仅开发起来非常简单，而且效果也很不错。

【官方地址】：https://www.highcharts.com/

结语

好了，以上就是大屏开发经验系列的剩余所有内容了，后续有什么优秀方案我会再继续分享。

由于笔者开发的大屏也不是很多，所以肯定也会有很多疏漏的优秀框架或者开源，毕竟一个人的力量有限，也欢迎小伙伴们在评论区里讨论交流优秀方案。

另外，有需要进技术产品开发交流群(可视化&GIS)可以加我：brown_7778，也欢迎数字孪生领域的商业合作。

最后，如果觉得文章对你有帮助，也希望可以一键三连👏👏👏，你的鼓励是支持我持续分享下去的动力~

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1700627.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

响应式UI组件DevExtreme中文教程 - 工具栏的自适应模式

响应式UI组件DevExtreme中文教程 - 工具栏的自适应模式

DevExtreme拥有高性能的HTML5 / JavaScript小部件集合&#xff0c;使您可以利用现代Web开发堆栈&#xff08;包括React&#xff0c;Angular&#xff0c;ASP.NET Core&#xff0c;jQuery&#xff0c;Knockout等&#xff09;构建交互式的Web应用程序。从Angular和Reac&#xff0c…
阅读更多...
浅谈JMeter环境变量设置

浅谈JMeter环境变量设置

JMeter环境变量设置 确保已安装Java Development Kit (JDK) JMeter需要Java运行环境&#xff0c;因此请先安装JDK&#xff0c;并确认JAVA_HOME环境变量已经设置好。可以通过命令提示符输入java -version和javac -version来验证是否安装成功及其版本信息&#xff0c;若没有出现…
阅读更多...
阿里云 EMR Serverless Spark 版开启免费公测

阿里云 EMR Serverless Spark 版开启免费公测

阿里云 EMR Serverless Spark 版是一款云原生&#xff0c;专为大规模数据处理和分析而设计的全托管 Serverless 产品。它为企业提供了一站式的数据平台服务&#xff0c;包括任务开发、调试、调度和运维等&#xff0c;极大地简化了数据处理的全生命周期工作流程。使用 EMR Serve…
阅读更多...
气膜建筑：室内滑雪场的理想选择—轻空间

气膜建筑：室内滑雪场的理想选择—轻空间

近年来&#xff0c;室内滑雪场成为越来越多投资者关注的热门项目。随着滑雪运动的普及&#xff0c;滑雪场的生意也愈加红火。对于投资者来说&#xff0c;选择一种省钱又实惠的搭建方案至关重要&#xff0c;而气膜建筑无疑是一个理想的选择。以下将详细介绍气膜建筑在室内滑雪场…
阅读更多...
文章解读与仿真程序复现思路——电力自动化设备EI\CSCD\北大核心《考虑分布式光伏高效消纳与负荷损失最小的区域配电网应急资源协同配置策略》

文章解读与仿真程序复现思路——电力自动化设备EI\CSCD\北大核心《考虑分布式光伏高效消纳与负荷损失最小的区域配电网应急资源协同配置策略》

本专栏栏目提供文章与程序复现思路&#xff0c;具体已有的论文与论文源程序可翻阅本博主免费的专栏栏目《论文与完整程序》 论文与完整源程序_电网论文源程序的博客-CSDN博客https://blog.csdn.net/liang674027206/category_12531414.html 电网论文源程序-CSDN博客电网论文源…
阅读更多...
域提权漏洞系列分析-Zerologon漏洞分析

域提权漏洞系列分析-Zerologon漏洞分析

2020年08⽉11⽇&#xff0c;Windows官⽅发布了 NetLogon 特权提升漏洞的⻛险通告&#xff0c;该漏洞编号为CVE-2020-1472&#xff0c;漏 洞等级&#xff1a;严重&#xff0c;漏洞评分&#xff1a;10分&#xff0c;该漏洞也称为“Zerologon”&#xff0c;2020年9⽉11⽇&#xff…
阅读更多...
Tomcat源码解析(七)：底层如何获取请求url、请求头、json数据？

Tomcat源码解析(七)：底层如何获取请求url、请求头、json数据？

Tomcat源码系列文章 Tomcat源码解析(一)&#xff1a;Tomcat整体架构 Tomcat源码解析(二)&#xff1a;Bootstrap和Catalina Tomcat源码解析(三)&#xff1a;LifeCycle生命周期管理 Tomcat源码解析(四)&#xff1a;StandardServer和StandardService Tomcat源码解析(五)&…
阅读更多...
Python使用virtualenv创建虚拟环境

Python使用virtualenv创建虚拟环境

目录 第一步&#xff1a;安装virtualenv 第二步&#xff1a;选择一个文件夹用来放所创建的虚拟环境 第三步&#xff1a;创建虚拟环境 第四步&#xff1a;激活虚拟环境 第五步&#xff1a;退出虚拟环境 第六步&#xff1a;测试安装django 前提&#xff1a;你得有个python环…
阅读更多...
价格预言机领导者 Pyth 与 Eclipse 平台集成，为高频 DeFi 应用提供支持

价格预言机领导者 Pyth 与 Eclipse 平台集成，为高频 DeFi 应用提供支持

本篇文章将对这一战略合作伙伴关系&#xff0c;以及 Pyth 网络在 Eclipse 生态系统中扮演的关键角色进行深入探讨。 目前&#xff0c;Pyth 价格数据已正式上线于 Eclipse 测试网。Eclipse 是首个结合了以太坊安全性、Solana 性能和 Celestia DA 的 Solana虚拟机(SVM) Layer2 方…
阅读更多...
喜讯！宝兰德斩获2024数字中国创新大赛·信创赛道全国总决赛三等奖

喜讯！宝兰德斩获2024数字中国创新大赛·信创赛道全国总决赛三等奖

5月24日&#xff0c;由国家发展和改革委员会、国家数据局、国家互联网信息办公室、科学技术部、国务院国有资产监督管理委员会和福建省人民政府共同主办的2024数字中国创新大赛信创赛道全国总决赛颁奖典礼暨闭幕式大会在福州海峡国际会展中心圆满落幕。依托专业技术研发能力及丰…
阅读更多...
【网络安全】勒索软件ShrinkLocker使用 windows系统安全工具BitLocker实施攻击

【网络安全】勒索软件ShrinkLocker使用 windows系统安全工具BitLocker实施攻击

文章目录 威胁无不不在BitLocker 概述如何利用BitLocker进行攻击如何降低影响Win11 24H2 装机默认开启 BitLocker推荐阅读 威胁无不不在 网络攻击的形式不断发展&#xff0c;即便是合法的 Windows 安全功能也会成为黑客的攻击工具。 卡巴斯基实验室专家 发现 使用BitLocker的…
阅读更多...
路径规划 | 图解粒子群(PSO)算法(附ROS C++仿真)

路径规划 | 图解粒子群(PSO)算法(附ROS C++仿真)

目录 0 专栏介绍1 从鸟群迁徙说起2 粒子群算法基本概念3 粒子群算法流程4 粒子群算法ROS实现 0 专栏介绍 &#x1f525;附C/Python/Matlab全套代码&#x1f525;课程设计、毕业设计、创新竞赛必备&#xff01;详细介绍全局规划(图搜索、采样法、智能算法等)&#xff1b;局部规…
阅读更多...
使用 Ollama框架 下载和使用 Llama3 AI大模型的完整指南

使用 Ollama框架 下载和使用 Llama3 AI大模型的完整指南

&#x1f3e1;作者主页&#xff1a;点击&#xff01; &#x1f916;AI大模型部署与应用专栏&#xff1a;点击&#xff01; ⏰️创作时间&#xff1a;2024年5月24日20点59分 &#x1f004;️文章质量&#xff1a;96分 目录 &#x1f4a5;Ollama介绍 主要特点 主要优点 应…
阅读更多...
Android14之Binder调试(二百一十一)

Android14之Binder调试(二百一十一)

简介&#xff1a; CSDN博客专家&#xff0c;专注Android/Linux系统&#xff0c;分享多mic语音方案、音视频、编解码等技术&#xff0c;与大家一起成长&#xff01; 优质专栏&#xff1a;Audio工程师进阶系列【原创干货持续更新中……】&#x1f680; 优质专栏&#xff1a;多媒…
阅读更多...
【论文笔记】advPattern

【论文笔记】advPattern

【论文题目】 advPattern: Physical-World Attacks on Deep Person Re-Identification via Adversarially Transformable Patterns Abstract 本文首次尝试对深度reID实施鲁棒的物理世界攻击。提出了一种新颖的攻击算法&#xff0c;称为advPattern&#xff0c;用于在衣服上生成…
阅读更多...
java “错误：编码GBK 的不可映射字符”

java “错误：编码GBK 的不可映射字符”

环境&#xff1a;JDK-17 本机编码&#xff1a;utf-8 代码编码&#xff1a;GBK 错误&#xff1a;java “错误&#xff1a;编码GBK 的不可映射字符” 解决1&#xff1a;记事本打开java源文件&#xff0c;另存为选择ANSI编码 解决2&#xff1a;复制代码再将编码格式改为utf-8,…
阅读更多...
STM32无源蜂鸣器播放音乐

STM32无源蜂鸣器播放音乐

开发板&#xff1a;野火霸天虎V2 单片机&#xff1a;STM32F407ZGT6 开发软件&#xff1a;MDKSTM32CubeMX 文章目录 前言一、找一篇音乐的简谱二、确定音调三、确定节拍四、使用STM32CubeMX生成初始化代码五、代码分析 前言 本实验使用的是低电平触发的无源蜂鸣器 无源蜂鸣器是…
阅读更多...
DevExpress WinForms中文教程 - HTML CSS支持的实战应用(二)

DevExpress WinForms中文教程 - HTML CSS支持的实战应用(二)

DevExpress WinForms拥有180组件和UI库&#xff0c;能为Windows Forms平台创建具有影响力的业务解决方案。DevExpress WinForms能完美构建流畅、美观且易于使用的应用程序&#xff0c;无论是Office风格的界面&#xff0c;还是分析处理大批量的业务数据&#xff0c;它都能轻松胜…
阅读更多...
VScode中对git的学习笔记

VScode中对git的学习笔记

1.git是什么&#xff1f; Git是一个功能强大的分布式版本控制系统&#xff0c;由Linux内核的创始人Linus Torvalds在2005年创建。它以其速度、数据完整性和支持大型项目的能力而闻名&#xff0c;被广泛应用于软件开发中。Git允许开发者在本地机器上拥有完整的代码库副本&#x…
阅读更多...
基于UDP的TFTP文件传输-实现网盘上传下载功能

基于UDP的TFTP文件传输-实现网盘上传下载功能

数据传输模式&#xff1a;octet(二进制模式) #include<head.h> char* down_up_request(char* buf,char* filename,int rw,int sockfd,struct sockaddr_in in); int download(struct sockaddr_in in,char* filename,char* buf,int sockfd); int upload(struct sockaddr_in…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023