ArcGIS Maps SDK for JavaScript 0基础入门

写在前面

回顾了使用 ArcGIS Maps SDK for JavaScript 开发项目的五年经历，深感这段经历对我个人职业发展的重要性。因此，决定将这段经历与其他 GISer 分享，希望能够为各位提供一个学习路线的参考。当然，这个路线仅仅是我个人的建议，每个人的经历和需求都不同，需要根据自身情况进行调整。
此外，我也想通过本文来弥补我在最近一段时间忙于公司项目开发而忘记更新博客的遗憾。希望通过分享我的经验，能够帮助其他 GISer 更好地应对工作中的挑战和困难。我相信，只有不断学习和探索，才能在这个不断变化的行业中保持竞争力。

ArcGIS Maps SDK for JavaScript 介绍

ArcGIS Maps SDK for JavaScript 以前的名称叫做“ArcGIS API for JavaScript”，在2023年初才开始更名为“ArcGIS Maps SDK for JavaScript”。目前为止有两个大版本：一个是3.X版本，另外一个是4.X版本，其中3.X版本是原来最早发布的版本，里面对二维地图的操控这些比较详细，4.X版本是后来发布的版本，主要是增加了三维地图场景这一块的内容，目前这两个版本同时更新，3.X版本目前最新版是3.43，4.X版本目前最新版是4.26，对于版本的介绍暂时就到这里，后面我们详细介绍。
ArcGIS Maps SDK for JavaScript，我们通过对它的名称拆分一下的话，可以得到如下信息：

ArcGIS Maps SDK for JavaScript 其实是 ArcGIS 这个软件对外提供的 API（其实就是一些函数方法，你只管按它的规则传参、调用即可，类似于jQuery.js、moment.js这些库）
这个 API 是通过 JavaScript 这门编程语言编写的，所以它是跟前端开发有关

对以上的信息重新组合的话，我们不难得到如下定义：ArcGIS Maps SDK for JavaScript 是 ArcGIS 软件对外提供的一些通过 JS 编写的接口，我们按照ArcGIS Maps SDK for JavaScript 的官网文档要求去调用这些接口的话就会得到预期的返回值。
以上的文字如果不理解，没关系，我们继续看接下来的内容。
ArcGIS Maps SDK for JavaScript 能做什么
ArcGIS Maps SDK for JavaScript 是一个强大的 JavaScript 库，提供了许多地理信息系统（GIS）相关的功能和工具。它可以帮助开发人员在网页和应用程序中创建交互式地图和地理空间分析功能。下面是 ArcGIS Maps SDK for JavaScript 可以做的一些事情：
1、地图显示和导航：你可以使用 API 创建交互式地图，并在其中添加地图图层、标记点、线条和多边形等地理要素。用户可以平移、缩放和旋转地图，以便更好地浏览地理数据。
2、地理空间分析：API 提供了丰富的地理空间分析工具，使你能够进行地理数据的查询、缓冲区分析、路径规划、热力图生成等操作。这些功能可以帮助你深入分析地理数据，洞察地理模式和关联性。
3、地理编码和逆地理编码：API 支持将地址转换为地理坐标（地理编码），或将地理坐标转换为地址（逆地理编码）。这对于实现地理搜索、位置识别和位置服务非常有用。
4、可视化效果：API 提供了丰富的可视化效果，包括渐变填充、符号化、图表和信息窗口等，使你能够以吸引人的方式展示地理数据。
5、与其他数据源集成：API 可以与其他数据源进行集成，例如地理信息系统（GIS）服务器、实时数据流、传感器数据等。这使得你可以在地图上显示和分析来自不同来源的数据。
6、移动设备支持：ArcGIS Maps SDK for JavaScript 提供了对移动设备的良好支持，可以在移动设备的浏览器上创建响应式的地图应用程序。
总而言之，ArcGIS Maps SDK for JavaScript 提供了丰富的地理信息系统功能，使开发人员能够构建交互式的地图应用程序，并进行地理空间分析、数据可视化和与其他数据源的集成。无论是创建一个简单的地图展示还是开发复杂的地理信息系统应用，该 API 都提供了强大的工具和功能来实现这些目标。

ArcGIS 是什么

上述在介绍 ArcGIS Maps SDK for JavaScript 的时候提到了 ArcGIS 这个单词，如果不是搞 GIS 的同学，或许对 ArcGIS 很陌生，所以我们还是要花点篇幅来介绍下 ArcGIS。
ArcGIS 是一款非常优秀的 GIS 数据处理软件，这就是它的本质。大家不要被百度百科和网上的各种言论搞的迷迷糊糊、晕头转向的，各位小伙伴只需要记住刚才这一句话即可。其实 ArcGIS 发展到今天，刚才的描述已经有些不太准确，更加准确的描述应该是：ArcGIS 不是一个单独的软件，而是一个平台，我们称之为"ArcGIS 平台"，它是一系列软件的统称。
作为一名 GISer，在我们的工作和学习中，其实使用和接触到的软件更多的是 ArcGIS Desktop、ArcGIS for Server、ArcGIS Pro 这三个软件，这三个软件其实仅仅是 ArcGIS 软件体系中的其中三个而已，对于 ArcGIS 平台上其他的软件大家可能了解的太少，那我们来看看完整的 ArcGIS 平台是什么样子的，包括哪些东西：

