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

news2024/10/5 21:14:21

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

这里我用的是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.coloradmin.cn/o/1875480.html

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

相关文章

kafka-Stream详解篇(附案例)

文章目录 Kafka Stream 概述Kafka Stream 概念Kafka Stream 数据结构入门案例一需求描述与分析配置KafkaStream定义处理流程声明Topic接收处理结果发送消息测试 入门案例二需求描述与分析定义处理流程接收处理结果声明Topic 更多相关内容可查看 Kafka Stream 概述 Kafka Strea…

qt实现打开pdf(阅读器)功能用什么库比较合适

关于这个问题&#xff0c;网上搜一下&#xff0c;可以看到非常多的相关博客和例子&#xff0c;可以先看看这个总结性的博客&#xff08;https://zhuanlan.zhihu.com/p/480973072&#xff09; 该博客讲得比较清楚了&#xff0c;这里我再补充一下吧&#xff08;qt官方也给出了一些…

【漏洞复现】飞企互联——SQL注入

声明&#xff1a;本文档或演示材料仅供教育和教学目的使用&#xff0c;任何个人或组织使用本文档中的信息进行非法活动&#xff0c;均与本文档的作者或发布者无关。 文章目录 漏洞描述漏洞复现测试工具 漏洞描述 飞企互联-FE企业运营管理平台是一个基于云计算、智能化、大数据…

【LeetCode】接雨水

目录 一、题目二、解法完整代码 一、题目 给定 n 个非负整数表示每个宽度为 1 的柱子的高度图&#xff0c;计算按此排列的柱子&#xff0c;下雨之后能接多少雨水。 示例 1&#xff1a; 输入&#xff1a;height [0,1,0,2,1,0,1,3,2,1,2,1] 输出&#xff1a;6 解释&#xff…

力扣 移除元素

class Solution {public int removeElement(int[] nums, int val) {int left 0;for(int right 0;right<nums.length;right){if(nums[right] ! val){nums[left] nums[right];left;}}return left;} }

2000-2022年 省、市、县三级逐年归一化植被指数NDVI

NDVI&#xff08;归一化植被指数&#xff09;是一种重要的遥感指数&#xff0c;广泛应用于植被生长状况的监测和评估。以下是对省、市、县三级逐年归一化植被指数NDVI数据的介绍&#xff1a; 数据简介 定义&#xff1a;NDVI是一种基于植被在红光和近红外波段反射特性的遥感指…

Java学习 - Redis缓存问题与优化

缓存收益与成本 收益 加速读写降低后端、持久层的负载和压力 成本 可能导致数据不一致代码运维成本redis节点运维成本 缓存更新策略 策略一致性维护成本介绍LRU/LIRS算法剔除最差底剔除最近最少使用的数据超时剔除较差底定时删除、惰性删除主动更新最好高持久层更新&#x…

数学建模---最小生成树问题的建模~~~~~Matlab代码

目录 1.相关概念 &#xff08;1&#xff09;什么是树 &#xff08;2&#xff09;生成树和最小生成树&#xff1a; 2.适用赛题 &#xff08;1&#xff09;赛题分类 &#xff08;2&#xff09;不同之处 3.两种算法 &#xff08;1&#xff09;prim算法 &#xff08;2&…

【后端】Nginx+lua+OpenResty高性能实践

文章目录 9. HTTPS安全认证9.1 证书9.2 证书获取方式9.3 自签证书-openssl工具9.4 Nginx配置HTTPS 10. websocket转发配置100.常遇的问题100.1 host 【后端&网络&大数据&数据库目录贴】 9. HTTPS安全认证 http协议问题&#xff1a; 明文传输&#xff0c;有被第三方…

【redis】Redis AOF

1、AOF的基本概念 AOF持久化方式是通过保存Redis所执行的写命令来记录数据库状态的。AOF以日志的形式来记录每个写操作&#xff08;增量保存&#xff09;&#xff0c;将Redis执行过的所有写指令记录下来&#xff08;读操作不记录&#xff09;。AOF文件是一个只追加的文件&…

文心一言4.0免费使用

