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

最新推荐文章于 2021-07-30 16:21:39 发布
最新推荐文章于 2021-07-30 16:21:39 发布
阅读量1.8k 收藏 5
点赞数 4
分类专栏： ArcGIS API for JS 4.X学习 文章标签： ArcGIS JS API ArcGIS arcgis/cli arcgis脚手架 esri-loader
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_35117024/article/details/104616403
版权
本文档介绍了如何使用@arcgis/cli脚手架在Vue和React框架中开发ArcGIS JS API应用。详细阐述了安装脚手架、创建应用模板的步骤，包括启动项目、解决资源加载问题以及代码结构分析。最后，文章提到了与esri-loader方法的对比，引导读者查阅相关测评文章。
摘要由CSDN通过智能技术生成

概述

今天兴趣使然，在翻阅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开发》

 

操作步骤

1、安装@arcgis/cli脚手架

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

npm install -g @arcgis/cli

通过以上命令可以看到，我们的脚手架工具安装成功，接下来我们通过相关命令创建基于不同框架的ArcG

了解本专栏 订阅专栏 解锁全文
X北辰北
关注
  • 4
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 3
    评论
专栏目录
订阅专栏
【测评】 使用@arcgis/cli脚手架和esri-loader方式进行ArcGIS JS API开发的测评
X北辰北的博客
03-02 1821
概述 当我既写了esri-loader方式来进行ArcGIS JS API的开发文章，又写了@arcgis/cli脚手架的方式来进行ArcGIS JS API的开发文章之后，相信很多小伙伴看到后会产生“选择纠结症”，我到底该用哪种方式来进行ArcGIS JS API的开发呢？不要着急，我给你一个可供选择的参考，简单又实用： 如果项目已经在进行实施，中途可能需要用到ArcGIS JS API中的...
ArcGIS CLI 构建Vue项目符号字体不显示的问题
GIS串串香
07-12 565
这里写自定义目录标题arcgis cli 脚手架的使用VUE符号字体不显示分析问题解决问题 ArcGIS API for JavaScript 4.15已经可以支持与react和vue等前端主流框架融合了，官方提供了两种方式，webpack-plugin或者esri-loader。 esri-loader使用的方式比较奇怪，想要使用 webpack-plugin的方式以import的方式引入arcgis js api。 同时arcgis还基于webpack-plugin提供了脚手架ArcGIS CLI ar
在vue中使用ArcGIS API for JavaScript
weixin_45752569的博客
06-04 4710
ArcGIS API for JavaScript 开发在vue中使用 在vue中使用 在cli搭建的vue项目中使用arcgis 安装esri-loader npm install --save esri-loader 在组件中使用 <script> import { loadModules } from 'esri-loader'; export default { name: 'web-map', mounted() { // 惰性加载JavaScript模块和CSS所
@vue/cli脚手架的使用
qq_43483403的博客
07-30 151
基于@vue/cli脚手架快速开发项目，vue准备了一套搭建好的web框架。 @vue/cli的作用 创建项目文件夹，并添加各种依赖文件，将编写代码时要用的各种依赖准备好。 内置webpack打包工具，打包编译代码。 启动测试服务器，直接部署编译好项目代码，由浏览器请求运行。 @vue/cli全局安装 yarn global add @vue/cli vue -V @vue/cli创建项目 创建脚手架项目 vue create vuecli-demo 切换到项目所在目录 cd vuecli-de.
vue-cli&webpack&arcgis API For JS的天坑之路（一）
realDE的博客
04-19 1万+
写在前面的话（背景交代）最近参加esri比赛，但是又想趁机接触前端最新的一些框架和技术，所以，毅然决然的踏上了这个天坑之路。我现在只是成功的把地图渲染出来了，所以，我也不知道会不会有天坑二的出现。新建vue-cli工程如何用vue-cli + webpack构建一个工程，网上一大堆的代码，我就不赘述了。比如这个就是很好地入门文章，先要做的还是要把vue-cli和webpack的模块划分好，框架搭建好
16 ArcGIS API for JavaScript 4.18基于ES Modules的新开发方式@arcgis/core
X北辰北的博客
12-18 9835
写在前面 随着前端主流框架Vue和React的发展，大家在做WebGIS项目开发时是不是也在vue或者react项目里使用ArcGIS API for JavaScript呢，之前我们在vue或者react项目里使用ArcGIS API for JavaScript的时候一直给大家推荐"esri-loader"的AMD方式，示例代码如下所示(在这里仅仅演示React项目中的使用，Vue中的使用方式见文章后半部分)： //直接使用esri-loader的then()方法链式回调 import React
【番外】 Vue中使用ArcGIS JS API 4.14开发
X北辰北的博客
01-16 1万+
一、概述 在之前很长的一段时间中，使用ArcGIS JS API(以下简称“JS API”)开发WebGIS系统的时候，还是基于传统的前端框架和各种前端技术来开发，这些框架和技术各位使用过的大概有这些：Dojo、jQuery、Bootstrap、CommonJS等。用这些传统的技术框架结合JS API去开发的时候，我们引入JS API是在系统的HTML页面中通过<script>和&l...
vue-cli使用arcgis for js
weixin_42658394的博客
07-10 2606
1、先用npm下载esri-loader。 npm install esri-loader --save-dev 2、加载esri-loader import esriLoader from 'esri-loader' 3、在methods中创建createMap方法   createMap() { const options = { url: 'https://js.a...
arcgis api 整合到vue-cli项目
herogui的专栏
08-14 2487
1    2  发布后拷贝一份static/fonts，不然有些图标找不到     3   @import url('../assets/arcgisApi_v4.4/esri/themes/light-blue/main.css'); 4   API: (window.document.location.pathname.length==1?"":window.document....
如何在Vue项目中引入ArcGIS JavaScript API​ 创建三维可视化地图（含vue项目创建教程）
Read by heart
08-03 2229
新手上路之在Vue项目中引入ArcGIS API​ 视频教程 B站搜索 X北辰北，感谢up主无私的教学~ B站地址：https://www.bilibili.com/video/BV18E411K7B2 文档教程 首先安装node.js运行环境 https://nodejs.org/en/ 下载稳定版： 如果在国内需要配置一下npm的镜像源，永久替换为淘宝镜像 教程：https://www.cnblogs.com/cythia/p/10985080.html 命令行：npm co...
ArcGis api配合vue开发入门系列（一）引入arcgis api以及加载地图
weixin_34261415的博客
02-22 7704
正文 首先和传统的开发一样我们需要引入他的js文件和css文件，但是因为我们是用vue来开发，所以传统的通过标签的方式来引入的方法不适用了，arcgis官网给我提供了一个工具"esriLoader"，这是他的npm地址esri-loader。 Install npm install --save esri-loader 引入之后在组件里面定义一个地图的容器，这里可以使用id或者vue的ref来绑...
arcgis + vue 本地开发环境配置
WestLonly的博客
04-28 1万+
arcgis + vue 本地开发环境配置 1 首先用 vue-cli 生成项目结构并安装项目依赖,当然,这不是唯一的,同样也可以使用 iview-cli 来生成,再次不在赘述. 2 安装 arcgis 官方依赖 esri-loader,这个只是开发依赖,因此使用命令 npm i esri-loader --save-dev 来安装. 3 用模块的方式引入 esri-loader; impo...
arcgis+vue 使用 总结
weixin_45395412的博客
12-06 3676
一 arcgis-javascript-API-4.12 在vue里使用 1 npm esri-loader vue 里面用arcgis for javascript API 需要安装 esri-loader 安完之后引入 loadCss(); loadModules(this.gisModules).then(this.loadMap); //加载默认css/API 从arcgis 官网上...
npm install -g @angular/cli 报错处理
fox_lht的专栏
10-13 5282
报错内容： 811 error path C:\Program Files (x86)\nodejs\npm_global\node_modules\@angular\cli\node_modules\ajv\node_modules\json-schema-traverse 812 error code ENOENT 813 error errno -4058 814 error sysca...
VUE 脚手架 cli4 npm install -g @vue/cli 安装报错 常见踩坑
JsonYuer的博客
06-20 7222
VUE脚手架安装踩坑 全局模式下npm install -g @vue/cli可能出现的错误 如果报出npm不是内部命令的话，证明没有安装node.js需要在nodejs的官网去下载它 用vue -V查看vue的版本时报错，此时要注意后面的V是大写 如果错误的提示为 ERR：path：‘某个文件的路径’，说明在安装这个脚手架之前，有其他跟这个脚手架有关的东西被安装了；只需要将path下面指定的文件删掉重新安装即可 例如以下错误 解决方法用管理员身份打开cmd，输入命令npm clean cache –for
npm install -g @vue/cli 报错
热门推荐
zhumizhumi的博客
06-20 2万+
最近两天用 npm install -g @vue/cli 之后，出大事了。。。 npm 报错： 重命名、超出最大调用栈，各种折腾，后来发现问题所在，今天写出来，一方面提醒自己，一方面利于他人。 问题原因：公司给我们装的系统都是公司内部定制的系统，有些c盘敏感路径不让操作，于是我就想到更改npm全局安装模块和全局缓存模块的默认路径 　　一、在D:\node文件中新建文件夹node_cach...
vue开发环境和生产环境应用
xinxin_zhu的博客
03-06 833
1.需求 项目中经常会有线上线下接口地址 服务 内网 外网的区分,发布的时候改来改去很麻烦..有些不能统一配置的内网外网就引用的时候需要判断一下. //process.env是全局配置的 可以在各个js 和vue 组件中使用 if (process.env.NODE_ENV === 'development') { //开发环境 production 生产环境 // 引用js 接...
@arcgis/core实现定位
最新发布
04-27
要使用ArcGIS API for JavaScript中的@arcgis/core来实现定位，需要先加载必要的模块，例如： ```js import { Map, MapView } from '@arcgis/core'; import Locate from '@arcgis/core/widgets/Locate'; ``` 然后...
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

X北辰北

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值