vue3创建项目到引入cesium

最新推荐文章于 2024-09-29 01:11:37 发布
最新推荐文章于 2024-09-29 01:11:37 发布
阅读量1.2k 收藏 3
点赞数 1
分类专栏： vue3引入cesium vue3创建项目 文章标签： vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_44737915/article/details/128973558
版权
本文介绍了如何使用Vite初始化项目，配置别名，安装和配置Sass以及Cesium。在Vite.config.js中设置了基础路径、服务器配置和解析别名。在tsconfig.json中配置了路径映射以解决模块找不到的问题。此外，还引入了Cesium库，并在index.html中加载。最后，为了解决TypeScript的全局引用问题，创建了globe.d.ts来声明全局变量。
摘要由CSDN通过智能技术生成

一：创建项目

npm init vite@latest

二：进入，安装依赖

三：配置依赖，设置别名，方便使用@

npm install @types/node --save-dev

然后在vite.config.js中配置

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { resolve } from 'path'

export default defineConfig({
  plugins: [vue()],
  //解决“vite use `--host` to expose”
  base: './',	//不加打包后白屏
  server: {
    host: '0.0.0.0',
    port: 8080,
    open: true
  },
  resolve: {
    //别名配置，引用src路径下的东西可以通过@如：import Layout from '@/layout/index.vue'
    alias: [
      {
        find: '@',
        replacement: resolve(__dirname, 'src')

      }
    ],
    // 类型： string[] 导入时想要省略的扩展名列表。
    extensions: ['.js', '.ts', '.jsx', '.tsx', '.json', '.vue', '.mjs']
  }
})

配置完成之后可能会报错，找不到模块，需要在tsconfig.json文件中添加

