在VUE框架中使用@arcgis/core本地部署ArcGIS API for JS

最新推荐文章于 2025-04-11 17:58:43 发布
最新推荐文章于 2025-04-11 17:58:43 发布
阅读量1.6k 收藏 2
点赞数
文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Zoroastriani13/article/details/129196723
版权
文章讲述了如何安装ArcGIS的核心依赖并将其配置到Vue项目中。通过`npminstall`添加必要的包，然后将`@arcgis/core/assets`复制到public目录，以便本地引用CSS。在main.js中设置`esriConfig.assetsPath`，并在vue.config.js中配置webpack，以确保正确加载Esri的样式文件。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

  1. 安装所需依赖：npm install @arcgis/core --save-dev；

  1. npm install -D @babel/core @babel/plugin-proposal-nullish-coalescing-operator @babel/plugin-proposal-optional-chaining babel-loader

  1. 将/node_modules/@arcgis/core/assets文件夹复制到public下

目的是可以添加esri的css样式，这样就避免了必须使用网络链接对css文件的在线引用

​​/node_modules/@arcgis/core/assets​​文件夹所在位置

  1. 在main.js中引入@arcgis/core/config和样式文件

import esriConfig from "@arcgis/core/config";

esriConfig.assetsPath = "./assets";

import '@arcgis/core/assets/esri/themes/light/main.css';

  1. 在vue.config.js中配置webpack

