关于Cesium的公交车路线可视化项目

已经很久没写有关WebGIS的文章了，最近一直在重新回顾有关前端的一些知识，毕竟作为一个学生，在平常有些东西很少能用到，今天我正式想写一个有关公交车可视化的项目，正好用来巩固一下我学到的知识，本项目使用的是最新的vue3脚手架，搭配TS进行构建，我将每天更新直至完成这个项目。

• 首先创建一个vue框架，在终端使用npm create vue@latest，搭建vue脚手架，勾选TypeScript，router,pinia和EsLint，这些在此不在赘述了，再使用cd命令进入到文件夹,使用npm install安装所有需要的依赖，最后使用npm run dev 打开项目，恭喜完成了项目的初始化。 

---

•  我们对目录进行一下调整，让他适合我们所做的项目，把assets文件夹里面的文件清空，component文件夹也进行清空，对router里面的文件清理成和图片一致

  ---

  viewer文件夹也进行清空，对于App.vue也只保留主体框架。这样就完成了整体的框架。

• npm i cesium vite-plugin-cesium vite -D

  使用这段代码安装cesium,在vite.config.ts配置

  import { fileURLToPath, URL } from 'node:url'
  
  import { defineConfig } from 'vite'
  import vue from '@vitejs/plugin-vue'
  import vueDevTools from 'vite-plugin-vue-devtools'
  
  import cesium from 'vite-plugin-cesium'
  
  // https://vite.dev/config/
  export default defineConfig({
    plugins: [
      vue(),
      vueDevTools(),
      cesium()
    ],
    resolve: {
      alias: {
        '@': fileURLToPath(new URL('./src', import.meta.url))
      },
    },
  })
  

• 我们再把标题和图标更改一下，在阿里巴巴图标库下载一个Bus图标并引入项目，（在阿里巴巴图标库选择自己喜欢的图标点击添加到项目，然后下载文件并解压粘贴到asstes文件夹下啊创建的icon文件夹） ，在index.html中引入css样式，以供后续使用。

  在阿里巴巴图标库下载一个bus的svg格式图片，放在public文件夹下，并对项目名改名为traffic-bus，具体代码如下