基于React hooks＋TS＋Vite+Cesium搭建开发环境

lyliiyong

已于 2024-11-21 01:33:49 修改

阅读量540

点赞数 6

分类专栏： WebGIS 文章标签： react.js typescript node.js reactjs es6

于 2024-03-16 16:14:13 首次发布

本文链接：https://blog.youkuaiyun.com/Liyong_liyong/article/details/136764097

版权

WebGIS 专栏收录该内容

6 篇文章

订阅专栏

本文介绍了如何使用pnpm管理和安装项目依赖，如cesium，以及在Vite项目中配置cesium插件和创建包含CesiumViewer组件的过程。作者还展示了如何启动项目并邀请读者给予反馈。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

创建项目

pnpm create vite

在这里插入图片描述

安装项目依赖

pnpm install cesium
pnpm install vite-plugin-cesium -D

配置`vite.config.ts`文件

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import path from 'path';
import cesium from 'vite-plugin-cesium';

export default defineConfig({
  plugins: [react(), cesium()],
  resolve: {
    alias: [
      {
        find: '@',
        replacement: path.resolve('./src')
      }
    ]
  }
});

编写组件

import {ReactElement, useEffect, useRef} from 'react';
import * as Cesium from 'cesium';

Cesium.Ion.defaultAccessToken = TOKEN.CESIUM;

const CreateViewer = (): ReactElement => {

  const viewerRef = useRef<HTMLDivElement>(null)
  
  useEffect(() => {
    const viewer = new Cesium.Viewer(viewerRef.current!)
    
    return () => {
      viewer.destroy();
    };
  }, [])
  
    return <div ref={viewerRef} style={{width: '100%', height: '100%'}}/>;
}
export default CreateViewer;

启动项目

pnpm dev

结果

在这里插入图片描述
如果你觉得本文对你有帮助，不妨点个赞吧~~