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方法都可以实现,那么如何知道自己应该结合项目使用哪一个方法呢?这两个方法有什么区别呢?小朋友你是否有很多问号?有问号,看比较



Logo

基于 Vue 的企业级 UI 组件库和中后台系统解决方案,为数万开发者服务。

更多推荐