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

攻城师不浪

于 2024-05-27 09:58:45 发布

阅读量734

点赞数 17

分类专栏：前端基建文章标签：前端数据可视化大屏端

本文链接：https://blog.csdn.net/weixin_40580834/article/details/139214222

版权

前端基建专栏收录该内容

11 篇文章 0 订阅

订阅专栏

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

前言

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

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

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

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

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

可视化大屏，提高效率我认为目前只有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，也欢迎数字孪生领域的商业合作。

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

攻城师不浪

关注

17
点赞
踩
22

收藏

觉得还不错? 一键收藏
0
评论
可视化大屏开发，知道了这些经验以及解决方案，效率至少提升2倍！（完结篇）

之前写了两篇可视化大屏开发的经验总结，小伙伴们反应还不错。最近，总会听到身边的开发同事抱怨：现在干的真没意思，每天就是做一个无情的crud搬运机器。是啊，每天重复的做一些无聊的事情，时间久了，自己都麻木了。那能不能去自己主动寻找一些挑战呢，例如如何能把目前的开发需求快速的实现，那剩余的时间是不是就能用来愉快的摸鱼了呢。日常工作中，多积累，多思考，多总结。可视化大屏，提高效率我认为目前只有2个低代码：只是目前市面上可用的产品很少，一些相对出色的产品都需要收费。
复制链接

扫一扫