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;
            
                // 去掉logo
                viewer.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