Cesium+Vue3+Vite(Cesium@1.115.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 vite-plugin-cesium vite -D
查看Cesium版本
npm list cesium
├── cesium@1.115.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中的样式
删除/src/style.css文件中的所有内容
配置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>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
}
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
系统效果
其他
报错: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
207.53 K
33.66 K
下载
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
最近提交(Master分支:1 个月前 )
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> 3 个月前
e428d891
Updated Browser Compatibility reference. The previous currently returns HTTP 404. 4 个月前
更多推荐
已为社区贡献4条内容
所有评论(0)