vite + vue3 + ts集成Cesium
vite + vue3 + ts集成Cesium
安装cesium:npm i cesium vite-plugin-cesium vite -D
在vite.config.ts中进行相应的cesium配置
import { fileURLToPath, URL } from "node:url";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()],resolve: {alias: {"@": fileURLToPath(new URL("./src", import.meta.url)),},},server: {host: "0.0.0.0",port: 3000,https: false,},css: {preprocessorOptions: {scss: {additionalData: `$injectedColor: orange;`,},},}, });
在对应的文件中编写cesium代码
<template><div id="cesiumContainer"></div> </template> <script setup lang="ts"> import { Viewer } from "cesium"; import { onMounted } from "vue"; onMounted(() => {window.Viewer = new Viewer("cesiumContainer", {animation: true, // * 左下角圆盘 速度控制器shouldAnimate: true, // * 当动画控件出现,用来控制是否通过旋转控件,旋转场景baseLayerPicker: false, // * 右上角图层选择器fullscreenButton: false, // * 右下角全屏按钮vrButton: false, // * 右下角vr按钮homeButton: false, // * 右上角地图恢复到初始页面按钮selectionIndicator: false, // * 点击后地图上显示的选择控件infoBox: false, // * 右上角鼠标点击后信息展示框sceneModePicker: false, // * 右上角2D和3D之间的切换timeline: true, // * 页面下方的时间条navigationHelpButton: false, // * 右上角帮助按钮navigationInstructionsInitiallyVisible: false, // * 是否展开帮助scene3DOnly: true, // * 如果设置为true,则所有几何图形以3D模式绘制以节约GPU资源useDefaultRenderLoop: true, // * 控制渲染循环showRenderLoopErrors: false, // * HTML面板中显示错误信息useBrowserRecommendedResolution: true, // * 如果为true,则以浏览器建议的分辨率渲染并忽略window.devicePixelRatioautomaticallyTrackDataSourceClocks: true, // * 自动追踪最近添加的数据源的时钟设置orderIndependentTranslucency: true, // * 如果为true并且配置支持它,则使用顺序无关的半透明性shadows: false, // * 阴影效果projectionPicker: false, // * 透视投影和正投影之间切换requestRenderMode: true, // * 在指定情况下进行渲染,提高性能});window.Viewer._cesiumWidget._creditContainer.style.display = "none"; // * 隐藏版权信息window.Viewer.scene.globe.depthTestAgainstTerrain = true; // * 开启深度测试 }); </script> <style scoped> #cesiumContainer {width: 100%;height: 100%; } </style>
vite + vue3 + ts集成Cesium相关推荐
- vite+vue3+ts项目搭建之集成qiankun让其成为子应用模板(vite+vue3+ts+qiankun项目)—新增主应用在线地址可以进入vue2/vue3子应用
前言 以下操作,是续接之前 第四步 --即:vite+vue3+ts+pinia+element-plus项目已完成搭建好,可以直接业务开发了 主应用技术栈:vue2+webpack+js 集成qia ...
- 分享一个基于Vue3+TS构建Cesium组件库
分享一个基于Vue3+TS构建Cesium组件库 点击进入 Vue Cesium官网 //vc-navigation <template><el-row ref="view ...
- vite+vue3+ts+element-plus项目搭建--超详细
vite+vue3+ts+element-plus项目搭建–超详细 vite 作用 快速的冷启动:不需要等待打包操作: 即时的热模块更新:替换性能和模块数量的解耦让更新飞起: 真正的按需编译:不再等待 ...
- vite+vue3+ts+ant design vue+tailwindcss搭建前端web应用(2)
回顾 上篇文章地址:vite+vue3+ts+ant design vue+tailwindcss搭建前端web应用(1)_konsei的博客-CSDN博客 上篇文章搭建了vue3项目,引入了ant ...
- vite+vue3+ts框架搭建问题记录
404 按官网提示执行npm init vite@latest报错 node版本太低,更新node版本即可,window不能使用命令行更新,重新下载node安装包. 下载地址用下载 | Node.js ...
- vite+vue3+ts使用i18n
vue3使用i18n必须使用9.*版本 "vue-i18n": "^9.2.2" 目录 1.下载使用 1.1.创建配置 1.2.基本使用 1.3.这时会有一个警 ...
- vite+vue3+ts项目插件使用(提高开发效率vite+vue3插件使用)新增在线预览地址
在线预览 Link:https://wocwin.github.io/wocwin-admin/ 一.@vitejs/plugin-vue-jsx vite+vue3项目全面支持jsx语法 npm i ...
- vite+vue3+TS项目引入antd-vue的问题记录
文章目录 1.vite创建的vue+TS项目引入antd-vue 2.antd-vue定制主题报错 记录博,用于记录Vue3项目中遇到的问题 1.vite创建的vue+TS项目引入antd-vue 由 ...
- 用 Vite+Vue3+Ts 搭建通用后台管理系统
大厂技术 高级前端 Node进阶 点击上方 程序员成长指北,关注公众号 回复1,加入高级Node交流群 通用后台管理系统整体架构方案(Vue) 项目创建,脚手架的选择(vite or vue-cl ...
最新文章
- hexo的next主题个性化教程 打造炫酷网站
- scala 定义空list_Scala的存在类型
- Linux安装最新Redis
- 常见的保险种类,险种分类介绍
- 「数据分析」Sqlserver中的窗口函数的精彩应用之数据差距与数据岛(含答案)...
- Oracle的resetlogs机制浅析
- 谁说技术男不浪漫!90后程序员2天做出猫咪情绪识别软件
- jQuery源码研究学习笔记(二)
- C#socket通信时,怎样判断socket双方是否断开连接
- python 生成excel_python 数据生成excel导出(xlwt,wlsxwrite)代码实例
- fastjson将json字符串转化为java对象
- php保存文件的方法,php实现编辑和保存文件的方法
- 达梦数据库管理工具介绍
- win10系统对计算机要求,Win10系统对电脑配置要求 win10专业版教程
- CSS消除absolute 的影响
- 分布式链路监控Zipkin + EKL + RabbitMQ
- Praat脚本-006 | 批量修改删除复制某一层
- Spring JMS CLIENT_ACKNOWLEDGE
- php 字符串替换中文,PHP中文字符串替换其中为*的方法
- Safari(苹果)浏览器和IE浏览器修改UserAgent方法