ArcGIS体系架构通过上图可以看到，我们平时使用最多的 ArcMap、ArcGIS Pro 在上图中的左上角位置，而我们使用的 ArcGIS Server 在上图中的左下方位置，所以大家应该有个基础的认知，这三个软件并不是同一个层次的东西。
有了上述的认知之后我们继续看上面的图，上图其实可以分为上中下三部分，最上层是应用层，里面包括桌面端、移动端、PC端的一些应用软件，主要是做数据采集、处理、渲染显示的工作；最底层是服务器层，包括大家经常使用的 ArcGIS Server，还有一些不常用的处理大数据的 GA Server、处理实时数据的 GE Server、处理影像的 Image Server、还有最新的科学计算的 Notebook Server等，这些 server 服务器支撑着整个 ArcGIS 平台的运行，至于 Data Store，它其实是负责平台中的数据存储；最上层和最底层是由 Portal for ArcGIS 连接，所以 Portal 其实在整个平台中起着一个控制中枢的作用，我们最上层的应用如果要调用最底层 server 里面的数据服务的话，必须要经过 Portal，就是这样一个流程。
以上流程因为有了 Portal 的加入，对于之前一直使用 ArcMap + Server 的同学可能会造成一定的混淆，大家只需要将 ArcMap 和 Server 之间的连接想象成一条小路，将 Portal 想象成这条路中间的一扇门，这样就可以了，门一关，ArcMap 和 Server 就不能通信了，所以我们在前端、ArcMap、或者移动端都访问不到 Server 里面的服务了，就这个意思，其实没多复杂。

ArcGIS Maps SDK for JavaScript 学习路线

ArcGIS Maps SDK for JavaScript 是用来做 WebGIS 开发的，这一点大家必须要知道，它做不了移动端和桌面端，当然，如果你用野路子的话，它也可以做，详细的操作步骤请看我后续的文章。所以大家知道了"ArcGIS Maps SDK for JavaScript 是做 WebGIS 开发的"这一点之后，我们就来看看 WebGIS 是啥玩意：

WebGIS学习路线WebGIS 其实拆开来看的话就是由 Web 和 GIS 两大块组成。其中 Web 就是我们通过谈论的前端开发，也叫做 Web 开发，那既然涉及到前端开发，三大前端基础技术你是躲不过去了，HTML、CSS、JavaScript 这三块的内容你必须学习和掌握，不然趁早放弃 WebGIS 的开发，更不要说做 ArcGIS Maps SDK for JavaScript 的开发了。这三块的内容其实没有要求你掌握得多精通，如果大家能写一个 html 页面、能在前端正常显示，并且可以说清楚 HTML、CSS、JS 这三个技术是如何搭配使用的就可以的，至于后面的 H5、CSS3、Vue、React 这些，都是属于前端开发的进阶内容了，后期有精力的话大家再去学习吧。
在 GIS 这一块，我们可以大致分为 GIS 理论知识和 GIS 开发两块，GIS 理论知识很多，也很复杂，属于大学期间 GISer 的必修课，在这里就不多做介绍，如果不是本专业的话，大家掌握了前端开发的知识后，GIS 理论这块如果把 GIS 中的数据和坐标系搞清楚就可以了；GIS 开发这块我们只介绍 B/S 架构的开发，也就是WebGIS 开发，C/S 架构的桌面端开发目前市场上大家可以看招聘要求，需求量并不大，所以就不做过多介绍。B/S 架构的开发这块，我们其实只需要掌握一个地图库即可，因为需要调用地图库里面的一些接口来实例化地图和图层，进而进行一些地图交互这些，所以大家可以知道，ArcGIS Maps SDK for JavaScript 其实是一个地图库，这个地图库是由 JS 编写的。除了 ArcGIS 的 JS 地图库之外，其实还有超图的 JS 地图库、百度地图的 JS 地图库、高德地图的 JS 地图库等，还有很多开源的地图库。
所以经过以上内容的介绍，大家应该对 ArcGIS Maps SDK for JavaScript 的学习路线有一个基础的认识了：先学习 HTML、CSS、JS 的基础知识，去写一个简单的 html 页面并将它在前端浏览器中显示；然后再去学习 ArcGIS Maps SDK for JavaScript 的基础知识，实例化一个地图并在前端浏览器展示；最后尝试着去学习 ArcGIS Maps SDK for JavaScript 官网上更多的内容，去实现一个小型的 demo 系统，实现图层增删改查、渲染、空间分析等功能。如果大家有需要，可以购买文章末尾的 ArcGIS Maps SDK for JavaScript 的项目实践课程，大家可以跟着视频课程动手学习。

ArcGIS Maps SDK for JavaScript 版本选择

