vue3引入cesium和olcs

首先引入包

pnpm i  olcs;
pnpm i -D vite-plugin-cesium
pnpm i -S cesium

在vite.config.js中配置,参考这位大佬的笔记
添加链接描述

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import cesium from 'vite-plugin-cesium';
// https://vitejs.dev/config/
export default defineConfig({plugins: [vue(),cesium()],
})

在main.js配置

import * as Cesium from 'cesium'
// window['CESIUM_BASE_URL'] = '/assets/cesium/';
window['Cesium'] = Cesium

写个案例,参考大佬的文章
添加链接描述
唯一的区别是我是直接从包里引入的,大佬是将包里的文件拿出来用的

<template><div class="main"><el-checkbox v-model="state.isShow3D" label="三维地球" size="large" @change="switchTo"style="position: absolute;z-index: 99;color: white;" /><div id="cesiumContainer"></div><div id="olContainer"></div></div></template><script setup>
import * as Cesium from 'cesium';
import { onMounted, reactive } from 'vue';
import { ElCheckbox } from 'element-plus';
import 'ol/ol.css'
import { Map, View } from 'ol'
import TileLayer from 'ol/layer/Tile'
import XYZ from "ol/source/XYZ";
// import olcsCamera from "./lib/ol-cesium/Camera.js";
import  olcsCamera from "olcs/Camera";
import OLCesium from "olcs";
const state = reactive({isShow3D: false,element2D: {},element3D: {},camera: {},
});
const switchTo = () => {state.camera.checkCameraChange();state.element2D.style.visibility = state.isShow3D? "hidden": "visible";state.element3D.style.visibility = state.isShow3D? "visible": "hidden";
}onMounted(() => {const cesiumViewer = new Cesium.Viewer("cesiumContainer", { infoBox: false });window.cesiumViewer = cesiumViewer;//挂载到window上
// console.log(new OLCesium,'new OLCesium');const olViewer = new Map({target: "olContainer",layers: [new TileLayer({source: new XYZ({url: "http://t3.tianditu.com/DataServer?T=img_w&x={x}&y={y}&l={z}&tk=5a257cd2df1b3311723bd77b0de14baf",}),}),],view: new View({projection: "EPSG:4326",    //使用这个坐标系center: [104.704968, 31.540962],  //西南科技大学zoom: 5})});state.element2D = document.getElementById("olContainer");state.element3D = document.getElementById("cesiumContainer");state.camera = new olcsCamera(cesiumViewer.scene,olViewer);state.element3D.style.visibility = "hidden";})
</script>
<style lang="less" scoped>
.main {position: relative;height: 100vh;width: 100vw;#cesiumContainer {position: absolute;height: 100vh;width: 100vw;}#olContainer {position: absolute;height: 100vh;width: 100vw;}
}
</style>

放个图片
在这里插入图片描述

在这里插入图片描述

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

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

相关文章

芝麻IP好用吗?来测试了!

作为老牌代理IP服务厂商&#xff0c;芝麻IP和青果网络代理IP都做的不错&#xff0c;市场上几乎可以是有口皆碑了&#xff0c;上次测试了青果网络的代理IP&#xff0c;效果表现得还挺不错&#xff0c;和他们自己宣传的以及客户对他们的评价大差不差。 总的来说&#xff0c;他们家…

交易中的预测和跟随

任何的交易决策&#xff0c;一定是基于某种推理关系的&#xff0c;这种推理关系是基于t时刻之前的状态&#xff0c;得到t时刻之后的结果&#xff0c;我们基于这种推理关系&#xff0c;根据当前的状态&#xff0c;形成了未来结果的某种预期&#xff0c;然后基于这种预期采取相应…

开机弹窗找不到opencl.dll怎么办,教你几种有效的修复方法

在计算机使用过程中&#xff0c;我们经常会遇到一些错误提示&#xff0c;其中之一就是“找不到opencl.dll文件”。这个问题可能会影响到我们的正常使用&#xff0c;因此了解其原因和解决方法是非常必要的。本文将从多个方面对“找不到opencl.dll文件”这一问题进行详细分析和解…

如何修复d3dcompiler43.dll丢失问题,这三种方法可轻松解决

在计算机使用过程中&#xff0c;我们常常会遇到一些错误提示&#xff0c;其中之一就是“计算机缺失d3dcompiler43.dll”。这个问题可能会影响到计算机的正常运行&#xff0c;让我们无法正常使用某些软件或者游戏。那么&#xff0c;究竟什么是d3dcompiler43.dll&#xff1f;为什…

极光公布2024年第一季度财报

2024年6月6日&#xff0c;中国深圳——中国领先的客户互动和营销科技服务商极光&#xff08;Aurora Mobile&#xff0c;纳斯达克股票代码&#xff1a;JG&#xff09;&#xff08;以下称“极光”或“公司”&#xff09;公布截至2024年3月31日第一季度未经审计的财报。 2024年第…

Ubuntu22.04显卡驱动与内核版本不一致解决方案

有时候在使用 GPU 服务器时执行 nvidia-smi 会遇到以下报错&#xff1a; Failed to initialize NVML: Driver/library version mismatch NVML library version: 535.161这说明 Nvidia 显卡驱动与内核版本不一致&#xff0c;我们可以查看一下内核版本&#xff1a; cat /proc/d…

netty-学习

Netty Netty 的核心概念Netty 的主要特性Netty 的应用场景Netty 的基本使用服务器端处理器 总结 代码分析1.心跳检测代码解析类和成员变量userEventTriggered方法总结 4.参数详解ChannelHandlerContext ctxObject evt 事件来源示例&#xff1a;配置 IdleStateHandler事件处理示…

Linux上的电子邮件服务器安装教程

&#x1f341; 作者&#xff1a;知识浅谈&#xff0c;CSDN签约讲师&#xff0c;CSDN博客专家&#xff0c;华为云云享专家&#xff0c;阿里云专家博主 &#x1f4cc; 擅长领域&#xff1a;全栈工程师、爬虫、ACM算法&#xff0c;大数据&#xff0c;深度学习 &#x1f492; 公众号…

浏览器内置对象 window 用法集锦,看这篇就够了

文章导读&#xff1a;AI 辅助学习前端&#xff0c;包含入门、进阶、高级部分前端系列内容&#xff0c;当前是 javascript 的部分&#xff0c;瑶琴会持续更新&#xff0c;适合零基础的朋友&#xff0c;已有前端工作经验的可以不看&#xff0c;也可以当作基础知识回顾。 上面文章…

[网鼎杯 2020 青龙组]singal

记录下angr初使用 这道题是很简单的逻辑 32位 我们提取opcode (你可以用convert) 我是用的IDApython\ import idc adr0x00403040 step4#距离 op[] n10#多少个数据 while(n):op.append(hex(idc.get_wide_dword(adr)))adrstepn-1 print(op)然后我又下断点,提取每个"i&q…

持续总结中!2024年面试必问 20 道 Kafka面试题(十)

上一篇地址&#xff1a;持续总结中&#xff01;2024年面试必问 20 道 Kafka面试题&#xff08;九&#xff09;-CSDN博客 十九、Kafka的ACK机制是什么&#xff1f; Kafka的ACK&#xff08;Acknowledgement&#xff0c;确认&#xff09;机制是确保消息被成功发送和接收的重要部分…

MySQL—多表查询—内连接

一、引言 &#xff08;1&#xff09;内连接查询语法 内连接查询的是两张表的交集部分的数据。&#xff08;也就是绿色部分展示的数据&#xff09; &#xff08;2&#xff09;内连接有两种形式&#xff1a; 1、隐式内连接 语法结构&#xff1a; 2、显示内连接 语法结构&#xf…

pycharm FuncAnimation画动态图不显示, 以及画图

网上的一些方法给出了解决措施&#xff0c;如&#xff1a;https://blog.csdn.net/qq_41725313/article/details/122048864?spm1001.2101.3001.6650.2&utm_mediumdistribute.pc_relevant.none-task-blog-2%7Edefault%7EBlogOpenSearchComplete%7ERate-2-122048864-blog-139…

红酒:如何避免红酒过度氧化

红酒过度氧化是影响其品质的重要因素&#xff0c;尤其是在储存和运输过程中。过度氧化的红酒会失去原有的果香和口感&#xff0c;变得平淡无味。因此&#xff0c;避免红酒过度氧化至关重要。以下是一些进一步的措施&#xff0c;可以帮助您保护云仓酒庄雷盛红酒的品质&#xff1…

QT学习过程中遇到的问题自记

文章目录 前言问题1问题2问题3 前言 学习QT嵌入式实战开发(从串口通信到JSON通信微课视频版)的过程中遇到的几个小问题 问题1 1.将书中的示例代码导入自己的电脑&#xff0c;然后点击工程进去&#xff0c;不能运行&#xff0c;报错 no kits are enabled for this project… 我…

LangChain :构建个人AI代理从这里开始

LangChain&#xff0c;一个强大的工具&#xff0c;允许根据用户输入创建对语言模型和其他工具的复杂调用链。就像拥有一个私人助理&#xff0c;可以根据手头的任务做出决定。本文来分享一下在 LangChain 中使用 Agents 的心路历程。 LangChain中代理的概念 在 LangChain 中&a…

指针还是学不会?跟着小代老师学,进入深入理解指针(4)

指针还是学不会&#xff1f;跟着小代老师学&#xff0c;进入深入理解指针&#xff08;4&#xff09; 1回调函数2qsort使用举例2.1使用qsort函数排序整行数据2.2使用qsort排序结构体数据 3qsort函数的模拟实现 1回调函数 回调函数就是一个通过函数指针调用的函数。 如果你把函数…

小球的种类(ball)

小球的种类 题目描述 小红有 n n n种不同颜色的小球&#xff0c;第 i i i种颜色的小球有 a i a_i ai​个&#xff0c;放在同一个盒子中。 小红每次任意取出 k k k个小球并丢弃&#xff0c;直到盒子中剩余的球数小于 k k k个为止。 小红希望最终盒子里的小球颜色种类尽可能少…

荧光标记Avidin与特定生物分子的靶向结合-星戈瑞

亲和素Avidin是一种具有生物学特性的蛋白质&#xff0c;能够与生物素&#xff08;biotin&#xff09;进行高亲和力结合。通过荧光标记技术&#xff0c;我们可以将荧光基团与Avidin结合&#xff0c;形成荧光标记Avidin&#xff0c;从而实现对特定生物分子的靶向结合和可视化。 …

LeetCode-239.滑动窗口最大值

给你一个整数数组 nums&#xff0c;有一个大小为 k 的滑动窗口从数组的最左侧移动到数组的最右侧。你只可以看到在滑动窗口内的 k 个数字。滑动窗口每次只向右移动一位。 返回 滑动窗口中的最大值 。 示例 1&#xff1a; 输入&#xff1a;nums [1,3,-1,-3,5,3,6,7], k 3 输…