vue3 cesium datav 可视化大屏

目录

0. 预览效果

 1. 代码库包

2. 技术点

3. 一些注意事项（配置参数）

4. 相关代码详情 

---

0. 预览效果

        包含的功能：

        ① 地球按照一定速度自转

        ② 修改加载的geojson面样式

        ③ 添加 文字 标注！

 1. 代码库包

        

         直接采用vue-cli5 创建项目，选择vue3，router，vuex等，然后这里选择的datav不是官方的，由于官方的datav-vue3有些问题，暂时采用的为DataV Vue3+TS+Vite版 | DataV - Vue3

2. 技术点

        ① css 父相子绝，父元素position: relative; 子元素position: absolute; datav中的BorderBox11，cesium中viewer的挂接的元素下面就有这种。

        ②这里布局写的有点随意，可以参考其他的可视化大屏的布局，多采用几行几列的形式如："flex:0 1 50%"；此外，这里数据都是写死的，后面可以通过配置数据库实现。

        ③css height top width left 等等 尽量按照 n%的形式。

3. 一些注意事项（配置参数）

       项目采用的JavaScript，而非typescript！！！

        ①参考博主的另一篇关于vue3 cesium安装配置webpack的博客

        ② vue.config.js配置如下

const { defineConfig } = require('@vue/cli-service')
// el 按需自动引入
const AutoImport = require('unplugin-auto-import/webpack')
const Components = require('unplugin-vue-components/webpack')
const { ElementPlusResolver } = require('unplugin-vue-components/resolvers')
// cesium 配置
const CopyWebpackPlugin = require('copy-webpack-plugin')
const webpack = require('webpack')
const path = require('path')let cesiumSource = './node_modules/cesium/Source/' //按理说应该是未打包的
const cesiumWorkers = '../Build/Cesium/Workers';module.exports = defineConfig({transpileDependencies: true,publicPath: './',outputDir: "dist", // 输出文件目录lintOnSave: false, // eslint 是否在保存时检查 关闭语法检查// assetsDir: 'static', // 配置js、css静态资源二级目录的位置configureWebpack: {output: {sourcePrefix: ' '},amd: {toUrlUndefined: true},resolve: {alias: {'@': path.resolve('src'),'cesium': path.resolve(__dirname, cesiumSource)},// 参考别人说的，我不太懂webpack，所以都不知道咋解决https zlib问题  cesium github有example介绍了如何解决fallback: { "https": false, "zlib": false, "http": false, "url": false },},plugins: [// 对于webpack版本此处有不同配置，webpack低版本5.x执行下面4行注释的代码，对于webpack高版本9.x及以上，patterns是可以的。new CopyWebpackPlugin({patterns: [{ from: path.join(cesiumSource, cesiumWorkers), to: 'Workers' },{ from: path.join(cesiumSource, 'Assets'), to: 'Assets' },{ from: path.join(cesiumSource, 'Widgets'), to: 'Widgets' },{ from: path.join(cesiumSource, 'ThirdParty'), to: 'ThirdParty' },],}),// new CopyWebpackPlugin([ { from: path.join(cesiumSource, 'Workers'), to: 'Workers'}]),// new CopyWebpackPlugin([ { from: path.join(cesiumSource, 'Assets'), to: 'Assets'}]),// new CopyWebpackPlugin([ { from: path.join(cesiumSource, 'Widgets'), to: 'Widgets'}]),// new CopyWebpackPlugin([ { from: path.join(cesiumSource, 'ThirdParty'), to: 'ThirdParty'}]),new webpack.DefinePlugin({CESIUM_BASE_URL: JSON.stringify('./')// CopyWebpackPlugin from的绝对路径}),// el 自动引入AutoImport({resolvers: [ElementPlusResolver()],}),Components({resolvers: [ElementPlusResolver()],}),],module: {unknownContextCritical: /^.\/.*$/,unknownContextCritical: false}}
})

4. 相关代码详情 

         

        ①index.html 修改

        

        ②App.vue

         

         ③HomeView.vue

