vue3+vite+ts搭建一个基于cesium的gis系统-526互联

bash

$ npm create vite@latest

bash

$ yarn create vite

bash

$ 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方式：

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), } });