当前位置：服务支持 > 软件文章 > ArcGIS Maps SDK for JS（一）：概述与使用入门

ArcGIS Maps SDK for JS（一）：概述与使用入门

阅读数 14

1 概述

ArcGIS Maps SDK for JavaScript（以前称为 ArcGIS API for JavaScript），是Esri（环球信息科技公司）开发的一款开发的一款基于JavaScript的webGIS开发工具，用于构建网络制图和空间分析应用程序。SDK 包含 JavaScript API、API 参考、文档、示例和其他资源，可帮助构建网络制图应用程序。截止到2020年6月，已经来到了4.27版本。

官网链接：https://developers.arcgis.com/javascript/latest/

在这里插入图片描述

ArcGIS Maps SDK for JavaScript是一个强大的GIS工具，可以帮助开发人员构建出交互性的地图应用程序和各种GIS应用程序，使其更具有可操作性和实用性。使用ArcGIS Maps SDK for JavaScript，开发人员可以进行以下操作：

地图展示和交互：可以使用该SDK构建交互性的地图应用，包括缩放、漫游、分层、标记和搜索等功能。
空间分析和数据可视化：该SDK提供了广泛的空间分析工具和数据可视化选项，可以帮助用户更好地理解和处理各种地理数据。
位置感知和路由：该SDK提供有关位置感知和路由的工具，可以帮助用户在地图上查找地址或路线，并快速找到最佳路径。
常规GIS操作和应用程序开发：该SDK可以帮助用户构建常规GIS应用程序，如地图编辑器和地图查询工具。开发人员可以使用ArcGIS Maps SDK for JavaScript来开发自己的GIS应用程序，扩展GIS功能并提高工作效率。

2 如何使用ArcGIS Maps SDK for JavaScript

将 ArcGIS Maps SDK for JavaScript 引入应用程序有多种选择。最常见的方法是通过 ArcGIS CDN 获取 AMD 模块，也可以使用 ES 模块进行本地构建。

ArcGIS Maps SDK for JavaScript 有 AMD 和 ES 两种模块。自 4.0 版起，API 以 AMD 的形式发布。ES 模块从 4.18 版开始提供。

AMD 模块采用异步模块定义格式，使用 require() 方法和第三方脚本加载器加载模块及其依赖项。

ES 模块（也称为 ECMAScript 模块或简称 ESM）是一种官方的标准化模块系统，可通过import语句与所有现代 浏览器 配合使用。ES 模块不需要单独的脚本加载器。

2.1 AMD 模块与 ES 模块

如果您在使用 AMD CDN 时没有 JavaScript 框架或本地构建工具，则无需迁移。未来，AMD 模块仍将可用。

如果您正在使用框架或构建工具启动一个新项目，并且没有使用 Dojo 1 或 RequireJS，那么您应该使用 ES 模块。

ES 模块和 AMD 模块实现了相同的 API 功能。例如，以下代码片段提供了同等功能。

ES 模块：

import Map from '@arcgis/core/Map.js';
import MapView from '@arcgis/core/views/MapView.js';

const map = new Map({
  basemap: "topo-vector"
});

const view = new MapView({
  container: "viewDiv",
  map: map
});

AMD 模块

require(["esri/Map", "esri/views/MapView"], (Map, MapView) => {
  const map = new Map({
    basemap: "topo-vector"
  });

  const view = new MapView({
    container: "viewDiv",
    map: map
  });
});

2.2 AMD 模块和 ES 模块比较

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

	CDN (AMD)	CDN (ESM)	本地构建 ESM	本地构建 AMD
无需进行安装、配置或本地构建	√	√
通过 CDN 实现快速下载	√
仅供测试		√
可通过 npm 轻松安装			√
与大多数现代框架和构建工具无缝集成			√
通过框架或构建工具使用 4.17 或更早版本的应用程序接口				√
使用 Dojo 1 或 RequireJS				√

使用 AMD 的优势包括：

下载速度快，缓存高度优化。
无需安装或配置。
API 自动更新到最新版本。

ES 模块 仅用于测试，并未针对模块加载性能进行优化。要获得 ES 模块的最佳性能，请在本地构建它们。

3 几种安装方式

3.1 通过 ArcGIS CDN 获取 AMD 模块

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

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

3.2 通过 NPM 运行 ES 模块

API 还可以通过 JavaScript 包管理器 npm 以 ES 模块的形式提供。您可以在本地安装 API，以便与 React 和 Angular 等 JavaScript 框架以及 webpack 或 rollup.js 等模块捆绑程序一起使用。

安装

npm install @arcgis/core

导入

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

3.3 通过 CDN 获取 ES 模块

注意：这种方法目前只推荐用于开发和原型设计。

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

  // Use the Map class
</script>