Cesium+Vue3+Vite(Cesium@1.106.0)
vue
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
项目地址:https://gitcode.com/gh_mirrors/vu/vue
免费下载资源
·
参考文章:Cesium+Vue3+vite环境搭建详细教程_vite+vue cesium geoserver-CSDN博客
环境依赖
1.nodejs
查看node版本
node -v
v18.16.1
查看npm版本
npm -v
9.5.1
项目创建
使用Vite创建项目
npm create vite@latest cesium-vite
设置项目名称:cesium-vite
设置项目框架:vue
设置语言:TypeScript
配置项目依赖
切换到项目中
cd cesium-vite
安装相关依赖
npm install
引入Cesium插件
npm i cesium@1.106.0 vite-plugin-cesium vite -D
查看Cesium版本
npm list cesium
├── cesium@1.106.0
设置相关配置
配置Vite.config
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import cesium from 'vite-plugin-cesium';
// https://vitejs.dev/config/
export default defineConfig({
plugins: [vue(),cesium(),],
})
配置style.css中的样式
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
}
配置src/app.vue
<template>
<div id="cesiumContainer"></div>
</template>
<script setup>
import * as Cesium from 'cesium';
import { onMounted } from 'vue';
onMounted(() => {
const viewer = new Cesium.Viewer('cesiumContainer');
});
</script>
<style>
html,body,#cesiumContainer{
width: 100%;
height: 100vh;
padding: 0;
margin: 0;
overflow:
hidden;
}
</style>
注意:在app.vue
中设置了Cesium铺满网页的样式后,需要确保src/style.css
中没有对应样式才可以生效
运行系统
npm install
npm run dev
系统效果
其他设置
1、离线使用Cesium时可达到如下效果示意图
2、更改鼠标右键、鼠标中键操作
修改App.vue文件中<script></script>标签中的内容
import * as Cesium from "cesium";
import { onMounted } from "vue";
onMounted(() => {
// NOTE:Cesium离线运行
// 设置默认视角在中国
Cesium.Camera.DEFAULT_VIEW_RECTANGLE = Cesium.Rectangle.fromDegrees(90, -20, 110, 90);
// 取消Cesium自带的一些内容
const viewer = new Cesium.Viewer("cesiumContainer", {
info: false,
geocoder: false,
homeButton: false,
sceneModePicker: false,
baseLayerPicker: false,
navigationHelpButton: false,
animation: false,
// creditContainer: "credit",
timeline: false,
fullscreenButton: false,
vrButton: false,
// terrain: Cesium.Terrain.fromWorldTerrain(),
imageryProvider: new Cesium.SingleTileImageryProvider({
url:"data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVQImWNgYGBgAAAABQABh6FO1AAAAABJRU5ErkJggg==",
}),//影像服务提供者必须创建
});
// NOTE:修改鼠标操作习惯
// 将原来鼠标中键倾斜视图修改为鼠标左键拖动
viewer.scene.screenSpaceCameraController.tiltEventTypes = [
Cesium.CameraEventType.RIGHT_DRAG,
];
// 将原来鼠标右键拖动缩放修改为鼠标滚轮滚动
viewer.scene.screenSpaceCameraController.zoomEventTypes = [
Cesium.CameraEventType.WHEEL,
];
// 开启深度检测
viewer.scene.globe.depthTestAgainstTerrain = true;
let imageryProvider = new Cesium.SingleTileImageryProvider({
url: new URL('@/assets/8081_earthmap2k.jpg', import.meta.url).href
});
viewer.imageryLayers.addImageryProvider(imageryProvider);
});
修改vite.config.ts文件,增加通过@代指/src路径设置
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import cesium from 'vite-plugin-cesium';
import path from 'path';
// https://vitejs.dev/config/
export default defineConfig({
plugins: [vue(),cesium(),],
resolve: {
alias: {
"@": path.resolve(__dirname, "./src"),
},
},
})
其他
报错:unlocker.js:71 Blocked script execution in 'about:blank' because the document's frame is sandboxed and the 'allow-scripts' permission is not set.
在app.vue
中Cesium.Viewer
中设置infobox:false
即可。代码如下:
import * as Cesium from 'cesium';
import { onMounted } from 'vue';
onMounted(() => {
const viewer = new Cesium.Viewer('cesiumContainer',{
infoBox: false,
});
});
GitHub 加速计划 / vu / vue
80
16
下载
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
最近提交(Master分支:4 个月前 )
73486cb5
* chore: fix link broken
Signed-off-by: snoppy <michaleli@foxmail.com>
* Update packages/template-compiler/README.md [skip ci]
---------
Signed-off-by: snoppy <michaleli@foxmail.com>
Co-authored-by: Eduardo San Martin Morote <posva@users.noreply.github.com> 6 个月前
e428d891
Updated Browser Compatibility reference. The previous currently returns HTTP 404. 6 个月前
更多推荐
已为社区贡献3条内容
所有评论(0)