可視化大屏開發，知道了這些經驗以及解決方案，效率至少提升2倍！（完結篇）

大家好，我是日拱一卒的攻城師不浪，專注可視化、數字孿生、前端、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: () => {// 生成隨機不重復idreturn 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"><divv-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>