领取&安装链接&#xff1a;Baidu Comate 领取季卡 有图有真相 原理&#xff1a;百度comate使用文心一言最新的4.0模型。百度comate目前免费使用&#xff0c;可以借助comate达到免费使用4.0模型目的。 如何获得 点击「Baidu Comate 领取季卡 -> 领取权益」&#xff0…

分享一个自学AI的文档-通往AGI之路

通往AGI之路-自学神器 这是是一个有关AI知识的开源文档。 但是&#xff0c;我认为这是小白学习AI的最强王者&#xff0c;每一个想学习AI、想使用AI的人都可以把它设为首页&#xff0c;从它开始。 飞书文档&#xff1a;通往AGI之路 通往AGI之路是由一群热爱A|的专家和爱好者…

[数据库]索引机制

目录 索引机制 索引的类型 索引使用 哪些适合添加索引 ​编辑 索引机制 当没有索引的时候, 如下示例,在找到id等于1的时候, 仍然会往下继续查找, 进行全表扫描, 因为它认为下面也有可能还会有1 加上索引之后进行二叉树查找, 找到1之后, 发现1的左边没有了, 右边也没有了就停…

我关于Excel使用点滴的笔记

本篇笔记是我关于Excel使用点滴的学习笔记&#xff0c;摘要和地址链接列表。临时暂挂&#xff0c;后面可能在不需要时删除。 (笔记模板由python脚本于2024年06月28日 12:23:32创建&#xff0c;本篇笔记适合初通Python&#xff0c;熟悉六大基本数据(str字符串、int整型、float浮…

GPT-5 一年半后发布,对此你有何期待?

IT之家6月22日消息&#xff0c;在美国达特茅斯工程学院周四公布的采访中&#xff0c;OpenAI首席技术官米拉穆拉蒂被问及GPT-5是否会在明年发布&#xff0c;给出了肯定答案并表示将在一年半后发布。此外&#xff0c;穆拉蒂在采访中还把GPT-4到GPT-5的飞跃描述为高中生到博士生的…

find()方法——字符串首次出现的索引位置

自学python如何成为大佬(目录):https://blog.csdn.net/weixin_67859959/article/details/139049996?spm1001.2014.3001.5501 语法参考 find()方法实现查询一个字符串在其本身字符串对象中首次出现的索引位置&#xff0c;如起始位置从11到结束位置17之间子字符串出现的位置&a…

使用Endnote中英文等的实现和GB7714格式

Endnote是一款被广泛使用的文献管理软件&#xff0c;其是SCI&#xff08;Thomson Scientific 公司&#xff09;的官方软件&#xff0c;支持国际期刊的参考文献格式有3776 种【也可以自定义期刊引用格式】。 软件非常方便科研狗进行文献整理&#xff0c;写笔记&#xff0c;做备…

深度学习经典检测方法概述

一、深度学习经典检测方法 two-stage&#xff08;两阶段&#xff09;&#xff1a;Faster-rcnn Mask-Rcnn系列 one-stage&#xff08;单阶段&#xff09;&#xff1a;YOLO系列 1. one-stage 最核心的优势&#xff1a;速度非常快&#xff0c;适合做实时检测任务&#xff01; 但是…

Spring简单学习

Spring简单学习 spring中的设计模式工厂模式简单工厂模式工厂方法模式 Springmvc简单学习MVC模式Spring MVC 常用组件Spring MVC 工作流程 [Spring IOC](https://juejin.cn/post/6983957368115560485#heading-3)IOC是什么使用IOCSpring提供的IOC容器Spring的IOC实现原理**Root …

第4章_USB 设备编程

文章目录 4.1 USB 学习指南4.1 USB 学习指南 4.2 USB 系统硬件框架和软件框架4.2.1 实验现象4.2.2 硬件框架4.2.3 软件框架 4.3 软件工程师眼里的 USB 电气信号4.3.1 USB 设备状态切换图4.3.2 硬件线路4.3.3 电子信号4.3.4 低速/全速信号电平4.3.5 高速信号电平4.3.6 设备连接与…