一、ArcGIS CLI工具是什么?
通过此CLI工具,可快速搭建适用于ArcGIS JavaScript API的各种应用程序。脚手架GitHub地址如下:
https://github.com/esri/arcgis-js-cli
二、ArcGIS CLI的使用步骤
- (1)使用Npm全局安装ArcGIS CLI, 特别注意,window系统使用该命令npm install --global --production windows-build-tools
npm install -g @arcgis/cli
- (2)使用命令创建工程, 命令格式如:arcgis create "名称" -t "框架名称 react 或者 vue"
arcgis create my-react-application -t react
命令可选参数见下表:
Options:
--version Show version number [boolean]
--name, -n directory and package name for the new app
--dest Directory to create the application in [default: <name>]
--type, -t A project template [choices: "jsapi". "react", "vue", "calcite"] [default: "jsapi"]
--cdn Project template using JSAPI CDN (only valid with default or calcite) [default: false]
-h, --help Show help
-
(3)程序编写
示例代码结构如下,已经构建了地图组件和header组件,其中地图组件部分使用contexts上下文方式进行的dom实例绑定。
image.png -
(4)程序测试
程序调试使用浏览器默认调试即可,跟踪、设置断点等。
image.png -
(5)程序编译部署
image.png
使用 npm run build命令进行程序打包生成部署包。
生成了arcgis- js -api、esri、build字体文件,按道理讲应该部署包不需要在进行单独的API部署了,但是是否能够将所有的程序所需资源都打包进去还需要进行详细测试。API配置见worker-conffig文件,可以设置本地API。
image.png
三、ArcGIS CLI的疑问?
为什么需要这个工具?
(1)提供一个集成的工具可以便于直接使用新的框架如react、vue等开发地图应用程序,而不需要自己从webpack进行搭建。
(2)工具提供Experience Builder Widget创建方法,可以和Experience Builder进行结合。
(3)目前使用react、vue等进行api开发有两种方式: arcgis/webpack-plugin、esri-loader方式。arcgis/webpack-plugin方式代码写法如下:
esri-loader方式代码写法如下:
image.png
这种方式使用异步加载方式进行调用,所以两者直接对比的下对于开发习惯来说有点影响。
网友评论