Vue 项目引入ArcGIS API for JavaScript，并创建一张地图 （学不会揍我）

最新推荐文章于 2024-08-01 15:12:32 发布
最新推荐文章于 2024-08-01 15:12:32 发布
阅读量9.4k 收藏 44
点赞数 6
分类专栏： GIS 前端基础 揍我系列 文章标签： javascript vue.js arcgis
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/New_Wang/article/details/120951237
版权
本文详细介绍了如何在Vue项目中通过ArcGIS API for JavaScript的两种引入方式：AMD模块托管和ES模块npm安装。对比了两种方法的优劣，并演示了解决样式问题的过程。适合开发者根据项目需求选择合适的方法。

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

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 的最常见方法。

<link rel="stylesheet" href="https://js.arcgis.com/4.21/esri/themes/light/main.css">
<script src="https://js.arcgis.com/4.21/"></script>

   将以上两行代码复制，粘贴至vue项目中public 文件目录下的index.html页面中

 如下图方式放置即可

然后创建一个地图页面，try 一 try吧

页面效果，如下：

方法二： 使用 NPM 的 ES 模块，API 也可通过JavaScript 包管理器npm作为 ES 模块使用。

  进入项目目录，打开命令行

   
  安装 @arcgis/core，如下图：

   
  指令输入敲回车，等待安装完成即可：

 
  出现如下图效果，即为安装完成

 新建一个地图页面，按需引入相应的方法


页面效果：


聪明的朋友会发现，两种方法构造出来的地图不一样，而且第二种很明显会出现一些样式问题


不要着急，既然是样式不对，那么知道是样式原因即可解决，上代码


引入样式后，刷新页面，效果如下：

 3.  那么关于以上AMD、ES方法都可以实现，那么如何知道自己应该结合项目使用哪一个方法呢？这两个方法有什么区别呢？小朋友你是否有很多问号？有问号，看比较



