UmiJs+Cesium配置和遇到的问题

最新推荐文章于 2024-05-12 14:23:18 发布
VIP文章 最新推荐文章于 2024-05-12 14:23:18 发布
阅读量655 收藏
点赞数
分类专栏： umi cesium 文章标签： 前端 uml
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/w_WebGis_bb/article/details/125441445
版权

最近想使用umi+cesium做一些练习，期间遇到的各种坑已经踩了一遍，亲测可用

安装项

首先是安装umiJs

tyarn create @umijs/umi-app

安装依赖

tyarn

至此umi已经安装好了
在这里插入图片描述
接下来安装cesium

tyarn add cesium

如果报错请使用其他模式安装如npm;

配置项

在工程目录下新建public文件夹，用于存放cesium的静态资源文件。 将 node_modules\cesium\Build\Cesium 路径下的Cesium文件夹复制值新建的public文件夹中
在这里插入图片描述
在umi配置文件umirc.ts添加以下信息

const cesiumSource = 'node_modules/cesium/Source';
const cesiumWorkers = '../Build/Cesium/Wor
最低0.47元/天 解锁文章
前端奥斯卡小金人
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
Umi环境下的Cesium搭建
地理信息的专栏
03-08 1125
在Umi联合React环境下搭建Cesium三维场景
vue2.X+Cesium
09-23
antd+vue2.X+Cesium加载三维球的示例
基于vue3+vite+cesium 生成热力图CesiumHeatmap源码
11-22
在vue3+vite+cesium加载CesiumHeatmap生成热力图时不能直接使用， 需对源码进行重新封装及修改后方可在vue3+vite中调用； 源码已修改并验证可用；
vue 白边 项目_Cesium+Vue应用【转载】
weixin_35763787的博客
02-11 336
VUE中搭建cesium基于Webpack将Vue-cli脚手架与Cesium库整合Node.Js和Webpack安装等就不累述了，直接初始化一个Vue项目安装Cesium环境npm install cesiumWebpack配置使用过Cesium的同学都知道它是一个非常复杂的库，很难去直接打包我们无法通过在main.js中像引入Vue那样直接进行引入Cesium手动复制Cesium编译好的静态文...
umijs框架加载cesium
swliujiao的专栏
03-10 1711
创建umi项目，yarn create umi 选择app 选择是否使用typescript (N) 选择依赖 yarn yarn start 项目创建完成后，添加cesium yarn add cesium 下载版本是1.67，不同版本配置方式可能不一样，注意版本。 首先在.umirc.js文件中添加以下常量 const cesiumSource = 'nod...
umijs多环境配置_Umi+Dva搭建Cesium 3D开发环境
weixin_35702498的博客
12-28 597
umi，中文可发音为乌米，是一个可插拔的企业级 react 应用框架，是蚂蚁金服的底层前端框架，已直接或间接地服务了 600+ 应用，包括 java、node、H5 无线、离线(Hybrid)应用、纯前端 assets 应用、CMS 应用等。(具体可前往Umijs官网进行查看https://umijs.org/)dva 首先是一个基于 redux 和 redux-saga 的数据流方案，然后为了简...
echarts gl 3D图
qq_32332433的博客
01-18 1107
目前安装echarts-gl版本2.0.0的话需要对应echarts版本5.0.0，echarts版本5.0.0里不带map文件夹。 如果echarts版本较低 最好使用echarts-gl的1.0.0版本。因为echarts-gl版本2.0.0里会有一些引用是echarts版本较低的没有的。 以上，在解决install报错时，如果不方便升级现有包的版本，就需要尝试降低即将安装的包的版本 可以先清一下缓存 npm cache clean --force 然后 npm install node包名字@版本 -
React集成Cesium流程汇总
子枫
02-08 2303
React集成Cesium流程汇总 1.安装cesium模块 2.Cesium配置 前期准备 3.Cesium配置修改配置文件 4.创建Cesium组件 5.运行查看效果
umi+dva开发环境+常用配置和webpack配置
luck_lin
10-26 9824
安装（官方文档：https://umijs.org/zh）： yarn global add umi 使用： 使用umi -v可查看版本，确保全局安装没问题 umi g page <文件名> //创建包含目录的页面home/index.js home/index.css umi g page home/index //创建dva modle文件（如果项目是用yarn cr...
vue3.x中使用cesium，vue3.x+Cesium
05-04
在vue3.x版本中使用cesium，基于vue-cli创建项目，手动配置webpack，资源已配置好，下载完 进入项目下npm install 安装依赖后就可以运行了
Vue + cesium.html
03-16
如何在vue中使用cesium: 先下载cesium, 将cesium中的source放在Vue的static文件夹下，另外需要使用到的三维模型也需要放在Vue的static文件夹
基于 React hooks + Typescript + Cesium 的 三维 webgis 实战系列教程数据
03-09
基于 React hooks + Typescript + Cesium 的 三维 webgis 实战系列教程数据
vue + Echart + Cesium 绘制剖面分析图源码
03-15
vue + Echart + Cesium 绘制剖面分析图源码
使用Umi 遇到的错误
qq_53280805的博客
11-23 3525
UmiJS
cesium报错error in ./node_modules/cesium/Source/ThirdParty/zip.js 的解决办法
LJR_BLOG的博客
11-16 7144
error in ./node_modules/cesium/Source/ThirdParty/zip.js
vue2+cesium初始开发环境配置及项目搭建（vue-cli2 + vue-cli3）
qq_956423566的博客
03-09 4226
vue2+cesium初始开发环境配置及项目搭建
cesium 我遇到的问题及一些方法
weixin_53607765的博客
10-25 3770
true改false skyAtmosphere: false,
Cesium +vue 启动配置
m0_61607317的博客
03-12 210
此时node_modules里存在cesium文件 找到Build文件下的cesium文件 移植到public文件夹下。在public文件夹下的index.html主文件中引入cesium.js以及cesium css。cesium 配置就好啦 要做什么操作 就看需求根据api操作啦~首先到cesium官网 申请cesium Token 备用；在package.json文件内配置globals。回到自己的vue项目上引入cesium。
picoCTF-Web Exploitation-Web Gauntlet
最新发布
huckers的博客
05-12 466
按照提示，需要用admin登录，查看filter.php，这应该是一个SQL注入题，提示我们可以使用无痕浏览器来以便cookie可以不用每次清除。中展示了sql过滤逻辑，可以回味一下，尝试用不同的关键字来注入。提示sql过滤or，我们使用。
vue+cesium开发环境配置
01-27
以下是使用Vue和Cesium配置开发环境的步骤： 1. 首先，确保你已经安装了最新版本的Vue CLI。你可以使用以下命令来检查Vue CLI的版本： ```shell vue --version ``` 2. 如果你还没有安装Vue CLI，可以使用以下命令来全局安装Vue CLI： ```shell npm install -g @vue/cli ``` 3. 创建一个新的Vue项目。你可以使用以下命令来创建一个新的Vue项目： ```shell vue create my-cesium-project ``` 4. 进入到项目目录中： ```shell cd my-cesium-project ``` 5. 安装Cesium和相关的依赖。你可以使用以下命令来安装Cesium和vite-plugin-cesium： ```shell npm install cesium vite-plugin-cesium ``` 6. 在项目的根目录下创建一个vite.config.js文件，并添加以下内容： ```javascript import { defineConfig } from 'vite'; import cesium from 'vite-plugin-cesium'; export default defineConfig({ plugins: [cesium()], }); ``` 7. 在项目的根目录下创建一个.vue文件，例如App.vue，并在其中引入Cesium的相关组件和样式： ```vue <template> <div id="cesiumContainer"></div> </template> <script> import { Viewer } from 'cesium/Source/Cesium'; export default { mounted() { const viewer = new Viewer('cesiumContainer'); }, }; </script> <style> @import url('cesium/Build/Cesium/Widgets/widgets.css'); #cesiumContainer { height: 400px; } </style> ``` 8. 在项目的根目录下运行以下命令来启动开发服务器： ```shell npm run dev ``` 9. 打开浏览器并访问http://localhost:3000，你将看到一个包含Cesium地球的页面。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值