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,一经查实,立即删除!

相关文章

Kylin支持哪些数据源,它们之间有什么区别

Apache Kylin支持多种数据源&#xff0c;这些数据源为Kylin提供了从不同类型和存储方式的数据中获取和处理数据的能力。以下是Kylin支持的主要数据源及其之间的区别&#xff1a; Apache Hadoop HDFS&#xff1a; 描述&#xff1a;HDFS是Hadoop生态系统中用于存储大数据的文件系…

Node.js简介

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

鸿蒙系统的前世今生

2019年8月9日&#xff0c;华为在开发者大会上发布EMUI 10的同时宣告了HarmonyOS 1.0的诞生。鸿蒙诞生的背景是&#xff0c;美限制华为与谷歌以及其他美国科技公司开展业务。 前华为开发者大会上&#xff0c;HarmonyOS NEXT&#xff08;原生鸿蒙&#xff09;正式公布&#xff0c…

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

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

Java基础知识-线程池

1、为什么要用线程池&#xff1f; 创建线程要花费昂贵的资源和时间&#xff0c;如果任务来了才创建线程那么响应时间会变长&#xff0c;而且一个进程能创建的线程数 有限。为了避免这些问题&#xff0c;在程序启动的时候就创建若干线程来响应处理&#xff0c;它们被称为线程池&…

使用pywinauto自动重连easyconnect

启动easyconnect后&#xff0c;运行该脚本&#xff0c;实现自动重连。需要填一下连接的地址&#xff0c;用户名和密码(替换一下脚本里的xxx) from pywinauto import application from pywinauto import timings import time# 初始化应用程序对象 app1 application.Applicatio…

2710. 移除字符串中的尾随零 Easy

给你一个用字符串表示的正整数 num &#xff0c;请你以字符串形式返回不含尾随零的整数 num 。 示例 1&#xff1a; 输入&#xff1a;num "51230100" 输出&#xff1a;"512301" 解释&#xff1a;整数 "51230100" 有 2 个尾随零&#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…

Spring:Spring中分布式事务解决方案

一、前言 在Spring中&#xff0c;分布式事务是指涉及多个数据库或系统的事务处理&#xff0c;其中事务的参与者、支持事务的服务器、资源管理器以及事务管理器位于分布式系统的不同节点上。这样的架构使得两个或多个网络计算机上的数据能够被访问并更新&#xff0c;同时将这些操…

使用通用的响应格式

使用泛型响应类&#xff08;或者类似的响应封装类&#xff09;在网络编程和API设计中有很多好处&#xff0c;包括但不限于以下几点&#xff1a; 统一响应格式&#xff1a; 使用R<T>可以确保API的所有响应都遵循相同的格式&#xff0c;这有助于客户端更容易地解析和处理响…

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

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

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

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

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

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

Python提供API给JAVA调用,实现Python和Java之间的交互

一、Java 调用Python 提供的API接口&#xff0c;有多种方法&#xff0c;本文通过Python 提供的Rest API进行调用 二、在Python中创建一个REST API&#xff0c;你可以使用许多框架&#xff0c;其中两个最流行的框架是Flask和Django REST framework。这两个框架都提供了创建REST…

Dockerfile详情,Django项目中使用Dockerfile

Dockerfile详情&#xff0c;Django项目中使用Dockerfile 目录 Dockerfile详情&#xff0c;Django项目中使用Dockerfile介绍常用指令Dokcerfile部署Django项目安装Docker获取项目源码Dockerfile文件构建Docker镜像运行Docker容器 介绍 Dockerfile是一个文本文件&#xff0c;一般…

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

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

提升 Selenium 测试稳定性的秘诀:深入理解等待 API 的使用

目录 为什么需要等待Selenium 等待 API 简介隐式等待显式等待Fluent Wait等待策略的选择示例代码总结 正文 1. 为什么需要等待 在 Web 自动化测试中&#xff0c;等待是一个关键因素。网络应用通常是动态的&#xff0c;页面加载时间、元素的显示时间都可能不同步。直接操作这…

致敬经典:在国产开源操作系统 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…