刚开始的时候我们就介绍说 ArcGIS Maps SDK for JavaScript 以后两个版本：3.X和4.X。所以大家在学习和使用的时候就会纠结，到底该选哪一个版本呢？其实这个问题在官网上已经给了参考答案：

如果项目没有三维需求或者以后不考虑三维需求，建议选择3.X的版本
如果项目有三维需求，必须选4.X版本

以上是官网上对于版本选择的参考，但是在目前实际的项目开发中，大家基本都选择4.X来进行开发，所以博主还是建议使用4.X，因为目前官网对于3.X的版本更新的话仅仅是修复一些遗留的 Bug，并不会增加新的功能，相反的，对于4.X版本，每次更新都会增加不少的新功能和新特性，所以就发展趋势来看，4.X成为主流是大势所趋。

ArcGIS Maps SDK for JavaScript 使用流程

经过上述一大部分的介绍性内容后，我们这节来介绍下如何简单的使用 ArcGIS Maps SDK for JavaScript，我们最终会实现如下所示的一张二维地图：

如果你对上述地图的实现过程比较好奇的话，跟着文章我们一起来实现。
首先我们先在自己电脑上某一个文件目录下新建一个 txt 文件，并将文件的后缀改为 html，文件名称改成 HelloWorld.html。
接下来用 txt 编辑器或者 VS Code 编辑器打开此文件，添加进去如下代码，这部分代码功能很简单，就是初始化了一个 html 的页面结构

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no" />
    <title>HelloWorld MapView</title>
  </head>
  <body></body>
</html>

在上述代码的基础之上，我们通过 script 标签和 style 标签引入 ArcGIS Maps SDK for JavaScript 的开发包和样式包，如下：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no" />
    <title>HelloWorld MapView</title>
 
    <link rel="stylesheet" href="https://js.arcgis.com/4.26/esri/themes/light/main.css" />
    <script src="https://js.arcgis.com/4.26/init.js"></script>
 
  </head>
  <body></body>
</html>

然后在 body 标签中新建一个类型为 div 的 dom 节点，给它一个 id 属性，并设置样式，这个 dom 节点其实就是用来存放地图的，如下：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no" />
    <title>HelloWorld MapView</title>
 
    <link rel="stylesheet" href="https://js.arcgis.com/4.26/esri/themes/light/main.css" />
    <script src="https://js.arcgis.com/4.26/init.js"></script>
 
    <style>
        html,body,#map {
          padding: 0;
          margin: 0;
          height: 100%;
          width: 100%;
      }
    </style>
  </head>
  <body>
     <div id="map"></div>
  </body>
</html>

接下来在 body 标签中新建一个 script 标签，并添加如下代码：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no" />
    <title>HelloWorld MapView</title>
    <link rel="stylesheet" href="https://js.arcgis.com/4.16/esri/themes/light/main.css" />
    <script src="https://js.arcgis.com/4.16/init.js"></script>
    <style>
      html,
      body,
      #map {
        padding: 0;
        margin: 0;
        height: 100%;
        width: 100%;
      }
    </style>
  </head>
  <body>
    <div id="map"></div>
    <script>
      require(["esri/Map", "esri/views/MapView"], function(Map, MapView) {
        var map = new Map({
          basemap: "streets"
        });
        var view = new MapView({
          container: "map", 
          map: map, 
          zoom: 4, 
          center: [15, 65] 
        });
      });
    </script>
  </body>
</html>

最后我们将这个 HelloWorld.html 文件拷贝到 Tomcat 或者 IIS 的本地服务器路径下，然后在浏览器中通过地址"http://localhost/HelloWorld.html"就可以访问了。
以上就是 ArcGIS Maps SDK for JavaScript 使用的完整流程，我们来做一下梳理，让大家看的更加清晰。
1、新建一个 HTML 文件并初始化 HTML 页面结构
2、加载 ArcGIS Maps SDK for JavaScript 的 js 开发包和 css 样式包
3、新建存放地图的 DOM 节点并设置样式
4、实例化地图的逻辑代码编写
4.1、通过 require 函数加载所需要的 API 模块
4.2、在 require 函数的回调函数中做参数映射
4.3、在 require 函数的回调函数体中实例化各个 API 模块
5、将 html 文件移动到本地服务器目录，并通过 localhost 的方式访问
有了上面的梳理，大家对整个 ArcGIS Maps SDK for JavaScript 的使用流程应该很清晰了，我们在后面做项目的时候，其实都是按照这个流程来做的，唯一不同的就是在第四步而已，这一步因为涉及到加载不同的模块，所以大家可能觉得比较困难的就是刚上手时并不知道自己要实现的功能需要加载哪些模块，解决这个方法最好的办法就是百度和查官网文档，如果实在不清楚，可以联系博主咨询，只要大家对 ArcGIS Maps SDK for JavaScript 用的比较熟练了，那么后期要实现功能时就能很容易的找到自己需要的 API 模块了。
结尾
这篇文章就暂时介绍到这里了，后期如果有想起来的东西的话再来更新，大家在学习和工作中遇到什么问题的话可以联系博主咨询哦。