React+Ts项目初始化cesium项目

原创 已于 2022-11-21 11:09:37 修改 · 1.6k 阅读 · 5 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#react.js #前端 #typescript #vscode

于 2022-07-26 09:47:22 首次发布
这篇博客介绍了如何在TypeScript项目中使用Create React App创建一个Cesium项目，并详细阐述了安装Cesium和Resium库、配置CESIUM_BASE_URL、将Cesium文件移到public目录、引入Cesium样式、初始化Cesium地球以及隐藏左下角图标的过程。遇到的问题是在ts项目中通过webpack配置无法成功初始化Cesium，作者希望得到在TS项目中成功配置webpack的大佬的帮助。

1.首先用脚手架创建一个typescript项目

      create-react-app  xxxxx  --template  typescript

2.安装cesium和resium（resium是react封装的cesium库）

 //我的cesium的版本为1.95.0，之后的版本按照这种方法会报错
 yarn add cesium resium

3.配置CESIUM_BASE_URL

CesiumJS需要在您的服务器上托管一些静态文件，例如Web workers和SVG图标。配置模块捆绑程序以复制以下四个目录并将它们作为静态文件提供：

  • node_modules/cesium/Build/Cesium/Workers
  • node_modules/cesium/Build/Cesium/ThirdParty
  • node_modules/cesium/Build/Cesium/Assets
  • node_modules/cesium/Build/Cesium/Widgets

在导入 CesiumJS 之前，必须设置全局变量。它必须指向提供这四个目录的 URL。