"baseUrl": "./",
    "paths":{
    "@": ["src"],
    "@/*": ["src/*"],

四：引入sass和sass-loader

//安装sass库
npm install -D sass sass-loader

同时修改style.css样式文件：

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

五：引入cesium

//下载Cesium包
npm install cesium -S

将cesium\Build下的Cesium文件夹拷贝粘贴到项目根目录public文件夹下，然后在index.html文件中引入Cesium.js和widgets.css

<!DOCTYPE html>
<html lang="en">
 
<head>
  <meta charset="UTF-8" />
  <link rel="icon" type="image/svg+xml" href="/vite.svg" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Vite + Vue + TS+ Cesium</title>
  <script src="/Cesium/Cesium.js"></script>
  <link rel="stylesheet" href="/Cesium/Widgets/widgets.css">
</head>
 
<body>
  <div id="app"></div>
  <script type="module" src="/src/main.ts"></script>
</body>
 
</html>

然后在项目中使用cesium,但是在App.vue中我们直接以window对象的形式全局引用Cesium，并且将创建的三维场景Viewer抛出到window全局，通常情况下，这样是完全没问题的，但是TypeScript 需要开发者做到先声明后使用。
需要在项目根目录下创建globe.d.ts文件，并生命全局变量

declare interface Window {
  Cesium: any;
  Viewer: any;
}
纵使相逢应不识!
关注
专栏目录
vue3.x中使用cesium，vue3.x+Cesium
05-04
在vue3.x版本中使用cesium，基于vue-cli创建项目，手动配置webpack，资源已配置好，下载完 进入项目下npm install 安装依赖后就可以运行了
vue2.X+Cesium
09-23
在"antd+vue2.X+Cesium加载三维球的示例"中，我们看到Ant Design被引入到项目中。Ant Design是阿里巴巴开发的一套优秀的前端UI组件库，提供了丰富的表格、按钮、表单、导航等组件，使得开发者可以快速构建出美观且...
vue3项目中引入Cesium
最新发布
m0_62317155的博客
09-29 1163
01创建Cesium项目
Cesium 在vue中如何引入
qq_37732512的博客
12-06 4016
这篇文章并没有从优化、打包、最优引入方面来分析，仅仅是列出了几种引入方式，主要是在平常开发中，这些也确实够了，最近又看了一位博主的文章，已经说的很明白了，从Cesium前置知识、到打包优化、再到选择最优引入，这一篇文章已经够用了。教程 - 在 Vue3+Ts 中引入 CesiumJS 的最佳实践@2023。
vue引入cesium
song_song0927的博客
10-11 3232
vue-cli2引入cesium
vue3中使用cesium
bighead的博客
03-20 1833
Cesium是一个开源的JavaScript库，专门用于创建3D地球和2D地图的Web应用程序。它提供了丰富的功能和工具，使得开发人员能够轻松地构建出高质量的地理空间可视化应用。
Vue2创建项目并配置Cesium加载三维地图
03-05
1.基于Vue2 的Cesium三维地图框架; 2.已引入elementui组件 已完成对cesium的加载配置安装及测试; 3.可在该框架上开发、发布打包等;...4.该框架没有其它冗余依赖等，可以直接到项目使用，无版权控制。
vue2.0项目集成Cesium的实现方法
10-16
Vue 2.0 项目集成 Cesium 是一种将流行的3D地球可视化库 Cesium 引入到基于 Vue.js 的前端应用程序中的技术。Cesium 提供了丰富的地理空间数据展示功能，使得开发人员能够构建交互式的三维地球应用。以下是如何在 ...
基于Vue 3实现的Cesium大屏可视化项目源代码，展示了Cesium的一些基础示例
05-29
1. **集成Cesium**：Vue 3组件中引入Cesium库，并在Vue实例或组件的`setup()`中初始化Cesium的 Viewer 对象。 2. **创建3D模型**：通过Entity API加载3D模型，如建筑物、车辆或其他物体，并控制其位置、旋转和缩放...
vue+cesium的小项目
03-18
关于vue+cesium的小例子，不用webpack，而是main.js导入，非常希望可以帮助到你，因为我在这个vue+cesium的引入头疼了半天，官网也没有说明怎么引入vue，所以自己摸索一下，发了出来
Vue3(Vite) 安装 Cesium
ッ微凉的博客
08-16 366
安装、引入、初始化三维Cesium
vue3中引用cesium，初步搭建
irisMoon06的博客
02-06 889
vue3中引用cesium，初步搭建
vue3集成Cesium
Raccon_的博客
10-10 635
笔记
在vue3中使用Cesium保姆篇
彭于晏的博客
01-05 6462
当然我们如果在项目中使用三位地图的话肯定不要左下角的的logo的，由于cesium的api没办法关闭，所以就只能用css样式来控制了，代码中用到了cesium的token,如果不知道token在哪取的话可以看这篇文章。在cesium中用到的坐标是笛卡尔坐标，所以我们的经纬度需要进行转换后才能使用。这样可以让logo隐藏掉但是，由于是在vue3中， v-deep已经废弃了，当然，这个是写在组件加载后的，自然还要引入onMounted。在里面引入刚才下载的插件并使用，代码如下。暂时更到这里，后续还会更新。
cesium学习（一），在vue3项目中引入cesium
weixin_46561899的博客
04-30 652
参考文档：https://blog.csdn.net/weixin_47872719/article/details/136875619。中文网地址：http://cesium.xin/cesium/cn/Documentation1.62/Viewer.html。获取token地址：https://ion.cesium.com/stories。
vue3 使用 vue-cesium
yysyyzy的博客
06-09 1236
/ console.log(Cesium.Cartesian3.fromDegreesArrayHeights(rectangleDrawingOptsStorage.preRenderDatas[index][0].flat()),'阿萨大1231大')// console.log(drawingsRef.value.getDrawingActionInstances()[3].cmpRef.value.renderDatas,'adada阿三大苏asdasd打')if(e.name!
vue项目中引入cesium
weixin_39238200的博客
05-13 1699
市面上的前端框架中，Vue+Cesium 可谓是最佳搭档，一般做 Cesium B 端产品的公司都会使用 Vue，所以后续内容都将基于 Vue 通常情况下，我们要在 Vue 中使用 Cesium，首先要安装 Cesium，然后要在 vue-cli 的 webpack 配置很多东西，对一些有经验的人来说只不过麻烦些，但是对 Cesium 的初学者来说会很痛苦，因为没有使用过，也不知到要怎么配置，只能搜索网上的教程，一步一步踩坑 其实不管是有经验或是初学者，每次写项目重复配置这些东西都很麻烦 vue-cl
在vue项目中引入Cesium 并创建一个模型
05-19
要在Vue项目中引入Cesium，可以使用以下步骤： 1.安装cesium：使用npm或yarn安装Cesium库。 ```bash npm install cesium --save ``` 或者 ```bash yarn add cesium ``` 2.在Vue项目中引入Cesium： 在main.js中添加以下代码： ```javascript import Vue from 'vue' import Cesium from 'cesium/Cesium' import 'cesium/Widgets/widgets.css' Vue.prototype.Cesium = Cesium ``` 3.创建Cesium模型： 在Vue组件中，可以使用以下代码创建一个简单的Cesium模型： ```html <template> <div id="cesiumContainer"></div> </template> <script> export default { mounted() { // 创建cesium viewer const viewer = new this.Cesium.Viewer('cesiumContainer') // 加载模型 const entity = viewer.entities.add({ name: 'model', position: this.Cesium.Cartesian3.fromDegrees(-123.0744619, 44.0503706), model: { uri: './path/to/model.gltf' } }) } } </script> <style> #cesiumContainer { height: 500px; } </style> ``` 在mounted方法中，我们创建一个Cesium Viewer实例，并将其渲染到id为cesiumContainer的div中。然后，我们使用Cesium.entities.add方法添加一个实体，其中包含一个简单的gltf模型。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值