arcgis api for 4.x 学习笔记-在Vue 2.X项目中部署arcgis api for javascript 4.x（一）

一、介绍

访问API

有多种选项可将ArcGIS API for JavaScript引入您的应用程序。我的一篇文章已经介绍过有关 AMD和ES模块的更多信息。

通过ArcGIS CDN的AMD模块

访问API的最常见方法是使用托管版本。从我们的CDN中引用API和CSS，以开始在您的应用程序中使用API​​。

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

通过CDN的ES模块

注意：目前仅建议将这种方法用于开发和原型制作。

 
<link rel="stylesheet" href="https://js.arcgis.com/4.18/esri/css/main.css">
<script type="module">
  import Map from "https://js.arcgis.com/4.18/@arcgis/core/Map.js";

  // Use the Map class
</script>

通过NPM的ES模块

也可以使用npm（JavaScript程序包管理器）使用JavaScript API。您可以在本地安装API，以与JavaScript框架（如React和Vue）以及模块 捆绑程序（如 webpack或 rollup.js）一起使用。

安装：

npm install @arcgis/core

然后导入模块：

import Map from "@arcgis/core/Map";

比较AMD和ES模块

这是使用AMD和ES模块的一些常见原因。

	CDN（AMD）	ESM本地版本	AMD本地版本
无需安装，配置或本地构建	√
通过CDN缓存实现快速下载性能	√
通过npm轻松安装		√
与大多数现代框架和构建工具无缝集成		√
将API版本4.17或更早版本与框架或构建工具一起使用			√
使用Dojo 1或RequireJS			√

注意：如果您将4.18+与框架或构建工具一起使用，并且没有使用Dojo 1或RequireJS，则应该 使用ES模块进行 构建。

二、使用ES模块构建

将模块安装到您的项目中：

npm install @arcgis/core

然后使用import语句加载单个模块。

 
import WebMap from '@arcgis/core/WebMap';
import MapView from '@arcgis/core/views/MapView';

下一篇：arcgis api for 4.x 学习笔记-在Vue 2.X项目中部署arcgis api for javascript 4.x（二）_u012917880的博客-CSDN博客