arcgis api 4.x for js 结合 react 入门开发系列初探篇（附源码下载）

你还在使用 JQuery 或者 Dojo 框架开发 arcgis api 4.x for js 吗？想试试模块化开发吗？随着前端技术的发展，arcgis api 4.x for js 也有了结合 react.js、vue.js、es6 的开发模式。

笔者由于项目开发前端选型 react.js，“不得以”尝试了几种 react+arcgis 的开发模式，现在比较流行的解决方案有 esri-loader、@webpack/webpack-plugin。

笔者为避免 esri-loader 中繁琐的模块导出操作（loadModules），故选择的是后者，至于他们之间应用场景可以参看以下链接：https://community.esri.com/people/TWayson-esristaff/blog/2018/05/10/arcgiswebpack-plugin-vs-esri-loader。

结论如下：

好了，现在我们可以愉快的进行开发了：

环境搭建

• 安装 node.js，笔者版本为：10.13.0
  

• 下载安装 vscode

• 下载 demo，具体见文章尾部

• demo 项目工程文件目录以及关键代码讲解
  

public/index.html 系统主页
public/assets 存放系统用到的静态资源，如图片。
src/components 目录存放所有的组件，比如 WebMap 是我们的地图组件
src/css 存放全局引用到的样式文件
src/data存放系统组件需要的数据
src/config 负责存储地图配置 
src/index.js 负责将主页Dom节点接入
package.json 记录了项目的配置信息，包括名称、版本、许可证等元数据，也会记录所需的各种模块，包括 执行依赖，和开发依赖
.babelrc 负责对系统 javascript 语法编译配置
webpack.config.js webpack 的配置文件

• index.html 系统入库，初始化 root 的 Dom 节点

• index.js 将 webmap 组件挂载至 root 节点，同时引入 esriConfig 的相关配置

• WebMap.js

• app.js 引入 jsapi 的 webmap、mapview、search 模块，并初始化，提供传递 view 的 dom 节点回调函数，在 webmap.js中调用

更多的详情见：GIS之家小专栏

文章尾部提供源代码下载，对本专栏感兴趣的话，可以关注一波