vue3+cesium的初次使用以及初始化的一些配置信息

最新推荐文章于 2025-10-18 19:19:20 发布

原创最新推荐文章于 2025-10-18 19:19:20 发布 · 606 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#npm #前端 #javascript

本文介绍如何安装并配置Cesium 1.94.3版本实现离线地图应用，包括安装步骤、解决webpack版本问题的方法及地球贴图的放置方式。

我使用的版本如下

首先npm install cesium@1.94.3

一、安装

将node_modules中的Cesium文件夹放到public

其中的Widgets复制一份放到src目录下

可能会报错提示webpack版本问题我这里是按百度搜索

在运行就ok了

二、使用

import * as Cesium from "cesium";

import "../../Widgets/widgets.css";

在使用的页面引用， css文件一定要对应路径

然后再onMounted中初始化

如果做离线操作的话需要放置地球贴图

imageryProvider: new Cesium.SingleTileImageryProvider({

url: "./word.jpg",

}),

并且baseLayerPicker为false

关闭水印

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

Zǔ~

关注关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

关于vue3中使用cesium

qq_53742640的博客

05-19

1218

此篇文章是描述关于在vue3中使用cesium的方法和教程；最早的时候关于vue中使用cesium是很混乱的，教程也很少只能挨个踩坑。最近个人又使用了一下，现在还是比较完善的。下面进入正题，希望对一些从事webGIS开发者有所帮助。

vue3.x +Cesium vue3.x中安装使用cesium

csl125的博客

05-04

7189

vue3.x +Cesium vue3.x中安装使用cesium

参与评论您还未登录，请先登录后发表或查看评论

vue3.x中使用cesium，vue3.x+Cesium

05-04

在vue3.x版本中使用cesium，基于vue-cli创建项目，手动配置webpack，资源已配置好，下载完进入项目下npm install 安装依赖后就可以运行了

Vue3与Cesium：轻量版3D地理可视化实践

最新发布

fruge365的博客

10-18

1396

Vue3与Cesium：轻量版3D地理可视化实践

vue3中使用cesium

MonkeyRideDonkey的博客

08-09

2440

3.vue.config.js 配置。1.安装cesium。2.安装loader。

vue3+SuperMap iClient3D for Cesium实现量测功能

qq_43334519的博客

09-16

2107

参考SuperMap iClient3D for Cesium量算源码实现vue3框架下的量算功能

Vue+Cesium场景优化：实现SHP文件的极致场景体验

Vue是一个构建用户界面的渐进式JavaScript框架，而Cesium则是一个开源的三维地球和地图可视化JavaScript库，它们的结合为地理信息系统（GIS）提供了一个全新的视角。随着Web技术的发展，如何在Web端实现高效、流畅的...

使用vue+原生js编写时间轴--cesium三维球

qq_65325528的博客

08-19

1389

当前的时间轴就是利用dom,来进行展示，本来想使用canvas来绘制的，但是后来想到canvas绘制出来后样式不容易修改，就没有使用了，使用dom修改样式特别方便。我们实现时可以首先用除法计算出每一个时间段所需要的宽度，称为tx，然后给时间线添加一个鼠标按下事件，通过事件的回调参数获取当前鼠标在时间线上点击的偏移量，称为offsetx。通过相除得出rx，公式为rx=offsetx/tx。让rx+1就是当前鼠标点击的通过的时间段。然后我们计算更精确的时间，就是把每个时间段分为多个小段，如一个时间段是一个小

html+cesium创建图层树

05-20

如果还需要支持地形或其他复杂模型，则可以在初始化阶段加入更多配置选项。例如，在`terrainProvider`中启用高精度地形数据[^1]。 ```javascript const viewer = new Cesium.Viewer('cesiumContainer', { ...

Cesium1.95中加载模型过多导致内存溢出的解决方案（服务端层面、代码层面、浏览器层面）

duansamve的博客

06-12

1416

GLB → 3D Tiles：将大规模 GLB 模型转换为 3D Tiles 格式，实现分块加载和视锥体裁剪。瓦片化处理：通过 GeoServer 的矢量瓦片模块将数据转换为 MVT 格式，配合 Cesium3DTileset 按需加载可视区域数据。性能分析工具：使用 Chrome DevTools 的 Memory 标签定期拍摄堆快照，定位未释放对象。预加载低精度模型：首次加载时仅提供简化版模型，后续按需加载高精度资源。

Cesium在vue3中的简单使用

qq_45569925的博客

01-15

1876

CesiumJS 是一个开源 JavaScript 库，用于创建具有最佳性能、精度、视觉质量和易用性的世界级 3D 地球仪和地图。从航空航天到智慧城市再到无人机，各行各业的开发人员都使用 CesiumJS 创建交互式 Web 应用程序来共享动态地理空间数据。CesiumJS 基于开放格式构建，旨在为海量数据集提供强大的互操作性和扩展能力。

vue3【vite】中使用cesium

11-27

4439

【代码】vue3【vite】中使用cesium。

vue3 使用 vue-cesium

yysyyzy的博客

06-09

1491

/ console.log(Cesium.Cartesian3.fromDegreesArrayHeights(rectangleDrawingOptsStorage.preRenderDatas[index][0].flat()),'阿萨大1231大')// console.log(drawingsRef.value.getDrawingActionInstances()[3].cmpRef.value.renderDatas,'adada阿三大苏asdasd打')if(e.name!

vue3集成Cesium

Raccon_的博客

10-10

738

笔记

vue脚手架3使用 cesium

博文仅作为本人的学习记录，论点和观点仅代表个人而不代表技术的真理，目的是自我学习和有幸成为可以向他人分享的经验，因此有错误会虚心接受改正，但不代表此刻博文无误！仅供参考，不可尽信。

05-19

1613

vue脚手架3使用 cesium 前前后后写了3篇vue使用cesium的博文了，我都写烦了，因为我用的挺好，但是仅限于我自己。主要是之前写的我觉得确实有瑕疵，今天这个我实验了，没有那么多的配置，而且还很顺利，没有任何错误提示，稍微写一下吧再，这篇写完，在也不写了。安装 Cesium 直接使用npm安装，一行命令安装完成！ npm install cesium --save 我安装的版本是这个 1.93.0 。好，到这里安装就完成了。配置接下来就是使用，很多人卡在这个地方，要不是不会用，要

Vue3配置Cesium

小龙狗的博客

02-05

6515

0. 说明基于Vue3配置Cesium，软件版本如下。 node@14.17.3 npm@8.4.1 vue/cli@4.5.15 1. 创建 Vue 项目安装 Vue CLI E:\CesiumProject> npm install -g @vue/cli 创建项目，选项如下，选择 Manually select features E:\CesiumProject> vue create world ? Your connection to the default yarn re

vue3使用cesium绘制瓦片图、点云图

weixin_45992894的博客

03-01

1146

附带一位大佬详细讲解：https://zhuanlan.zhihu.com/p/620468046utm_id=0&wd=&eqid=c5147ad100001d090000000464901fd3。天地图:https://www.tianditu.gov.cn。cesium官网地址：https://cesiun.com。1.需要在cesium官网申请token,天地图key。2.这里通过cdn方式引入了。

Vue3项目-Cesium地图初始化

StupidlyGrass的博客

08-19

1601

将node_modules中cesium/Build/Cesium文件夹拷贝至public目录下。3、index.html配置。一、安装、配置Cesium。1、安装Cesium。二、使用Cesium。