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

大家好，我是日拱一卒的攻城师不浪，专注可视化、数字孪生、前端、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，也欢迎数字孪生领域的商业合作。

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

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

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

Unity 权限 之 Android 【权限 动态申请】功能的简单封装

Unity 权限 之 Android 【权限 动态申请】功能的简单封装

Unity 权限 之 Android 【权限 动态申请】功能的简单封装 目录 Unity 权限 之 Android 【权限 动态申请】功能的简单封装 一、简单介绍 二、Android 权限 动态申请 三、实现原理 四、注意事项 五、案例实现简单步骤 附录&#xff1a; 一、进一步优化 二、多个权限申请…
阅读更多...
5款好用的AI写作软件，一键生成高质量文章

5款好用的AI写作软件，一键生成高质量文章

在当今信息快速发展的时代&#xff0c;AI写作软件逐渐成为创作者们的得力助手。它们能够凭借先进的技术和算法&#xff0c;一键生成高质量的文章&#xff0c;为创作者们节省大量的创作时间和精力。以下是5款备受好评的AI写作软件&#xff0c;下面在本文中分享给大家&#xff0c…
阅读更多...
物联网网关在电梯按需维保方案中起到什么作用？梯联网网关

物联网网关在电梯按需维保方案中起到什么作用？梯联网网关

为减少电梯故障和预防电梯事故&#xff0c;保障人身和财产安全&#xff0c;基于物联网技术的电梯按需维保已在全国多地陆续推行&#xff0c;做到了电梯安全隐患预测式排查&#xff0c;处理问题更具科学性、针对性和精准性&#xff0c;有效提升了电梯运行的安全性。那么&#xf…
阅读更多...
深入理解一下栈

深入理解一下栈

1、栈&#xff1a;数据结构 为什么 main()方法 最先执行&#xff0c;最后结束&#xff1f; 当然是因为 main()方法入栈啦。 2、栈&#xff1a;栈内存&#xff0c;主管程序的运行&#xff0c;生命周期和现成同步&#xff1b; 线程结束&#xff0c;栈内内存也就释放了&#xff0c…
阅读更多...
VasDolly图形工具-Android多渠道打包福利

VasDolly图形工具-Android多渠道打包福利

简介 基于腾讯VasDolly最新版本3.0.6的图形界面衍生版本&#xff0c;旨在更好的帮助开发者构建多渠道包 使用 下载并解压工具包&#xff0c;找到Startup脚本并双击启动图形界面&#xff08;注意&#xff1a;本地需安装java环境&#xff09; 渠道格式说明 txt文件&#xff…
阅读更多...
测试基础06：软件产品的运行环境dev、sit、test、fat、uat、pre、pro

测试基础06：软件产品的运行环境dev、sit、test、fat、uat、pre、pro

​​​​​​​课程大纲 1、Dev开发环境 &#xff08;Development environment&#xff09; 使用者 开发人员使用。 用途 用于编程&#xff0c;版本变动很大。 外部能否访问 外部用户无法访问。 2、sit/ITE系统集成测试环境 &#xff08;System Integration Testing en…
阅读更多...
MySQL--内置函数

MySQL--内置函数

一、时间函数 简单使用&#xff1a; 函数也可以嵌套使用&#xff1a; 示例&#xff1a;给当前时间加上50天 它也会自动帮我们计算相加后正确的日期。除了加天数&#xff0c;还可以加分钟&#xff0c;秒这些。 示例&#xff1a;计算新中国成立到现在经过了多少天 select date…
阅读更多...
宝塔部署前后端分离项目手册

宝塔部署前后端分离项目手册

文章目录 安装宝塔安装环境开始部署1. 前端Vue项目1.先本地启动前端项目&#xff08;记住端口号&#xff09;2.打包前端项目3.上传前端项目4.创建PHP站点5.安全里开放端口号6.测试前端 2. 后端boot项目1. 先在本地跑起来2.修改数据库的配置信息3. 项目打包4. nohup启动项目4.1 …
阅读更多...
字符串函数（2）＜C语言＞

字符串函数（2）＜C语言＞

前言 快一周没更博客了&#xff0c;最近有点忙&#xff0c;今天闲下来了&#xff0c;还是不行&#xff0c;继续干&#xff0c;书接上回继续介绍字符串函数&#xff1a;strncpy()、strncat()、strcmp()、strtok()使用、strstr()使用以及模拟实现、strerror()使用。 strncpy()、s…
阅读更多...
如何查看网站的cookie？

如何查看网站的cookie？

前言&#xff1a; 在网络世界中&#xff0c;cookie是一种常见的信息存储方式。 对于开发者和普通用户来说&#xff0c;了解如何查看CSDN的cookie是非常重要的。 本文将介绍几种常用的方法&#xff0c;帮助大家更好地理解和使用cookie&#xff1a; 代码示例&#xff1a; 通过浏…
阅读更多...
油猴（Tampermonkey）如何实现网站的自动化操作

