Cesium＆Vue的WebGIS开发流程记录

1.创建Vue项目文件夹，记得安装路由router，目前还不知道有什么用。

2.初始化Vue界面，引入cesium。

3.加载离线文件：离线矢量文件，在ArcGIS中将shp格式转化为json格式，然后放在vue项目的public文件目录下。使用GeoJSON调用即可。参考以下文章：Cesium中加载Geojson_cesium geojson_疆~的博客-CSDN博客

4.加载地图服务，问题:中心的地图服务，url不是标准的。

其实是标准的，只不过我以为地图服务数据集是wmts结构，所以用的是wmts的语句；其实这是wms的格式，应该用wms的语句。

5.番外：想加载自己发服务的话，需要下载geoServer，官网下载，然后还要下载Java jdk。参考b站up：小飞侠-GIS人的视频Cesium＋GeoServer教程视频合计。

6.CSS、html掌管网页控件的样式。

问题：如何点击一个按钮，让地图服务加载出来再次关闭。

答案：用dataV组件库，但是Vue3不能适配。只能用新的datav-vue3这个组件，但是感觉这个组件非常麻烦写代码，不像那个那么简单。阅读下面这百篇博文，改一下文件，vue3就可以用了datav了。

vue3使用datav_vue3引入datav-CSDN博客

B站up主“vue3教程”那vue3教学视频就讲到了这一点。

除此之外，还可以引用被大佬们新封装好的这个适用于vue3的样式组件库。

DataV Vue3+TS+Vite版 | DataV - Vue3

7.但是在第一个已经做好球体的vue3项目中，引用失败。（还导致原本的网页出现问题，应该是在实验vue2版本能否使用的时候，重装了vue，vuecli，web。导致老是报错web。但是实践证明，已经创建好的vue项目不会受到影响，而且新建立项目，只需要从创建下项目开始就可以了）。

后来创建vue2项目，然后就成功引入了dataV，这期间也引入了css文件，以定义一些边框，由bilibili中vue项目学习而来，具体操作后续补充在此处。。。

这也取决于vue3和vue2的引入组件的语法不同。这篇文章虽然说得是router，但是本质都是组件。

vue3如何使用vue-router_vue3 $route_是迪迪呀.的博客-CSDN博客

然后根据他的提示，果然，我在vue3里main.js规范的使用了语句，用新定义const语句引用（而不是契合我原来的语句去引用）果然成功了，不理解为什么，明明用createApp(App).use(DataVVue3)也是规范的啊，第一排也有定义createApp。

import { createApp } from 'vue';

/* //datav-vue3引入到main里
import DataVVue3 from '@kjgl77/datav-vue3'
createApp(App).use(DataVVue3) 
createApp(App).mount( '#app')  */


// main.ts中全局引入
import DataVVue3 from '@kjgl77/datav-vue3'

const app = createApp(App)
app.use(DataVVue3).mount('#app')

又不行了，之前引用的装饰，确实成功了，但是边框样式还是不行。尝试局部引入后，终于成功了。即使前面按照要求进行了全局引入，使用边框的时候还是要在script里面import进行单独的局部引入操作，用哪个就局部引入哪个。