Vue：不使用webpack情况下将Cesium引入到Vue项目中

最新推荐文章于 2024-07-25 15:48:23 发布

KaiSarH

最新推荐文章于 2024-07-25 15:48:23 发布

阅读量1.2k

点赞数 2

分类专栏： Vue

本文链接：https://blog.csdn.net/KaiSarH/article/details/111313100

版权

Vue 专栏收录该内容

38 篇文章 10 订阅

订阅专栏

刚接触Vue不久，对webpack还不是特别熟练，但是百度道德方法大都是基于Webpack配置的Cesium，不易操作且容易出错

简便方法：借助插件`vue-cli-plugin-cesium`帮我们配置

官方文档：vue-cli-plugin-cesium

使用步骤：

在这里插入图片描述

安装完成后

在main.js中
在这里插入图片描述

// 8. 引入cesium并挂载到Vue上
import Cesium from 'cesium/Cesium'
import 'cesium/Widgets/widgets.css'

Vue.prototype.Cesium = Cesium

在组件中实例化，就可以成功将cesium引入到项目中了
在这里插入图片描述

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

KaiSarH

关注关注

2
点赞
踩
6

收藏

觉得还不错? 一键收藏
打赏
2
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

Vue：不使用webpack情况下将Cesium引入到Vue项目中，社招面试心得

2401_83977580的博客

04-04

623

一个好的心态和一个坚持的心很重要，很多冲着高薪的人想学习前端，但是能学到最后的没有几个，遇到困难就放弃了，这种人到处都是，就是因为有的东西难，所以他的回报才很大，我们评判一个前端开发者是什么水平，就是他解决问题的能力有多强。CodeChina开源项目：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】分享一些前端面试题以及学习路线给大家一个人可以走的很快，但一群人才能走的更远。如果你从事以下工作或对以下感兴趣，欢迎戳这里加入程序员的圈子，让我们一起学习成长！

vue2.0项目集成Cesium的实现方法

12-09

在已有项目中执行, npm i cesium 修改配置 build/webpack.base.conf.js 1、定义 Cesium 源码路径 const cesiumSource = '../node_modules/cesium/Source' 'use strict' const path = require('path') const ...

2 条评论您还未登录，请先登录后发表或查看评论

vue项目引入cesium,创建3d地球,快速上手~

白云苍狗

05-23

4254

vue项目中简单快速引入cesium,创建3d地球,简单封装自己的cesium

Vue+cesium二次开发实例

最新发布

m0_58786911的博客

07-25

1914

首先使用vue create vue-demo(自定义项目名)创建一个vue3项目接下来选择自定义配置，这里我们选择Router,其他几个按需选择选择vue3版本这里选择否（输入N），其他几项可以跳过，回车即可。

vue3中使用cesium

bighead的博客

03-20

1745

Cesium是一个开源的JavaScript库，专门用于创建3D地球和2D地图的Web应用程序。它提供了丰富的功能和工具，使得开发人员能够轻松地构建出高质量的地理空间可视化应用。

vue3【vite】中使用cesium

11-27

3706

【代码】vue3【vite】中使用cesium。

vue3.x中使用cesium，vue3.x+Cesium

05-04

在vue3.x版本中使用cesium，基于vue-cli创建项目，手动配置webpack，资源已配置好，下载完进入项目下npm install 安装依赖后就可以运行了

cesium-vue-webpack:Cesium+Vue+Webpack框架

05-06

Cesium 1.63版本以后，不再使用AMD模式，而这个项目主要依赖AMD模式来加载，所以目前已不能使用。Cesium 1.62以下的版本仍可使用。需要最新版Cesium+Vue模板请移步这里： vtxf 20190108 前言之前使用Vue时，老是...

vue3集成Cesium

Raccon_的博客

10-10

619

笔记

cesium+vue

梧桐芊羽的博客

05-15

576

安装依赖 yarn add -D cesium vite vite-plugin-cesium 创建 vite.config.js import { defineConfig } from 'vite'; import cesium from 'vite-plugin-cesium'; // 引入插件 export default defineConfig({ plugins: [cesium()], }); 默认不设置加载出来的cesium如下所示，若要隐藏右上角按钮如下代码所示： <t

cesium-vue-webpack-master.zip

06-24

将cesium与vue前端框架连接起来，在vue中来对cesium进行开发，目前已经实现的有全屏和回到初始位置等功能。

创建vue3项目并集成cesium插件运行

nandao158的博客

03-23

4431

开发人员可以根据需要自定义 Git 钩子脚本，并将其放置在 .husky 文件夹中相应的钩子文件中，例如 pre-commit 钩子脚本会在提交代码前执行。配置 Husky 工具的方式通常是在项目的 package.json 文件中添加相应的配置项，例如指定钩子脚本的路径和需要执行的命令等。Source文件夹是Cesium整个项目工程的重中之重，涉及到的所有类的源码和自定义shader（渲染）源码都存储在此文件夹里，可以通过阅读源码研究每个类、属性、方法及事件的实现原理。大概是找不到cesium相关类。

Cesium+Vue

weixin_42270571的博客

08-28

2119

点线面：使用vue，通过存储状态的方法，在cesium中调用相同的函数，在Cesium的点击事件中：注意：将画线的点用全局变量存储，并在点击事件时判断下是否当前还处于这个状态，如果不处于则清楚数组里的数据。再次点击时重新画线段和多边形通过vuex中的$store 进行对当前按钮的状态存值在Cesium组件中对vuex中的存入的值进行获取，在vue中，获取vuex的值的方法放...

VUE3构建Cesium项目

damadashen的博客

05-21

6600

使用VUE3构建cesium项目

vue 中使用 cesium

大家好，我是+V

12-27

9349

vue 中使用 cesium 我是在 vue 项目里面使用的 cesium，但是呢，有点问题，就是有些语法在js转vue的时候有些许的限制，比如说js中相对路径引入文件是一切OK的，vue 也能解决，但是呢，在引入的文件中又引用了其他的文件，vue 处理起来就不是特别的好用，所以说，我是直接在 vue 文件里面使用 iframe 标签引入的 html 文件来实现接入的，而vue和iframe之间的通信采用的 postMessage 方式实现，下面就稍微介绍一下。 vue项目引入cesium 这个相对来说

【在Vue项目上使用cesium】

m0_45991266的博客

11-16

3117

在Vue项目上使用cesium,我主要是为了对ceisum项目进行二次开发

Cesium.js基础使用（vue）

Alone_Endeavor的博客

07-04

5425

之后就可以访问高清页面；通过以下官网地址申请。

vue使用cesium

qq_41713136的博客

10-09

6960

cesium.js

Vue2中引入cesium

09-18

Cesium是一个用于构建3D地理信息系统的开源库，在Vue2中引入Cesium需要一些步骤： 1. 安装Cesium：在你的项目中使用 npm 安装 cesium。 ``` npm install cesium ``` 2. 在 main.js 中引入Cesium： ``` import Vue from 'vue' import App from './App.vue' import * as Cesium from 'cesium/Cesium' Vue.config.productionTip = false new Vue({ render: h => h(App), }).$mount('#app') ``` 3. 在 .vue 文件中使用Cesium： ``` <template> <div class="cesiumContainer" ref="cesiumContainer"></div> </template> <script> export default { mounted() { const viewer = new Cesium.Viewer(this.$refs.cesiumContainer) }, } </script> <style> .cesiumContainer { height: 100%; width: 100%; left: 0; top: 0; bottom: 0; right: 0; position: absolute; } </style> ``` 以上是Vue2中引入Cesium的基本流程。希望能帮到您！