React+Ts项目初始化cesium项目

我在海底吃菠萝

已于 2022-11-21 11:09:37 修改

阅读量1.3k

点赞数 1

分类专栏： # Cesium 文章标签： react.js 前端 typescript vscode

于 2022-07-26 09:47:22 首次发布

本文链接：https://blog.csdn.net/HYHhmbb/article/details/125987775

版权

Cesium 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

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。

4.从node_moudles下找到Cesium包，放到public文件下（复制粘贴）

5.引入Cesium样式

  <link href="https://cesium.com/downloads/cesiumjs/releases/1.95/Build/Cesium/Widgets/widgets.css" rel="stylesheet">

//引入Cesium目录下widgets.css静态资源也一样   两个都可以

<link href="./Cesium/Widgets/widgets.css" rel="stylesheet">

6.初始化Cesium地球，以及一些基础参数的配置

import React, { Component } from "react";
import * as Cesium from 'cesium'
import "./index.scss"

export default class CesiumMap extends Component {

    componentDidMount = () => {
        Cesium.Ion.defaultAccessToken = "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJkMmFjY2QzZS00YzhlLTRkZmItOWViMy0wYmVmZjU4M2QwZTUiLCJpZCI6MTAyMTQ5LCJpYXQiOjE2NTg0ODEyMzB9.I0ykOK_Aj9n3Wj6ANHV9o70rPF4FXJw6lxSewIFm8J0"
        const viewer = new Cesium.Viewer("cesiumContainer", {
            animation: false, // 是否创建动画小器件，左下角仪表
            baseLayerPicker: false, // 是否显示图层选择器
            fullscreenButton: false, // 是否显示全屏按钮
            geocoder: false, // 是否显示geocoder小器件，右上角查询按钮
            homeButton: false, // 是否显示Home按钮
            infoBox: false, // 是否显示信息框
            sceneModePicker: false, // 是否显示3D/2D选择器
            selectionIndicator: false, // 是否显示选取指示器组件
            timeline: false, // 是否显示时间轴
            // sceneMode: Cesium.SceneMode.SCENE3D, // 设定3维地图的默认场景模
            navigationHelpButton: false, // 是否显示右上角的帮助按钮
            // scene3DOnly: true, // 如果设置为true，则所有几何图形以3D模式绘制以节约GPU资源
            navigationInstructionsInitiallyVisible: false,  //是否显示帮助信息控件
            showRenderLoopErrors: false, // 是否显示渲染错误
            // 设置背景透明
            orderIndependentTranslucency: false,
            contextOptions: {
                webgl: {
                    alpha: true
                }
            },
            terrainProvider: Cesium.createWorldTerrain()
            // terrainProvider: new Cesium.CesiumTerrainProvider({
            //     url: terrainLayer,
            //     requestVertexNormals: true,
            //     requestWaterMask: true
            // })
        })
    }

    render() {
        return <div id="cesiumContainer" className="cesiumContainer">

        </div>;
    }
}

Cesium.Ion.defaultAccessToken是Cesium官网注册得到的token

详情可以参考Cesium官网：

https://cesium.com/learn/cesiumjs-learn/cesiumjs-quickstart/#step-1-create-an-account-and-get-a-token

Cesium的react组件库：https://resium.reearth.io/

7.隐藏左下角Icon

    //隐藏Icon
    .cesium-widget-credits {
            display: none !important;
            visibility: hidden !important;
      }

8.初始化完成

讨论：这个方法是根据官网和resium来的，我查询初始化Cesium相关的文档，按照配置webpack.config.js那种方法我在js项目中初始化成功了，但是在ts项目中，我按照webpack配置没有初始化成功，可能是哪里有问题，安装Cesium后，引入的时候会报错提示我没有安装Cesium（我不太理解），希望有ts项目配置webpack.config.js成功后的大佬可以教教我。

注：resium是react已经封装好的组件库，也可以使用resium进行初始化。