当前位置: 首页 > java >正文

vue3引入cesium完整步骤

1、安装cesium

yarn add cesium

2、将node_modules中cesium目录下的Build/Cesium 中 Assets、ThirdParty、Workers复制到public。将Widgets目录复制到src目录下,如assets目录
在这里插入图片描述
3、引入cesium

import * as Cesium from 'cesium';
import '@/assets/Widgets/widgets.css';

4、设置cesium静态资源路径

window.CESIUM_BASE_URL = './';

5、设置cesium token

Cesium.Ion.defaultAccessToken =  '你的token'

6、初始化

<template><div class="map-container" ref="cesiumContainer"></div>
</template><script setup>
import { ref, onMounted } from 'vue';
import * as Cesium from 'cesium';
// 将node_modules中cesium目录下的Build/Cesium 中的Assets、ThirdParty、Workers复制到public,
// 将node_modules中cesium目录下的Build/Cesium 中的Widgets目录复制到src目录下并引入
import '@/assets/Widgets/widgets.css';// 设置cesium静态资源路径
window.CESIUM_BASE_URL = './';
// 设置cesium ion token
Cesium.Ion.defaultAccessToken = '你的token';const cesiumContainer = ref(null);let viewer;onMounted(() => {viewer = new Cesium.Viewer(cesiumContainer.value);
});
</script>
<style scoped lang="less">
.map-container {width: 100%;height: 100%;
}
</style>

在这里插入图片描述

http://www.xdnf.cn/news/15624.html

相关文章:

  • NVIDIA 驱动安装失败问题排查与解决(含离线 GCC 工具链安装全过程)
  • 如何防止GitHub上的敏感信息被泄漏?
  • Visual Studio C++编译器优化等级详解:配置、原理与编码实践
  • imx6ull UI开发
  • 20250718-1-Kubernetes 应用程序生命周期管理-应用部署、升级、弹性_笔记
  • 短视频矩阵的时代结束了吗?
  • 【推理的思想】程序正确性证明(一):演绎推理基础知识
  • 网络编程(modbus,3握4挥)
  • 代码随想录算法训练营第二十四天
  • 包管理工具npm cnpm yarn的使用
  • 【47】MFC入门到精通——MFC编辑框 按回车键 程序闪退问题 ,关闭 ESC程序退出 问题
  • LVS集群
  • Python编程进阶知识之第二课学习网络爬虫(requests)
  • java-字符串和集合
  • JAVA中的Map集合
  • wireshark的常用用法
  • c#笔记之方法的形参列表以及方法重载
  • 测试学习之——Pytest Day3
  • 支付宝智能助理用户会话实时统计:Flink定时器与状态管理实战解析
  • Adam优化器
  • IMU噪声模型
  • 【数据结构】链表(linked list)
  • PostgreSQL 中的 pg_trgm 扩展详解
  • 命名实体识别15年研究全景:从规则到机器学习的演进(1991-2006)
  • Python 基础语法与数据类型(十三) - 实例方法、类方法、静态方法
  • SAP-ABAP:SAP的‘cl_http_utility=>escape_url‘对URL进行安全编码方法详解
  • Linux Swap区深度解析:为何禁用?何时需要?
  • 【程序地址空间】虚拟地址与页表转化
  • 基于Rust游戏引擎实践(Game)
  • 线上项目https看不了http的图片解决