前言
准备最近抽空学习一下react框架，作为一名gisr 职业发展也不能仅局限gis，能够结合gis+web前端比单一研究gis带来的收益更高。
为什么选择react而不是vue呢(忽略angular..)？并不是vue不够优秀，而是公司需要和大型项目的适应，同样也是大厂的首选项。
准备先按官方的资料和github撸一个demo，后面再学学 TypeScript + React Hook开发栈。
步骤
环境说明 ：操作系统: win10 , nodeJs：15.2.0 , npm：7.0.8 , ide:vscode
创建项目
1. 在github拉取快速创建 react + ts 项目的开源插件
插件地址: https://github.com/jpavon/react-scripts-ts
执行 npm i
注意这里需要node-sass 会被墙 需要指向淘宝镜像
npm i node-sass --sass_binary_site=https://npm.taobao.org/mirrors/node-sass
2 完成安装依赖源 , 创建新项目
执行命令
npx create-react-app map3d --scripts-version=@jpavon/react-scripts-ts
cd map3d/
yarn start
启动成功 ：
由于使用了CRA 脚手架,它与其他脚手架不同的一个地方就是将一些复杂工具（比如 webpack）的配置封装了起来，让使用者不用关心这些工具的具体配置，从而降低了工具的使用难度
这里完成了项目的创建，但是集成Cesium需要配置webpack
3. 释放webpack等配置文件
由于create-react-app是基于webpack的项目，生成时自动隐藏webpack配置项，需要把webpack配置文件暴露出来，需要执行npm run eject将config等配置文件出来(注意操作不可逆)
npm run eject
操作完成！
4. 修改webpack.config.js文件
配置路径和参数
/** 配置Cesium静态资源访问 */
const CopyWebpackPlugin = require('copy-webpack-plugin');
/** cesium访问路径标识 导入模块默认寻找Source下面 */
const cesiumSource = 'node_modules/cesium/Source';
const cesiumWorkers = '../Build/Cesium/Workers';
const fileFolder = 'src';
添加amd
添加字符缩减
/解决报错 解决Critical dependency: require function is used in a way in which dependencies cannot be statically extracted的问题
添加定义的cesium模块
拷贝静态资源
完成配置！
其实这里也可以通过cdn的方式加载cesium，通过window.Cesium设置一下Cesium.buildModuleUrl.setBaseUrl("/Cesium/")路径就行。
开发一个三维组件
1. 在src/index文件中引入样式文件
2. 编写一个路由App
3 自定义路由组件
4. 开发一个组件页面 map3d
/** 组件样式文件 */
import map3DStyle from './index.module.less';
/** 从react中获取React对象 和 Components组件 */
import React, { Component } from 'react';
/** 导入cesium模块 */
import * as Cesium from 'cesium/Cesium'
/** 使用react的Component组件对象自定义map3d组件 */
export default class Map3D extends Component {
/** 数据初始化 */
constructor(props) {
super(props)
this.state = {}
}
/** dom完成第一次渲染执行函数 */
componentDidMount() {
this.initMap()
}
/** 初始化地图 */
initMap() {
// 将viewer对象放在window环境下
window.viewer = new Cesium.Viewer('cesiumContainer')
}
/** 逻辑渲染 */
render() {
// 构建虚拟dom
return (
<div className={ map3DStyle.viewer } >
<div id="cesiumContainer" className={ map3DStyle.cesiumContainer } ></div>
</div>
)
}
}
5. 这里用到less，也需要在webpack.config.js中配置
安装依赖
npm i less --save
npm i less-load --save
添加正则判断
修改getStyleLoaders函数
添加less解析
在map3d中引入less文件
import map3DStyle from './index.module.less';
这里css-module需要将less文件命名后缀为 .module.less才能编译
完成组件开发！
执行命令
yarn start
启动成功！
demo地址:https://github.com/zhangti0708/map3d
| 
转播
