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配置 直接复制上述博客的vue.config.js内容即可！

4. 相关代码详情 

         

        ①index.html 修改

        

        ②App.vue

         

         ③HomeView.vue

        ④ router index.js