最低0.47元/天 解锁文章
React Hooks、TypeScript和Cesium实现分屏显示
HackWhisper的博客
09-19 168
在本文中，我们将探讨如何使用React Hooks、TypeScript和Cesium库实现分屏显示的功能。我们将介绍如何设置React应用程序并使用Cesium库创建地球的三维视图。同时，我们还将使用React Hooks来管理状态和交互逻辑，并使用TypeScript来增强代码的可靠性和可维护性。
第03章—Cesium.js与React.js的碰撞：打造三维地球应用入门指南
Supershuu的博客
06-02 1211
cesium和react的融合教程
Resium 项目常见问题解决方案
gitblog_00859的博客
11-21 971
Resium 是一个基于 React 的开源项目，专门用于与 Cesium 地球可视化库进行集成。Cesium 是一个用于创建 3D 地球和地图的 JavaScript 库，而 Resium 则通过提供一组 React 组件，使得开发者能够以声明式的方式在 React 应用中使用 Cesium。Resium 的主要编程语言是 TypeScript，这使得项目具有强类型检查和更好的代码维护性。 #...
cesium（一）react项目（webpack）结合cesium配置
zhengjie0722的博客
09-07 2111
cesium是三维可视化地图引擎的代表之作了。它提供了基于JavaScript语言的开发包，方便用户快速搭建一款零插件的虚拟地球Web应用，并在性能，精度，渲染质量以及多平台，易用性上都有高质量的保证。 它可以实现以下功能：全球级别的高精度的地形和影像服务，矢量以及模型数据，基于时态的数据可视化，多种场景模式（3D，2.5D以及2D场景）的支持，真正的二三维一体化。 Cesium简而言之就是将栅格、矢量等二维数据，3dtiles、点云、DEM、倾斜摄影、BIM等三维数据在地球空间范围上可视化展示...
React集成Cesium示例代码
02-08
React集成Cesium源码打包
react项目引入Cesium地图
weixin_45264424的博客
03-08 2817
参考链接: https://blog.csdn.net/qq_33484881/article/details/85336458. Cesium配置修改 新建react项目之后，现在开始将cesium库加入到react中： 1、安装第三方库：命令提示行中输入 npm install cesium安装cesium，再安装copy-webpack-plugin； npm install cesium npm install copy-webpack-plugin 2、修改配置文件：由于create-react
基于React hooks＋TS＋Vite+Cesium搭建开发环境
李勇的博客
03-16 610
喜欢海，喜欢花，喜欢日出和日落，浪漫的年纪别活的太无趣~~
[react] react 学习(一) | 创建react+ts+cesium项目 配置webpack
啊嘞嘞的博客
11-17 1206
前言 看到最近抽空学习学习react框架，作为一名gisr职业发展也不能仅局限webgis，能够结合gis+web前端回报率比单一研究gis带来的收益更高。 为什么选择react而不是vue呢(忽略angular..)？并不是vue不够优秀，而是公司需要和大型项目的适应，同样也是大厂的首选项。 准备先按官方的资料和github撸一个demo，后面再学学TypeScript + React Hook开发栈。 步骤 环境说明：操作系统: win10 , nodeJs：15.2.0 , npm：7...
React集成Cesium+ThreeJs源码打包
02-09
这通常包括创建一个`<div>`作为Cesium的容器，并在组件挂载时初始化Cesium Viewer实例。 ```jsx import React, { useEffect } from 'react'; function CesiumWidget() { useEffect(() => { const container = ...
React 18+TS中使用Cesium 1.95
最新发布
duansamve的博客
10-02 197
【代码】React 18+TS中使用Cesium 1.95。
cesium-react-demo:基于webpack、react、cesium实现的一个简单脚手架，内置demo
04-27
cesium-react-demo 基于webpack、react、cesium实现的一个简单脚手架，内置demo 安装 npm install 启动 npm start
vue3-ts-cesium-express
04-02
vue3-铯-ts 项目设置 npm install 编译和热重装以进行开发 npm run serve 编译并最小化生产 npm run build 整理和修复文件 npm run lint 自定义配置 请参阅。
React + Cesium实践（一）之架子搭建
的博客
01-31 1190
antd pro集成Cesium
React组件打包发布npm（create-react-app+ts+cesium）
iYNing的博客
10-27 993
最新一个新需求，做个组件发布到npm上，此项目用的是React18，使用create-react-app脚手架生成的react框架，该项目包括ts、cesium等。之前的项目是纯js的，需要先改造一下。
react+CesiumJS
don
07-08 980
Cesium配置修改 配置的版本 1、安装第三方库： npm install cesium npm install copy-webpack-plugin 2、配置webpack文件：cesium在使用时，需要配置webpack文件 文件路径：node_module/react-scripts/webpack.config.js （1）找到webpack.config.js，在最上方引入插件，并配置相关路径 // cesium const CopyWebpackPlugin = require('co
Cesium 之 React + Cesium 项目搭建全过程
yilinlinyi的博客
05-19 637
如需按需加载或 Webpack 优化，可配置 `webpack.config.js`（通过 `react-app-rewired` 覆盖配置）。将 `node_modules/cesium/Build/Cesium` 文件夹复制到 `public/` 目录下。> 如果没有安装，请自行下载 [Node.js](https://nodejs.org/)。访问 `http://localhost:3000` 即可看到 Cesium 三维场景。项目默认会运行在 `http://localhost:3000`。
react 地图可视化 cesium 篇
weixin_30315435的博客
07-04 897
Vue Function-based API RFC 一出来，感觉 vue 越来越像 react 了。新立项目，决定尝试下 react.js。下面是 react 集成 cesium，核心部分是 webpack 的配置。 一、安装 create-react-app npm install -g create-react-app 二、react 工程创建 cre...
React引入cesiumjs,引入glb模型飞机
wodenime的博客
12-06 1172
2、在node_modules中找到cesium包，复制到public文件夹下，结构如下图。中随便下载一个glb格式的模型就行，引入到assets文件中。3、将cesium引入index.html的head标签内。项目：CRA（create react app）项目。5、创建cesium.js组件。6、将组件引入到需要的即可。1、安装cesium。
Resium教程1：Resium is library of React components for Cesium
u013044828的博客
11-08 1101
Resium Resium is library of React components for ????Cesium Resium 前端框架react封装cesium的库。 You can import all resium components as following. import { Viewer } from “resium”; The simplest resium application The simplest resium application is as following. Jus
评论 6
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值