vue2(vue-cli3x[vue.config.js])使用cesium新版(1.117.0)配置过程

看来很多解决方法都没有办法,最后终于。呜呜呜呜

这里我用的是vue-cli去搭建的项目的vue2 项目,其实不建议用vue2搭配cesium。因为目前cesium停止了对vue2的版本更新,现在默认安装都是vue3版本,因此需要控制版本,否则就会报错。只有cesiun为npm install cesium@1.95.0的时候搭配vue2使用不会用报错问题,而搭配使用新版本的cesium会报错。真的头疼,但是最后还是解决出来了。

有2个方法。先说最好用的吧

当然这个配置不仅适用于117版本高版本我感觉都是可以的。

解决步骤:

1. 确认 CesiumJS 安装

首先,确保你已经通过 npm 或 yarn 安装了 CesiumJS:

npm install cesium
# 或者
yarn add cesium
2. 配置 webpack

CesiumJS 是一个复杂的库,包含许多静态资源(如图片、shader等)。正确配置 webpack 是整合 CesiumJS 到 Vue.js 项目的关键。

在你的 webpack 配置中,需要使用 copy-webpack-plugin 插件将 CesiumJS 的静态资源复制到你的构建目录,并且配置 webpack 让它能够识别 CesiumJS 作为一个外部依赖。

示例 webpack 配置(可以在 vue.config.js 或者直接在 webpack 配置中设置):

const CopyWebpackPlugin = require('copy-webpack-plugin');module.exports = {// 其他配置...configureWebpack: {plugins: [new CopyWebpackPlugin([{ from: 'node_modules/cesium/Build/Cesium', to: 'Cesium' }]),],externals: {cesium: 'Cesium',},},// 其他配置...
};

CopyWebpackPlugin: 这是一个 webpack 插件,用于复制文件或整个目录到构建目录。在这里,我们配置它来复制 CesiumJS 的 Build/Cesium 目录下的文件到一个名为 cesium 的目录中。 

externals: 这个配置告诉 webpack 在打包过程中遇到 Cesium 这个模块时不去打包它,而是使用全局变量 Cesium,这要求在运行时,通过外部引入 CesiumJS 库(通常是在 HTML 中通过 <script> 标签引入)。

3. 修改 Vue 组件中的引入方式

在 Vue.js 组件中,根据你的需求选择全局引入或者按需引入 CesiumJS。

全局引入示例:

main.js 中全局引入 CesiumJS:

import Vue from 'vue';
import Cesium from 'cesium';Vue.prototype.Cesium = Cesium;
引入示例:

接下来的使用都跟平时是一样的

在需要使用 CesiumJS 的组件中引入:

