react + cesium

環(huán)境配置（腳手架create-react-app環(huán)境下）

1. node_modules中手動(dòng)添加cesium包

2. 在項(xiàng)目根目錄下的 index.js 設(shè)置baseurl，鏈接靜態(tài)資源

   // index.js
   import React from 'react'
   import ReactDOM from 'react-dom'
   import App from './App'
   
   // cesium setBaseUrl
   import "cesium/Source/Widgets/widgets.css"
   import buildModuleUrl from "cesium/Source/Core/buildModuleUrl"
   buildModuleUrl.setBaseUrl('/cesium/')
   
   ReactDOM.render(<App />, document.getElementById('root'))
   

3. 靜態(tài)資源配置

   cesium/Source 中包含的資源如下：

   Assets/   copyrightHeader.js   DataSources/   Renderer/   Shaders/   Widgets/   Cesium.js   Core/   main.js   Scene/   ThirdParty/   Workers/
   

   在項(xiàng)目根目錄下的 public 文件中需要添加的cesium靜態(tài)資源如下：

   Assets/   ThirdParty/   Widgets/   Workers/   Cesium.js
   

4. 初始化布局顯示

   // App.js
   import React, { Component } from 'react'
   import Cartesian3 from 'cesium/Source/Core/Cartesian3'
   import WrappedCesiumApp from './cesium/cesium'
   
   export default class App extends Component {
    componentDidMount() {
        //load cesium map
           //這里需要三個(gè)數(shù)據(jù)，經(jīng)度，緯度，高度 用來(lái)定義 cesium camera 的視圖位置
        let defaultCenter = Cartesian3.fromDegrees(121.604848, 31.178455, 10000)
        this.refs.map.setViewer(defaultCenter)
    }
   
    render() {
        return (
            <WrappedCesiumApp ref="map"/>
        )
    }
   }
   

5. 啟動(dòng)項(xiàng)目，正常顯示

接口方法 / 封裝方法

import CesiumViewer from "cesium/Source/Widgets/Viewer/Viewer"
import Cartesian3 from 'cesium/Source/Core/Cartesian3'
import CesiumMath from 'cesium/Source/Core/Math'

//新建視圖，并掛載到選定到 dom 元素上(this.refs.map)
this.viewer = new CesiumViewer(this.refs.map, configOptions)

//設(shè)定默認(rèn)視圖顯示點(diǎn)
let defaultCenter = Cartesian3.fromDegrees(longitude, latitude, height)

//設(shè)定初始視圖顯示位置
this.viewer.camera.setView({
    destination: defaultCenter,
    orientation: {
        heading : CesiumMath.toRadians(90.0), // east, default value is 0.0 (north)
        pitch : CesiumMath.toRadians(-90),    // default value (looking down)
        roll : 0.0                             // default value
    }
})

//添加點(diǎn)
this.viewer.entities.add({
    
})