天天看點

[cesium] | 基于 react + ts的三維元件開發示例

說明

抽空把cesium和threejs的api功能系統性的封裝一下,抽象出幾個元件供以後項目調用。

這裡使用的cesium1.79不改源碼版實作

示例效果

[cesium] | 基于 react + ts的三維元件開發示例

[cesium] | 基于 react + ts的三維元件開發示例
[cesium] | 基于 react + ts的三維元件開發示例
[cesium] | 基于 react + ts的三維元件開發示例
[cesium] | 基于 react + ts的三維元件開發示例
[cesium] | 基于 react + ts的三維元件開發示例
[cesium] | 基于 react + ts的三維元件開發示例
[cesium] | 基于 react + ts的三維元件開發示例
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"} />
}
           

繼續閱讀