vue3+vite+ts搭建一个基于cesium的gis系统

使用 NPM:

$ npm create vite@latest

使用 Yarn:

$ yarn create vite

使用 PNPM:

$ pnpm create vite
附加的命令行选项
# npm 6.x npm create vite@latest my-vue-app --template vue  
# npm 7+, extra double-dash is needed: npm create vite@latest my-vue-app -- --template vue  
# yarn yarn create vite my-vue-app --template vue  
# pnpm pnpm create vite my-vue-app --template vue
完成以后打开你的项目根目录打开控制台

安装依赖

npm install
npm run serve

 需要改成自己的端口可以在vite.config.ts中加入如下代码修改端口

 另外network想要分享给同网络的人看你的项目可以加入这个

 基本环境准备好了接下来就是gis的接入了

CDN方式：

<script src="https://cesium.com/downloads/cesiumjs/releases/1.104/Build/Cesium/Cesium.js"></script>

<link href="https://cesium.com/downloads/cesiumjs/releases/1.104/Build/Cesium/Widgets/widgets.css" rel="stylesheet">

npm 方式

npm install --save cesium

创建地球 在你的 .vue文件 setup语法糖下

window.CESIUM_BASE_URL = '/';

import * as Cesium from 'cesium'

//样式文件

import "cesium/Build/Cesium/Widgets/widgets.css"

//写入你在cesium后台创建的AccessToken

Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJmNmM1YTllZS1kMDQ3LTRiNzUtOWVmMS01ZGJkODkyNWJmOTIiLCJpZCI6MTMwNTgzLCJpYXQiOjE2Nzk4MjI2OTJ9.PCgTw8qt1XLrAsQzroueqgrgmEEF1fTyGlsICryiJ4g';

//实例化viewer

const viewer = new Cesium.Viewer('cesiumContainer', { terrainProvider: Cesium.createWorldTerrain() });

//控制相机看向对应坐标

viewer.camera.flyTo({ destination : Cesium.Cartesian3.fromDegrees(-122.4175, 37.655, 400), orientation : { heading : Cesium.Math.toRadians(0.0), pitch : Cesium.Math.toRadians(-15.0), } });

到这里会发现控制要有一堆报错

这是因为cesium需要默认加载一些json文件和图片

如果是webpackl需要参照官网的配置进行配置，但现在使用vite

直接下载vite-plugin-cesium --save插件帮我们完成

npm i vite-plugin-cesium --save

在vite.config.js文件配置

 重启项目然后检查控制台是否还报错

如果报错修改window.CESIUM_BASE_URL配置到文件正确的读取地址

注意需要联网~~~需要联网~~~

这样你就可以看到三维地球啦