WongRambo
关注
【vue使用@arcgis/core方式开发arcgis for js api地图项目】
qq_37312180的博客
11-21 4161
【vue使用@arcgis/core方式开发arcgis for js api地图项目】​ vue使用@arcgis/core方式开发arcgis for js api地图项目,vue使用@arcgis/core方式开发arcgis for js api地,vue使用@arcgis/core,@arcgis/core,@arcgis/core@4.22.2 ​
【完整的WebGIS教程】6.2 使用@arcgis/core本地部署ArcGIS API for JS
老靳的WebGIS
06-10 4460
这前面的文章中，我使用的都是esri-loader的模式来引入ArcGIS API的，但是有时候我们需要在内网写程序，或者有时候网络条件不好（arcgis api的服务器是在国外），加载在线的api会很慢，所以我还是觉得把api给本地部署了会更好。ArcGIS API for JavaScript的导入方式经历了从“dojo”到“esri-loader”的变化，在4.18版本之后支持了ES Modules模式引入API。但是我一直没用过，我用的还是esri-loader的模式，就是先在代码中需要使用api的
在VUE框架中使用@arcgis/core本地部署 报错
zmskra的博客
09-18 810
这是api 打包之后 定向的问题，不指定 他就会变成 https://xxxx ，不走本地部署好的api。只需要添加 esriConfig.assetsPath = “./assets”;api 是直接 npm 下载的 ，开发的时候好用，部署后就报错不出现地图。尝试了好久，终于找到解决的办法！，在main.js中。
vite+vue3框架通过@arcgis/cor 部署 Arcgis Api for Js
最新发布
weixin_74791403的博客
04-11 1691
（2）@babel/plugin-proposal-nullish-coalescing-operator • 这个插件支持将 ES2020 中引入的 nullish coalescing operator（?. 的作用：用于安全地访问嵌套对象的属性，避免属性不存在时抛出错误。3.添加esri的css样式，避免必须使用网络链接对css文件的在线引用，找到​​/node_modules/@arcgis/core/assets​​文件夹所在位置，复制assets文件夹到public文件夹。
vue 通过@arcgis/core 引用 acrgis地图
qq_40630827的博客
09-29 1958
vue 通过@arcgis/core 引用 acrgis地图 <template> <div class="hello"> <div id="mapview"></div> <div style="position: absolute;z-index:10;"> <button type="primary" @click="print">打印</button> </div&gt
ArcGIS API for JavaScript——vue环境部署
niuge8905的博客
02-15 1838
1、获取开发者的api-key 经过各种尝试，发现在官网申请账号没成功，只能曲线救国，用google账号登陆，并获取api-key。 这个api-key也是一阵好找，按照提示，进入对应网页老是崩溃，最后在下面一个角落里找到。点击“Get your API key”获取。 2、部署开发环境 我比较喜欢用vue开发，用vue开发的环境部署： https://developers.arcgis.com/javascript/latest/es-modules/ 2.1 安装@arcgis/c.
vue使用arcgis for js
孙霸天的专栏
03-24 3124
文章目录载入arcgis for jsHTMLVUEloadModules 载入arcgis for js HTML 在所需要使用的页面引入init.js和css文件即可 VUE 需要引入esri-loader 可以使用阿里的库来加速下载 npm install esri-loader 在需要使用的页面载入功能 import {loadModules} from 'esri-loader' 其中{}中的方法可以根据需要载入 官方文档 loadModules loadModules中根据需
arcgis api for javascript 本地部署
04-28
arcgis api for javascript 环境部署，开发环境本地部署。
【番外】 使用@arcgis/cli脚手架进行ArcGIS JS API开发
X北辰北的博客
03-02 1901
概述 今天兴趣使然，在翻阅ArcGIS API for JavaScript官网的时候，发现了跟esri-loader方法不同的另外一种可以在Vue、React和Angular这种主流框架中使用JS API的开发方式，并将其操作过程记录下来，供有需要的伙伴参考。如果想了解如何通过esri-loader来在Vue、React和Angular这种主流框架中使用JS API的开发，请移步至另外两篇文章...
16 ArcGIS API for JavaScript 4.18基于ES Modules的新开发方式@arcgis/core
热门推荐
X北辰北的博客
12-18 1万+
写在前面 随着前端主流框架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 API for JS项目——初始化地图应用
hfhf45_的博客
07-31 2027
从零开始创建基于vue3 + vite3 + arcgis map sdk for js的 webgis前端项目（持续更新中）
ArcGIS API for JavaScript 4.18+基于ES Modules的本地化设置@arcgis/core local Vue3版本
Higer2008
04-13 3793
ArcGIS API for JavaScript 4.18 4.19 4.20 4.21 4.22 4.23基于ES Modules的本地化设置@arcgis/core local Vue3版本 主要复制asset到public和src下解决
vue+arcgis api在图层的弹框中挂载自定义vue组件
cxp13453551198的博客
04-13 803
vue项目中arcgis api图层弹框自定义
ArcGIS API for JavaScript 4.18+基于ES Modules的本地化设置@arcgis/core local
Higer2008
01-25 2820
ArcGIS API for JavaScript 4.18+（4.18-4.22）基于ES Modules的本地化设置@arcgis/core local
从零开始的VUE+ArcGIS API for JS项目——地图标绘（线）
hfhf45_的博客
09-10 1081
地图标绘是WebGIS应用的基础应用之一，使用地图标绘共功能，主要是实现在地图上绘制点，线，面等图形，对地图上的重点区域进行标记。绘制过程中可能涉及到的需求包括可以自定义点线面的样式，颜色等，能够保存绘制的记录，能够定位绘制的图形等。
Vue 项目引入ArcGIS API for JavaScript，并创建一张地图 （学不会揍我）
New_Wang的博客
10-25 9649
1.（阅读arcgis官网）理解arcgis api安装与设置，不愿意看的同学直接看第二步干货讲解官网链接：Install and set up | Overview | ArcGIS API for JavaScript 4.21 | ArcGIS Developer 2. （干货） ArcGIS API for JavaScript 引入Vue项目的两种方式（推荐第二种） 方法一：使用托管版本，通过ArcGIS CDN 引入 AMD 模块，这也是访问 API 的最常见方法。 <lin..
ArcGIS API4.X + API文档 本地部署（Tomcat）
qq_46160082的博客
12-01 1540
离线部署arcgis api 以及文档
vue + ArcGIS JS API 内网离线部署 私有化开发
create_1234的博客
02-05 624
打开init.js文件搜索HOSTNAME_AND_PATH_TO_JSAPI，替换为/arcgis_js_api/library/4.18。去Arcgis developers官网登录自己的账户，没有就创建一个。在下载页面选择任意一个版本的api下载 ， sdk可以不下载。再打开 4.18/dojo/dojo.js 文件重复上述步骤。更改完这两个文件后arcgis发送的就是本地请求了。下载后解压把api放在public文件夹下。创建需要邮箱，部分邮箱不可用，如qq邮箱。路径直接改为本地路径即可。
ArcGIS API for JavaScript本地部署
weixin_47036445的博客
04-06 3044
选择用记事本打开C:\inetpub\wwwroot\4.6\dojo下的dojo.js文件，在编辑中查找文本**[HOSTNAME_AND_PATH_TO_JSAPI]**，然后将其替换为 www.example.com/4.6/。可自行去官网(https://developers.arcgis.com/javascript/latest/downloads/)下载需要的版本，这里是我已经准备好的4.6版本。”，根据自己的需要选择相应的功能就行了，以下是我自己选择的功能。可以看到原官网代码运行成功。
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值