[cesium] | 基于 react + ts的三维组件开发示例

深碍√TFBOYSˉ_ 2022-11-10 05:23 277阅读 0赞

### 说明 ###

抽空把cesium和threejs的api功能系统性的封装一下，抽象出几个组件供以后项目调用。

这里使用的cesium1.79不改源码版实现

### 示例效果 ###

### ![20210317101551537.gif][] ###

![20210331122452212.gif][]

![20210317101601590.gif][]![20210317101608879.gif][]

![20210317101622851.gif][]

![20210323095147380.gif][]

![20210317101634464.gif][]

![20210317101637130.gif][]

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5ZWK5Zie5Zie5Zie5Zie_size_20_color_FFFFFF_t_70_g_se_x_16][]

import React, { useEffect } from 'react'
    import Cesium,{ Viewer, getViewer, getZtKit } from '../components/Viewer'
    
    export default () => {
    
    
        const createApp = (viewer) => {
    
            const ztKits = getZtKit(viewer)
            const {imageryManager , cameraManager ,sceneManager , graphicsManager} = ztKits;
            const layer = imageryManager.build(imageryManager.TENCENT_IMAGERY, {});
            ztKits.toHome()
        }
    
        useEffect(() => {
            createApp(getViewer())
        })
    
        return <Viewer
            mapId="cesiumContainer"
            viewerPrama={null}
            className={"cesiumContainer"} />
    }

[20210317101551537.gif]: /images/20221023/be2bd7270ca94058a7711ea4ce6f2a2e.png
[20210331122452212.gif]: /images/20221023/4022d32835544981a01969feb02a2921.png
[20210317101601590.gif]: https://img-blog.csdnimg.cn/20210317101601590.gif
[20210317101608879.gif]: /images/20221023/fe960f76901445638e74af4ad4dacaf4.png
[20210317101622851.gif]: /images/20221023/1a524e46a6d74f83827cb4cf40b2da08.png
[20210323095147380.gif]: /images/20221023/911fc75d806b42d49a21e552cf149028.png
[20210317101634464.gif]: /images/20221023/646ca1b43523429ea62c701a0ca4d092.png
[20210317101637130.gif]: /images/20221023/559eb363518f4db381dced5ebd9cfb61.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5ZWK5Zie5Zie5Zie5Zie_size_20_color_FFFFFF_t_70_g_se_x_16]: /images/20221023/de0e4dd5eb834e09ba6d5607a05fd1d7.png