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,欢迎下载参考。