React框架下如何使用webgl

作者：桔子

React框架作为当前主流的前端开发框架之一，在众多项目中被应用，在最新的工作中遇到很多客户咨询如何在react框架下使用超图的webgl产品，下面做简单的介绍。

一、创建react工程

（1）npm install -g create-react-app      全局安装

（2）create-react-app reactproject       新建并对react项目进行命名（注:项目名称不能有大写）

二、拷贝webgl开发资源

将Build文件夹下的Cesium文件夹拷贝到public目录

三、引用资源

在工程的index.html页面引用js和css资源

四、修改组件代码

根据react组件化的代码和思路，修改app.js中的代码。React相关语法这里不做过多介绍，可以参考React相关教程文档。

import React, { Component } from 'react';

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {date: new Date()};
  }
  componentDidMount(){
    if(window.Cesium)
    {
      let viewer=new window.Cesium.Viewer("cesiumContainer")
      window.viewer=viewer
      viewer.scene.open("http://www.supermapol.com/realspace/services/3D-CBD/rest/realspace")
    }
  }
  render() {
    return (
      <div id="cesiumContainer"></div>
    );
  }

}
export default App;

五、启动工程

npm start 或者yarn start

以上的示例工程，已经上传码云https://gitee.com/Mr-Orange/react_view，欢迎下载参考。