<template><div id="cesiumContainer"></div>
</template><script>
import * as Cesium from 'cesium';export default {mounted() {const viewer = new Cesium. Viewer('cesiumContainer');// 在这里使用 Cesium 的其他功能...},
};
</script>
按需引入示例:

在需要使用 CesiumJS 的组件中按需引入:

<template><div id="cesiumContainer"></div>
</template><script>
import 'cesium/Build/Cesium/Widgets/widgets.css';
import { Viewer } from 'cesium';export default {mounted() {const viewer = new Viewer('cesiumContainer');// 在这里使用 Cesium 的其他功能...},
};
</script>

ok。。。接下来是第二种方法

因为以上的配置可能跟某种语法冲突,so备用方案我们才有html的静态引入。

在外面的node_modules/cesium/Build/Cesium。拷贝到在项目的 public 文件夹下根目录中。

第二步,在项目 index.html 文件中,head 标签里面,引入 cesium 的全局样式。

还是在这个文件中,在 body 最后,引入 cesium 源码。。。注意路径。

使用时无需在映入import之类的,检查时候映入成功就是f12输入检查一下

使用实例

<script>
methods: { init() {this.viewer = new Cesium.Viewer('cesiumContainer', {homeButton: false,sceneModePicker: false,baseLayerPicker: false, // 影像切换animation: true, // 是否显示动画控件infoBox: false, // 是否显示点击要素之后显示的信息selectionIndicator: false, // 要素选中框geocoder: false, // 是否显示地名查找控件timeline: true, // 是否显示时间线控件fullscreenButton: false,shouldAnimate: false,navigationHelpButton: false // 是否显示帮助信息控件});}
}mounted() {// this.init();
}
</script>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/diannao/37366.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Node.js简介

一&#xff1a;Node.js简介 Node.js是一个跨平台的JavaScript运行环境&#xff0c;使开发者可以搭建服务器端的JavaScript应用程序 作用&#xff1a;使用Node.js编写服务器端程序 编写数据接口&#xff0c;提供网页资源浏览功能有利于前端工程化&#xff0c;可以集成各种开发…

【力扣高频题】011. 盛最多水的容器

前面的算法文章&#xff0c;更新了许多 专题系列 。包括&#xff1a;滑动窗口、动态规划、加强堆、二叉树递归套路 等。 还没读过的小伙伴可以关注一下&#xff0c;在主页中点击对应链接查看哦~ 接下来的一段时间&#xff0c;将持续 「力扣高频题」 系列文章&#xff0c;想刷 …

idea2024使用springboot3.x系列新建java项目,使用jdk17,启动项目报错

身为一名开发人员&#xff0c;敲代码无数&#xff0c;竟被一个小小启动给我卡了大半天&#xff0c;太丢脸了 报错一&#xff1a;Field infoSysRepository in com.erectile.Impl.PersonalInfoServiceImpl required a bean of type ‘com.erectile.jpa.repository.InfoSysReposit…

IP地址与在线教育平台资源分配优化

IP地址的资源分配与优化策略可以帮助在线教育平台提供更高质量、稳定且个性化的教育服务。 IP地址作为网络设备的标识符&#xff0c;能够为在线教育平台提供有关学生地理位置和网络环境信息。通过对学生IP地址的分析&#xff0c;平台可以初步了解学生所在的地区、网络服务提供商…

回收站的照片删除了怎么找回?

大家在日常使用电脑的过程中&#xff0c;难免会遇到不小心删除重要文件的情况&#xff0c;尤其是珍贵的照片。当我们意识到误删照片时&#xff0c;第一反应通常是去回收站找回。然而&#xff0c;如果连回收站的照片都被删除了&#xff0c;该如何恢复呢&#xff1f;本文将详细探…

【MySQL】事务的快照生成时间点和薛定谔的猫相关?

概述 最近因为工作需要&#xff0c;对MySQL的事务处理进行了一系列测试验证&#xff0c;其中&#xff0c;对于MySQL的事务到底时什么时候生成了数据的快照&#xff0c;结果似乎跟薛定谔的猫理念很像&#xff0c;很有意思&#xff1b;过程我贴出来&#xff0c;有兴趣的朋友可以一…

simulink开发stm32,使用中断模块,无法产生中断,其中包括使用timer模块,以及ADC都无法产生中断,需要注意的地方

1&#xff0c;其中包括使用timer模块&#xff0c;以及ADC都无法产生中断&#xff0c;需要注意的地方 原来是需要在配置文件里开启一下timer的中断&#xff0c;其他模块自动加载ioc就可以了&#xff0c;这个timer需要注意力&#xff0c;需要自己勾选一下 如下图&#xff1a; 看…

致敬经典:在国产开源操作系统 RT-Thread 重温 UNIX 彩色终端

引言 上篇文章里我们向大家介绍了 RT-Thread v5.1.0 的一些新特性。其中包括了终端环境的进一步完善。终端是人机交互的重要接口。实用的终端工具可以显著地提升系统使用者的幸福指数。举例来说&#xff0c;当我们想要修改一些系统配置&#xff0c;或是编写脚本时&#xff0c;一…

Linux——echo命令,管道符,vi/vim 文本编辑器

1.echo 命令 作用 向终端设备上输出字符串或变量的存储数据 格式 echo " 字符串 " echo $ 变 量名 [rootserver ~] # echo $SHELL # 输出变量的值必须加 $ /bin/bash [rootserver ~] # str1" 我爱中国 " # 自定义变量 echo 重定向输出到文件 ec…

MySQL数据库——在Centos7环境安装

MySQL在Centos7环境安装 1.切换root用户 安装与卸载中&#xff0c;用户全部切换成为root&#xff0c;安装好后&#xff0c;普通用户也能使用 2.卸载不要的环境 要将自己环境中有关mysql的全都删除&#xff0c;避免安装过程中被影响 ps axj | grep mariadb 先检查是否有mari…

自制全网最便宜的雷达感应灯光画,成本只需5元

自制全网最便宜的雷达感应灯光画&#xff0c;成本5元 ​ 成本组成&#xff1a;带热释电的人体感应灯&#xff08;0.5元&#xff09;雷达感应模块&#xff08;3.5元&#xff09;首饰盒&#xff08;0.45元&#xff09;微喷油画布&#xff08;1元&#xff09;5.45元 ​ 说一下做灯…

Flutter学习:从搭建环境到运行

一、开发环境的搭建 本文所示内容都是在Windows系统下进行的。 1、下载 Flutter SDK Flutter 官网&#xff08;https://docs.flutter.cn/release/archive?tabwindows&#xff09; 或者通过 git clone -b master https://github.com/flutter/flutter.git 下载 2、配置环境…

[数据集][目标检测]井盖未盖好检测数据集VOC+YOLO格式20123张2类别

数据集格式&#xff1a;Pascal VOC格式YOLO格式(不包含分割路径的txt文件&#xff0c;仅仅包含jpg图片以及对应的VOC格式xml文件和yolo格式txt文件) 图片数量(jpg文件个数)&#xff1a;20123 标注数量(xml文件个数)&#xff1a;20123 标注数量(txt文件个数)&#xff1a;20123 标…

.net 奇葩问题调试经历之2——内存暴涨,来自非托管的内存泄露

📢欢迎点赞 :👍 收藏 ⭐留言 📝 如有错误敬请指正,赐人玫瑰,手留余香!📢本文作者:由webmote 原创📢作者格言:新的征程,我们面对的不仅仅是技术还有人心,人心不可测,海水不可量,唯有技术,才是深沉黑夜中的一座闪烁的灯塔序言 这是一个序列文章,请看以往文…

代码统计工具V1.0.0(支持各种文件类型)

点击下载《代码统计工具&#xff08;支持各种文件类型&#xff09;》 1. 前言 本文介绍了一款使用C#开发的代码行数统计软件。该软件允许用户通过选择文件目录和设置统计项目类型&#xff0c;来统计指定目录下的代码行数。软件提供了三种统计方式&#xff1a;按文件名统计、按…

线性图标绘制指南:从基础到精通

图标在生活中随处可见。相比文字来说&#xff0c;图标可以让人在更短的时间内认知并了解信息&#xff0c;并且大大提升信息的视觉美观性&#xff0c;增加设计的艺术感染力。在用户界面中使用图标&#xff0c;是一种用户熟知的设计模式。而线性图标是通过提炼图形轮廓&#xff0…

jquery动态插件之gsap和TextPlugin

<!DOCTYPE html> <html> <head><title>数字化人才认证数动画</title><script src"https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script><script src"https://cdnjs.cloudflare.com/ajax…

【强化学习】第02期:动态规划方法

笔者近期上了国科大周晓飞老师《强化学习及其应用》课程&#xff0c;计划整理一个强化学习系列笔记。笔记中所引用的内容部分出自周老师的课程PPT。笔记中如有不到之处&#xff0c;敬请批评指正。 文章目录 2.1 动态规划&#xff1a;策略收敛法/策略迭代法2.2 动态规划&#xf…

GD32F4时钟配置

1.前言 硬件&#xff1a;GD32F450 最高时钟频率200MHZ(外部晶振8MHZ) 软件&#xff1a;KEIL(V5.35) 固件包&#xff1a;GD32F4xx_Firmware_Library_V3.2.0 2.时钟树 时钟配置大概流程如下图红线指示&#xff0c;GD32F470的最高频率可以到240MHZ&#xff0c;GD32F450最高…

C++Primer Plus 第十四章代码重用:14.4.4 数组模板示例和非类型参数2

14.4.4 数组模板示例和非类型参数 提示&#xff1a;这里可以添加系列文章的所有文章的目录&#xff0c;目录需要自己手动添加 例如&#xff1a;第一章 Python 机器学习入门之pandas的使用 提示&#xff1a;写完文章后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右…