<template><BorderBox11 id="container" title="Vue3 Cesium DataV可视化大屏" :title-width="400" :animate="false"><div id="CesiumContainer"></div><router-link to="project01"><BorderBox13 id="box01" title="第一板块" :title-width="200"><div id="title">第一板块</div> <img src="../../public/img01.jpg" alt=""></BorderBox13></router-link><BorderBox13 id="box02" title="第二板块" :title-width="200"><div id="title">第二板块</div> <img src="../../public/img02.jpg" alt=""></BorderBox13><BorderBox13 id="box03" title="第三板块" :title-width="200"><div id="title">第三板块</div> <img src="../../public/img03.jpg" alt=""></BorderBox13><BorderBox13 id="box04" title="第四板块" :title-width="200"><div id="title">第四板块</div> <img src="../../public/img04.jpg" alt=""></BorderBox13><router-link to="project05"><BorderBox13 id="box05" title="第五板块" :title-width="200"><div id="title">第五板块</div> <img src="../../public/img05.jpg" alt=""></BorderBox13></router-link><BorderBox13 id="box06" title="第六板块" :title-width="200"><div id="title">第六板块</div> <img src="../../public/img06.jpg" alt=""></BorderBox13><BorderBox13 id="box07" title="第七板块" :title-width="200"><div id="title">第七板块</div> <img src="../../public/img07.jpg" alt=""></BorderBox13><BorderBox13 id="box08" title="第八板块" :title-width="200"><div id="title">第八板块</div> <img src="../../public/img08.jpg" alt=""></BorderBox13></BorderBox11>
</template><script>import {  BorderBox11, BorderBox13  } from '@kjgl77/datav-vue3';import {reactive, ref, onMounted} from "vue";import * as Cesium from "cesium/Cesium.js";import "cesium/Widgets/widgets.css";export default {name: "App",components: {BorderBox11,BorderBox13,},setup(){var legend = reactive({});// 地球旋转function rotate(time, viewer) {viewer.clock.multiplier = 300; //速度viewer.clock.shouldAnimate = true;var previousTime = viewer.clock.currentTime.secondsOfDay;const onTickCallback = () => {var spinRate = 1;var currentTime = viewer.clock.currentTime.secondsOfDay;var delta = (currentTime - previousTime) / 1000;previousTime = currentTime;viewer.scene.camera.rotate(Cesium.Cartesian3.UNIT_Z, -spinRate * delta);}// 开启地图自转效果viewer.clock.onTick.addEventListener(onTickCallback);};const firstCesium = ()=>{let viewer = new Cesium.Viewer("CesiumContainer", {sceneModePicker: false,navigationHelpButton: false,baseLayerPicker: false,animation: false,timeline: false,geocoder: false,homeButton: false,// infoBox: false,});// 设置自动旋转rotate(4000, viewer);// 设置背景颜色// viewer.scene.skyBox.show = false;// viewer.scene.backgroundColor = Cesium.Color.DARKBLUE;// viewer.scene.sun.show = false;// viewer.scene.moon.show = false;// 去掉logoviewer.cesiumWidget.creditContainer.style.display = "none"; // 去掉背景图层// viewer.imageryLayers.removeAll();// 鼠标右键 倾斜操作viewer.scene.screenSpaceCameraController.tiltEventTypes = [Cesium.CameraEventType.RIGHT_DRAG];// 鼠标滑轮 放缩操作viewer.scene.screenSpaceCameraController.zoomEventTypes = [Cesium.CameraEventType.WHEEL,// Cesium.CameraEventType.PINCH];// 鼠标左键 3D下聚焦局部时给人感觉是平移-本质是地球旋转（范围小-旋转类似平移）viewer.scene.screenSpaceCameraController.rotateEventTypes = [Cesium.CameraEventType.LEFT_DRAG];let geojsonLayer = Cesium.GeoJsonDataSource.load("http://192.168.1.127:80/HeBei_DiZhi/ZG.json",	// 这里是json文件的地址).then((dataSource)=>{const entities = dataSource.entities.values;const colorHash = {};for (let i = 0; i < entities.length; i++) {//For each entity, create a random color based on the state name.//Some states have multiple entities, so we store the color in a//hash so that we use the same color for the entire state.const entity = entities[i];// console.log(i, entity);const name = entity.name;let color = colorHash[name];if (!color) {color = Cesium.Color.fromRandom({alpha: 1.0,});legend[name] = color.toCssHexString();colorHash[name] = color;}//Set the polygon material to our random color.entity.polygon.material = color;//Remove the outlines.entity.polygon.outline = false;// entity.polygon.extrudedHeight =// entity.properties.Population / 50.0;}viewer.dataSources.add(dataSource);viewer.entities.add({position: Cesium.Cartesian3.fromDegrees(115, 38, 1000000, Cesium.Ellipsoid.WGS84),label: {text: "中华人民共和国",showBackground: true,fillColor: Cesium.Color.WHITE,font: '24px sans-serif',// pixelOffset: new Cesium.Cartesian2(20, -15),// scaleByDistance: new Cesium.NearFarScalar(1.5e2, 2.0, 8e5, 0),backgroundColor: Cesium.Color.TRANSPARENT,}});})};onMounted(() => {firstCesium()});return {legend,}}}
</script><style lang="scss" scoped>#container {position: relative;height: 100%;width: 100%;background-color: darkblue;}#CesiumContainer {position: absolute;top: 15%;left: 20%;height: 70%;width: 60%;}#box01 {position: absolute;top: 8%;left: 2.5%;height: 20%;width: 15%;}#title {position: absolute;top: 2%;left: 3.5%;font-size: 0.4vh;color: white;}#box02 {position: absolute;top: 30%;left: 2.5%;height: 20%;width: 15%;}#box03 {position: absolute;top: 8%;right: 2.5%;height: 20%;width: 15%;}#box04 {position: absolute;top: 30%;right: 2.5%;height: 20%;width: 15%;}#box05 {position: absolute;top: 52%;left: 2.5%;height: 20%;width: 15%;}#box06 {position: absolute;top: 52%;right: 2.5%;height: 20%;width: 15%;}#box07 {position: absolute;top: 74%;left: 2.5%;height: 20%;width: 15%;}#box08 {position: absolute;top: 74%;right: 2.5%;height: 20%;width: 15%;}img {position: absolute;top: 20%;left: 15%;height: 70%;width: 70%;}#legend {position: absolute;bottom: 100px;right: 20px;}</style>

        ④ router index.js