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

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