油猴（Tampermonkey）如何实现网站的自动化操作

1. 安装油猴插件&#xff1a;首先&#xff0c;在你使用的浏览器上安装油猴插件。油猴支持多种浏览器&#xff0c;如Chrome、Firefox等。你可以在对应的插件商店中搜索并安装油猴插件。 2. 创建用户脚本&#xff1a;打开油猴插件的管理界面&#xff0c;点击"新建脚本"…
阅读更多...
人类行为验证处理方案 —— 脱离UI组件库实现登录、注册+表单校验

人类行为验证处理方案 —— 脱离UI组件库实现登录、注册+表单校验

目录 01: 构建登录模块基础UI结构 02: 表单校验实现原理与方案分析 表单校验的实现原理 自定义表单校验方案分析 文章中的方案实现 03: 基于 vee-validate 实现普适的表单校验 04: 什么是人类行为验证&#xff1f;它的目的、实现原理、构建方案分别是什么&am…
阅读更多...
结合Django和Vue.js构建现代Web应用

结合Django和Vue.js构建现代Web应用

文章目录 1. 创建Django项目2. 配置Django后端3. 创建Vue.js前端4. 连接Django和Vue.js5. 构建和部署 在现代Web开发中&#xff0c;结合后端框架和前端框架是非常常见的&#xff0c;其中Django作为一种流行的Python后端框架&#xff0c;而Vue.js则是一种灵活强大的前端框架。本…
阅读更多...
一、Nginx详解和安装

一、Nginx详解和安装

目录 一、简介 1、什么是Nginx 2、Nginx的优点 二、四大应用场景 1、HTTP服务器 2、反向代理 3、负载均衡 4、动静分离 三、Nginx 源码安装 1、安装相关依赖 2、启动nginx 3、安装成系统服务 一、简介 1、什么是Nginx Nginx是一款轻量级的Web服务器&#xff0c;反向…
阅读更多...
艾体宝干货 | 用于故障排除的最佳 Wireshark 过滤器

艾体宝干货 | 用于故障排除的最佳 Wireshark 过滤器

在网络故障排除过程中&#xff0c;Wireshark是一款非常强大的工具&#xff0c;它可以用来分析网络数据包并解决各种问题。本文将介绍一些好用的Wireshark过滤器&#xff0c;以便更有效地进行故障排除。 分析网络行为和排除网络故障就像用漏斗过滤渣滓。因此&#xff0c;网络协…
阅读更多...
如何给出好的“文言一心”指令？

如何给出好的“文言一心”指令？

一、文言一心是什么&#xff1f; 在现代技术背景下&#xff0c;“文言一心”还是百度公司创建的一款大语言模型。这款模型基于飞桨深度学习平台和文心知识增强大模型&#xff0c;并拥有强大的中文语料库&#xff0c;可以理解和生成富含文化内涵和哲理的文本内容。其核心技术架构…
阅读更多...
MahApps.Metro的MVVM模式解析（二） 主题功能

MahApps.Metro的MVVM模式解析（二） 主题功能

MahApps.Metro的MVVM模式解析&#xff08;二&#xff09; 主题功能 MahApps.Metro是一个开源的WPF框架&#xff0c;旨在为WPF应用程序提供现代和漂亮的用户界面。 在MahApps.Metro中提供了切换主题的功能。经过多日的筛选和分析&#xff0c;在本文来理清它的脉络。 1 主题功…
阅读更多...
数据结构-二叉树系统性学习（四万字精讲拿捏）

数据结构-二叉树系统性学习（四万字精讲拿捏）

前言 这里我会从二叉树的概念开始讲解&#xff0c;其次涉及到概念结构&#xff0c;以及堆的实现和堆排序。 目的是&#xff0c;堆比二叉树简单&#xff0c;同时堆本质上是二叉树的其中一种情况&#xff0c;堆属于二叉树顺序结构的实现 最后完善二叉树的讲解&#xff0c;也就是…
阅读更多...
认知觉醒：情绪绝对是财富的拦路虎……

认知觉醒：情绪绝对是财富的拦路虎……

认知觉醒 无论是投资还是做生意&#xff0c;跟随大众情绪就一定会亏损&#xff0c;老百姓没有是非认知&#xff0c;只有好恶&#xff0c;所以就很容易被人操控情绪。随便一个社会热点事件&#xff0c;就比如最近的涂磊事件、郭有才事件&#xff0c;打开视频的评论区&#xff0…
阅读更多...
浅谈JMeter环境变量设置

浅谈JMeter环境变量设置

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

Copyright @ 2022~2023