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。

结论如下:
arcgis api 4.x for js 结合 react 入门开发系列初探篇(附源码下载)

好了,现在我们可以愉快的进行开发了:

环境搭建

  • 安装 node.js,笔者版本为:10.13.0
    arcgis api 4.x for js 结合 react 入门开发系列初探篇(附源码下载)

  • 下载安装 vscode

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

  • demo 项目工程文件目录以及关键代码讲解
    arcgis api 4.x for js 结合 react 入门开发系列初探篇(附源码下载)

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 节点

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

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

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

  • WebMap.js

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

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

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

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

上一篇:linux下使用gcc编译运行C程序


下一篇:Tyvj P3119 核电站问题 动态规划