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

原创已于 2025-04-09 11:17:38 修改 · 712 阅读

9 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #Cesium #WebGIS

于 2025-03-30 10:53:09 首次发布

Cesium之公交车路线可视化专栏收录该内容

8 篇文章

订阅专栏

已经很久没写有关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样式，以供后续使用。

    <link rel="stylesheet" href="/src/assets/icon/font_4875679_dbifccrf479/iconfont.css">

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

<!DOCTYPE html>
<html lang="">
  <head>
    <meta charset="UTF-8">
    <link rel="icon" href="/public/bus.svg">
    <link rel="stylesheet" href="/src/assets/icon/font_4875679_dbifccrf479/iconfont.css">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>traffic-bus</title>
  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="/src/main.ts"></script>
  </body>
</html>