Vue中使用ArcGIS API for JavaScript
abcdTracy的博客
12-01 1570
1、安装依赖（esri-loader） esri-loader是 arcgis 的官方依赖，是开发环境的依赖，因此使用命令 npm i esri-loader --save-dev 来安装. npm i esri-loader --save-dev 2、使用 在需要用到的地方引入esri-loader import * as esri from 'esri-loader'; // 在mounted钩子函数中引入arcgis的js文件和css，这里是4.17版本 mounted() { esri.
Geoscene api for javascript加载倾斜模型
qq_31937799的博客
02-13 163
加载倾斜模型用到Geoscene 的两个api：IntegratedMeshLayer、SceneView，arcgis类同。
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...
如何在vue项目中应用arcgis for javascript
jieyucx的博客
06-05 1549
【代码】如何在vue项目中应用arcgis for javascript。
在vue3中使用ArcGIS API for JavaScript
weixin_56319078的博客
03-26 1057
在网上很少有讲如何在Vue3中创建Arcgis的，所以我在这分享一下一个最基本的创建流程我这教程需要对Vue3有一个最基本的了解才可以使用。
ArcGIS API For JS +Vue框架开发
monaleila的博客
10-12 3828
一、空Vue项目模板 你好！ 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Markdown编辑器, 可以仔细阅读这篇文章，了解一下Markdown的基本语法知识。 新的改变 我们对Markdown编辑器进行了一些功能拓展与语法支持，除了标准的Markdown编辑器功能，我们增加了如下几点新功能，帮助你用它写博客： 全新的界面设计 ，将会带来全新的写作体验； 在创...
从零开始的VUE+ArcGIS API for JS项目——初始化地图应用
hfhf45_的博客
07-31 1986
从零开始创建基于vue3 + vite3 + arcgis map sdk for js的 webgis前端项目（持续更新中）
vue-cli@4.3.0-引入arcgis
pamerely的博客
12-30 497
vue项目引入arcgis vue-cli@4.x创建项目引入arcgis 引入arcgis_js_api，放在public静态资源文件夹里 修改两个文件 1.init.js baseUrl:"/library/3.30/3.30/dojo" 2.dojo.js baseUrl:"/library/3.30/3.30/dojo" 或者可以直接获取浏览器地址栏的ip和端口，拼接上去; let url = window.location.origin; baseUrl:`${url}/library/3.30/
ArcGIS Maps ：在Vue3中加载ArcGIS地图
⭐【World of Yeeking】⭐
05-10 2700
vue3加载ArcGIS地图
在vue中使用ArcGIS API for JavaScript
weixin_45752569的博客
06-04 4803
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+ArcGIS API for JavaScript(1)——加载地图
子时不睡的博客
07-30 1778
前言 因为要做一个和ArcGIS相关的项目，所以记录一下自己的学习过程。 我使用的版本 ： VScode vue-cli 版本：4.5.13 ArcGIS API for JavaScript 文档（4.20版本）： ArcGIS API for JavaScript 主要还是跟着文档走 正文 有多种方式来将ArcGIS API for JavaScript引入自己的应用程序中，我是通过ES模块来构建的项目。 1. 先安装模块。 npm install @arcgis/core 安装之后看一下node_m
vue+三维GIS地图
12-08
此实例为vue版本三维GIS地图，其中包含底图切换、图层控制、图上量算、空间分析、坐标定位、图上标绘、地图打印等功能
ArcGIS API for JavaScript3.25
08-29
网上的demo大多都是基于arcgis_js_api 3.25的，4.X的例子比较少
ArcGIS API for JavaScript V3.9 api 和 sdk包
01-20
ArcGIS API for JavaScript是基于JavaScript语言的，它允许开发者在网页上创建交互式地图，包括添加图层、标注、地理编码、地理分析和空间查询等功能。V3.9版本主要关注性能优化和新特性的引入，比如3D地图支持、...
从零开始的VUE+ArcGIS API for JS项目——底图切换工具（天地图，高德）
hfhf45_的博客
08-01 2131
实现自定义底图切换的工具，添加天地图，高德等地图作为底图。
【总结】Vue+arcgis
weixin_41686505的博客
07-18 1449
Vue+arcgis
基于VUE的ArcGIS API for JS 4.x开发：网页端加载shp数据并符号化
老靳的WebGIS
05-10 2926
ArcGIS API for JS 4.x 网页端加载shp数据并符号化 实现的效果 实现步骤： 点击上传按钮，选择shp文件进行上传 使用 FileReader.readAsArrayBuffer()函数，将加载的shp数据读取为二进制文件 FileReader.readAsArrayBuffer()说明文档 转换成功之后，利用shapefile库将二进制文件转为geojson文件 shapefile库 解析geojson文件，转为graphic，并添加至地图 1 安装需要用到的库 需要用到的js库
ArcGIS API for JavaScript+vue系列（一）-使用npm安装@arcgis/core
热门推荐
tjx1997的博客
08-11 1万+
目录一、ArcGIS API for JavaScript简介二、vue简介三、安装@arcgis/core 一、ArcGIS API for JavaScript简介 ArcGIS API for JavaScript是WebGIS开发中非常重要的前端JS库，是浏览器端调用ArcGIS功能所使用的库。如Arcmap Pro中所使用的创建要素，编辑要素等地图功能，在浏览器端要实现这些共嗯那个即需要调用ArcGIS API for JavaScript。 ArcGIS API for JavaScript目前
在 vue中使用 Arcgis for javascript
Anything2207294253的博客
02-07 1415
安装依赖 npm i esri-loader -S 页面中使用 <body> <div id="viewDiv"></div> </body> #viewDiv { padding: 0; margin: 0; height: 100%; width: 100%; } import {loadModules} from "esri-loader"; 创建2D视图 MapView通过将对象传递给构造..
vue中使用ArcGIS API for JavaScript 显示要素图层完整代码
最新发布
03-09
<think>好的，我现在需要帮助用户在Vue项目中集成ArcGIS API for JavaScript来显示要素图层，并提供一个完整的示例代码。首先，我需要回忆相关的步骤和引用内容。 根据用户提供的引用，特别是引用[3]提到，从ArcGIS API v4.18开始，可以使用@arcgis/core模块通过ES模块构建，而无需esri-loader。因此，我应该优先推荐这种方法。需要安装@arcgis/core包，并在Vue组件中引入必要的模块，如Map、MapView、FeatureLayer等。同时，需要引入CSS样式以确保组件正确渲染。 接下来，我需要确保代码结构符合Vue的单文件组件结构，包括模板、脚本和样式部分。在模板中，应该有一个div元素作为地图的容器，并设置ref以便在组件中访问。在脚本部分，需要导入所需的ArcGIS模块，并在mounted生命周期钩子中初始化地图和视图，添加要素图层。此外，需要注意在组件销毁时销毁MapView实例以避免内存泄漏。 用户可能还需要配置API密钥，如引用[3]中提到的使用esriConfig.apiKey。因此，在示例代码中应该包含如何设置API密钥的部分，并提示用户替换为自己的密钥。 另外，引用[4]指出官网知识的重要性，但可能不需要覆盖全部内容。因此，示例代码应保持简洁，专注于要素图层的显示，同时提供必要的注释说明关键步骤。 最后，需要验证代码的LaTeX格式是否符合要求，行内公式用$...$，独立公式用$$...$$，但根据用户的问题，可能此处不需要数学公式，但需确保其他格式正确。同时，生成相关问题，帮助用户进一步学习。</think>以下是在Vue 3项目中集成ArcGIS API for JavaScript显示要素图层的完整实现步骤和示例代码： ### 一、环境准备 1. 创建Vue项目： ```bash npm create vue@latest ``` 2. 安装ArcGIS核心包： ```bash npm install @arcgis/core --save ``` ### 二、完整示例代码 ```vue <template> <div class="map-container" ref="mapContainer"></div> </template> <script setup> import { ref, onMounted, onBeforeUnmount } from 'vue'; import Map from '@arcgis/core/Map'; import MapView from '@arcgis/core/views/MapView'; import FeatureLayer from '@arcgis/core/layers/FeatureLayer'; import esriConfig from '@arcgis/core/config'; // 配置API密钥（需申请自己的密钥） esriConfig.apiKey = "YOUR_API_KEY"; const mapContainer = ref(null); let view = null; onMounted(() => { // 创建要素图层 const featureLayer = new FeatureLayer({ url: "https://services.arcgis.com/V6ZHFr6zdgNZuVG0/arcgis/rest/services/Landscape_Trees/FeatureServer/0", outFields: ["*"], popupTemplate: { title: "树信息", content: [ { type: "fields", fieldInfos: [ { fieldName: "COMMON_NAM", label: "名称" }, { fieldName: "SCIENTIFIC", label: "学名" } ] } ] } }); // 初始化地图 const map = new Map({ basemap: "arcgis-topographic", layers: [featureLayer] }); // 创建地图视图 view = new MapView({ container: mapContainer.value, map: map, center: [-118.805, 34.027], // 经纬度坐标 zoom: 13 }); }); onBeforeUnmount(() => { if (view) { view.destroy(); } }); </script> <style> @import "https://js.arcgis.com/4.25/@arcgis/core/assets/esri/themes/light/main.css"; .map-container { width: 100%; height: 600px; margin: 0; padding: 0; } </style> ``` ### 三、关键配置说明 1. **API密钥**：需到[ArcGIS开发者平台](https://developers.arcgis.com/)申请免费密钥[^3] 2. **要素图层URL**：示例使用公开的树木数据服务，可替换为自定义服务地址 3. **弹窗配置**：通过`popupTemplate`定义要素点击弹窗内容[^1] 4. **视图销毁**：必须在组件卸载时销毁视图避免内存泄漏 ### 四、运行验证 1. 启动开发服务器： ```bash npm run dev ``` 2. 访问`http://localhost:5173`应看到包含要素图层的地图
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

New_Wang

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

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

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

打赏作者

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

抵扣说明：

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

余额充值