0%

【番外】 使用@arcgis/cli脚手架进行ArcGIS JS API开发

本文主要介绍如何在Vue和React项目中使用ArcGIS JS API进行开发,与以往的esri-loader开发方式不同的是,本文使用的是@arcgis/cli脚手架的开发方式。

概述

今天兴趣使然,在翻阅ArcGIS API for JavaScript官网的时候,发现了跟esri-loader方法不同的另外一种可以在Vue、React和Angular这种主流框架中使用JS API的开发方式,并将其操作过程记录下来,供有需要的伙伴参考。如果想了解如何通过esri-loader来在Vue、React和Angular这种主流框架中使用JS API的开发,请移步至另外两篇文章:

  • 《【番外】 React中使用ArcGIS JS API 4.14开发》
  • 《【番外】 Vue中使用ArcGIS JS API 4.14开发》

操作步骤

安装@arcgis/cli脚手架

打开命令行工具,通过以下命令进行@arcgis/cli脚手架的全局安装:

1
npm install -g @arcgis/cli

安装脚手架

通过以上命令可以看到,我们的脚手架工具安装成功,接下来我们通过相关命令创建基于不同框架的ArcGIS JS API应用模板。

通过@arcgis/cli脚手架工具创建基于Vue框架的应用模板

2.1、在合适的目录位置通过以下命令创建基于Vue框架的JS API应用模板:

1
arcgis create arcgis-vue-app -t vue

安装脚手架

输入以上命令创建应用模板时发现,当进度走到如上位置时异常缓慢,通过科学上网方法也不顶用,然后将npm源切换到淘宝源也不行,所以我们只能用以下方法来解决了,打一把王者吧,嘻嘻:
安装脚手架

打了一把40多分钟的王者之后,发现进度条快结束了,所以我们等待项目创建成功,如下:
安装脚手架
安装脚手架

2.2、项目创建成功后,我们进入到项目根目录,然后通过如下命令来启动:

1
npm run serve

安装脚手架
安装脚手架

2.3、项目启动后会自动打开浏览器,默认端口是8080,然后会出现证书信任问题,我们只需要点击信任,然后继续执行即可,如下所示:
安装脚手架
安装脚手架

上图中可看到,项目是成功启动了,但是地图并没有实例化出来,打开控制台一看,有7条报错:
安装脚手架

这时候我们再返回到创建的项目根目录,阅读README文档:
安装脚手架

由文档可看到,我们的“npm run serve”命令是在本地运行程序,并且所需要的资源本地提供的情况下才通过这条命令来启动的,那么刚才报错很有可能是加载的资源本地并没有找到所以才报错,所以我们用正确的启动命令来启动。
2.4、在项目根目录,通过如下命令正确运行项目:

1
npm start

安装脚手架
安装脚手架
安装脚手架

此时可以看到,我们的项目正确运行,并实例化了一张地图,并且添加了图例组件和一张业务图层,并且该图层开启了Identify鼠标点选查询功能。
项目成功运行后,我们来看下代码结构。
2.5、用编辑器打开项目代码,此处用VS Code打开,然后可以看到如下的代码结构:
安装脚手架

从以上代码组织结构可以看到,我们创建的项目是基于Vue框架的,更加准确点说是底层基于webpack来搭建的工程项目。其中”node_modules”文件目录下存放的是项目中所安装的各类插件包;”public”文件目录下存放的是我们主页面初始化的一些模板文件;”src”目录跟我们通常的vue项目工程中一样,是我们系统中的各类组件代码,在此处默认创建了<Header><WebMap>两个组件,分别是项目页面中的头部组件和实例化的地图组件;”tests”目录下存放的是一个用来测试的<Header>组件,此处用处不大;除了上述几个目录文件夹之外,项目根目录下还有Eslint配置文件、babel配置文件、webpack配置文件等,所以此项目是一个配备了Eslint、babel这些主流插件工具的WebGIS主流项目框架,框架所有代码用目前主流的TypeScript来编写完成的。
2.6、此项目中所用的ArcGIS JS API是最新的4.14版本,地址引用的是官网地址。如果我们用离线版本的API,我们可以通过修改如下文件进行配置:

1
src/worker-config.ts

安装脚手架

以上就是我们通过脚手架搭建的基于Vue框架的应用模板,我们如果进行开发的话,可以在此项目代码上进行修改定制、开发。接下来我们看看如何用脚手架搭建基于React框架的应用模板。

通过@arcgis/cli脚手架工具创建基于React框架的应用模板

3.1、上文中我们已经安装了@arcgis/cli脚手架工具,所以接下来我们只需要在合适的路径下通过以下命令创建基于React框架的应用模板即可:

1
arcgis create reactjsapi -t react

安装脚手架
安装脚手架

在此处创建项目时,进度是很快的,不像我们第一次创建基于Vue的模板应用那样再打一把王者了,这是因为我们第一次创建后在本机已经有缓存了,所以后续创建将会比较快。
3.2、进入到创建好的项目根目录,然后通过如下命令启动项目,在此处我们启动项目之前是先阅读了一下README文档的,避免再次用错启动命令:

1
npm start

安装脚手架
安装脚手架
安装脚手架

由以上结果可看到,它同样创建了一个基于React框架的应用模板,同样实例化了一张底图和一个业务图层,并且添加了图例组件和开启了鼠标点选查询功能。 3.3、用编辑器打开项目代码可看到,它的代码组织结构跟基于Vue框架创建的应用模板的代码结构类似,是基于React框架构建的一个应用模板,可通过src目录下的index.tsx文件判断,使用了JSX语法的变体TSX来编写的,如下:
安装脚手架

3.4、同样的,如果我们想更改JS API的引用地址,可通过以下目录去更改:

1
src/worker-config.ts

安装脚手架

以上就是我们通过脚手架创建基于React框架的应用模板过程。后续如果有需求,可直接在此模板代码基础之上进行修改定制。

总结

本篇文章通过介绍如何安装@arcgis/cli脚手架、如何通过脚手架来创建基于Vue和React框架的应用模板来介绍了另外一种在主流框架中应用ArcGIS API for JavaScript的开发方式。此开发方式跟之前的esri-loader方法相比,有自身的优势也有不足之处,详情请看另一篇文章——《【测评】 使用@arcgis/cli脚手架和esri-loader方式进行ArcGIS JS API开发的测评》。