自动化创建WebGIS项目

Bertha 。 2022-10-25 16:18 191阅读 0赞

### 写在前面 ###

当你在开发WebGIS项目的时候是否为以下问题而烦恼呢？

*  如何在Vue或React框架中配置ArcGIS API for JavaScript；
 *  ArcGIS API for JavaScript中每个API模块的知识点都了解，但是具体的功能开发却不知道如何组织；
 *  如何配置Vue的路由跳转、如何配置Vue的全局状态管理，如果切换成React又该如何做呢；
 *  一个完整的WebGIS项目中到底需要哪些插件呢，这些插件不同的版本又改如何去搭配呢；
 *  ……

如果你也有以上同样的疑惑或者还有更多的疑惑，那这篇文章接下来介绍的内容你一定会感兴趣，请保持你的好奇心，我们继续看接下来的内容。

### WebGIS脚手架工具 ###

只需要一行命令就可以创建一个完整的WebGIS项目，项目里面的路由、全局状态管理、地图API等所有的东西都为你全都配好了，只需要你拿来即用，想一想，是不是很安逸？没错，这篇文章就是介绍这样一个工具——cdmap-cli。

cdmap-cli可以允许你通过一行命令直接创建一个完整的WebGIS项目，为你省去了以往项目开发过程中安装ArcGIS API for JavaScript、安装vue router、安装vuex、安装Element UI或Ant Design等这些插件的时间，同时也为你规划好了项目中代码的组织方式以及相关组件的存放路径。有了cdmap-cli，你可以在短短五分钟之内完成项目创建、插件安装和项目启动的全套流程，为你省下了将近一天的工时。

### cdmap-cli安装、项目创建&启动 ###

cdmap-cli安装使用的前提是你电脑环境中必须要有nodeJS环境，如果没有的话建议安装nodeJS。在安装了nodeJS之后，我们只需要在命令行通过下面命令安装cdmap-cli即可：

npm i cdmap-cli -g

安装完cdmap-cli之后即可进行项目创建工作，通过如下命令即可创建项目：

cdmap create

上述命令执行之后会出现项目创建的交互信息，用户只需要依次填写相关信息和选择相应框架即可，如下：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1MTE3MDI0_size_16_color_FFFFFF_t_70][]

填写完相应信息之后即可创建项目，项目创建完成后会出现项目启动命令，按如下提示命令操作即可：

cd <项目名称>
    npm i
    npm run serve

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1MTE3MDI0_size_16_color_FFFFFF_t_70 1][]

随即可看到项目启动后的界面，如下：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1MTE3MDI0_size_16_color_FFFFFF_t_70 2][]

是不是很方便？同时项目代码模板中提供了ArcGIS API for JavaScript的运用示例，我们参考其用法开发自己需要的功能即可，大大减少了开发成本和学习成本。

### cdmap-cli详细信息 ###

关于cdmap-cli更加详细的信息请查看下述地址：

https://www.npmjs.com/package/cdmap-cli

由于cdmap-cli目前正处于开发阶段，所以功能暂且较少，但是能满足基本的项目需求，如需要更多功能和配置，请关注后续更新。

### 错误处理 ###

1、由于cdmap-cli中配置的ArcGIS API for JavaScript是最新版（4.18版本），所以代码中使用了ncp工具，所以使用之前需要先进行ncp工具的安装，命令如下：

npm i ncp -g

2、项目创建完成之后，通过"npm i"安装相关依赖包时，可能会由于网络等问题出现安装卡顿、暂停的情况，请停止此次安装操作，随后重复执行"npm i"命令安装相关依赖包，直到安装成功。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1MTE3MDI0_size_16_color_FFFFFF_t_70]: /images/20221024/68a59ad6431c46c9850e2fd57733c0b3.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1MTE3MDI0_size_16_color_FFFFFF_t_70 1]: /images/20221024/f413ecdcf5cb43d694952034ddeafb0b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1MTE3MDI0_size_16_color_FFFFFF_t_70 2]: /images/20221024/773093e82ce5482a8d391dbae0697a17.png