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

【番外】 使用@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脚手架的全局安装:

npm install -g @arcgis/cli

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

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

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

arcgis create arcgis-vue-app -t vue

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

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

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

npm run serve

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

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

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

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

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,我们可以通过修改如下文件进行配置:

src/worker-config.ts

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

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

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

arcgis create reactjsapi -t react

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

npm start

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

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

src/worker-config.ts

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

总结

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

本文参与 腾讯云自媒体分享计划 ,欢迎热爱写作的你一起参与!
本文分享自作者个人站点/博客:http://www.xbeichenbei.com/复制
如有侵权,请联系 cloudcommunity@tencent.com 删除。
登录 后参与评论
0 条评论

相关文章

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

    本文主要介绍如何在Vue项目中使用ArcGIS JS API进行开发,文中使用的JS API是目前最新版本的ArcGIS JS API 4.14,主要是在Vue...

    X北辰北
  • 【番外】 React中使用ArcGIS JS API 4.14开发

    本文主要介绍如何在React项目中使用ArcGIS JS API进行开发,文中使用的JS API是目前最新版本的ArcGIS JS API 4.14,主要是在R...

    X北辰北
  • 【番外】Electron和ArcGIS API for JavaScript的开发

    最近学了一些Electron.js开发桌面应用的知识,然后作为一名专业的GISer,脑海里马上想到的是,它能不能和我们的ArcGIS JS API整合呢,意思就...

    X北辰北
  • 使用现代化的脚本进行 ArcGIS JS API 开发

    ArcGIS JS API 基于古老的 JavaScript 框架 Dojo 开发, dojo 虽然是曾经的王者, 但是2020年的前端开发, 早已是 Angu...

    beginor
  • 【测评】 使用@arcgis/cli脚手架和esri-loader方式进行ArcGIS JS API开发的测评

    本文主要针对于在Vue和React项目中使用esri-loader和@arcgis/cli脚手架进行ArcGIS JS API开发时,比较两种方式的不同,供各位...

    X北辰北
  • ArcGIS API for JavaScript 4.18基于ES Modules的新开发方式@arcgis/core

    ArcGIS API for JavaScript 4.18中新增加了一种基于ES Modules的新开发方式@arcgis/core,这篇文章就来介绍一下如何...

    X北辰北
  • 【一张图框架-1】自动化构建WebGIS项目

    前端开发领域已经有很多自动化构建项目的工具了,例如vue-cli、create-react-app等等,但是在WebGIS开发领域却是少之又少,所以今天博主自己...

    X北辰北
  • ArcGIS JS API 4.15渲染后台接口返回的数据,并进行点选查询

    本文主要介绍下如何使用ArcGIS JS API对后台接口返回的数据进行渲染,文章中的后台返回数据使用单独的配置文件来处理,详情请看文章内容。

    X北辰北
  • ArcGIS JS API 4.17更改测量控件黄白相间的默认样式

    当我们使用ArcGIS JS API开发项目时,经常会用到地图测量控件,用于测量地图上两点之间的距离、一片区域的面积或周长等,但是ArcGIS JS API测量...

    X北辰北
  • ArcGIS API for JavaScript开发入门必读

    ArcGIS API for JavaScript开发必读的一篇入门文档,文章中对ArcGIS API for JavaScript做了简单的介绍,包括学习路线...

    X北辰北
  • 常见的WebGIS地图库

    Mapbox GL JS 是目前最新潮的前端地图库,它的矢量压缩、动态样式和三维性能令人印象深刻。它本身是开源的,但一般依赖于Mapbox公司提供的底图服务。

    Jean
  • ArcGis API JS 4.X本地化部署与地图的基础使用

    首先下载ArcGIS API for JavaScript4.x,这里下载的是4.19。

    Kiba518
  • 【学习过程】寻找合适的WebGIS开发构架

    一直想找到一个合适的构架来开发WebGIS,以前一直用的是Web ADF,然而经常遇到很大的技术阻力,因为,自己的JAVASCRIPT不怎么好,所以一直想尽量避...

    用户1170933
  • ArcGIS REST API 实现服务端地图图层叠加和地图图片导出

    (1)ArcGIS Desktop 10.5 路径下自带的 影像文件 wsiearth.tif,影像文件存放路径: E:\Program Files (x86...

    魏晓蕾
  • 【ArcGIS JS API + eCharts系列】实现二、三维网络路径图的绘制

    本文主要介绍使用ArcGIS JS API 4.14和eCharts 4.7.0来实现在地图上绘制网络路径图的实现步骤,包括二维和三维。

    X北辰北
  • ArcGIS JS API 4.14离线部署

    本文主要介绍ArcGIS JS API 4.14的离线部署和测试离线部署是否成功,JS API离线部署是ArcGIS JS API开发的首要前提,也是基本技能,...

    X北辰北
  • ArcGIS API for JavaScript应用开发

    ArcGIS API for JavaScript 提供在线版API,4.x 是 ArcGIS API for JavaScript 的新一代版本,实...

    IT技术小咖
  • 发布 Angular 应用至生产环境

    两年前, 写过一篇使用 rollup 来为生产环境编译 Angular 2 应用的文章, 因为当时还没有 angular-cli 项目。 而如今 Angular...

    beginor
  • 地理信息系统(GIS)系列——绪论

    地理信息系统(Geographic Information System 或 Geo-Information system,GIS)有时又称为“地学信息系统”。...

    魏晓蕾

扫码关注腾讯云开发者

领取腾讯云代金券