ArcGIS API for JavaScript开发入门必读

X北辰北

发布于 2022-02-22 15:54:43

5.7K0

发布于 2022-02-22 15:54:43

ArcGIS API for JavaScript开发必读的一篇入门文档，文章中对ArcGIS API for JavaScript做了简单的介绍，包括学习路线、版本选择、使用流程和一些学习资源等内容，大家通过本文的阅读，相信会对ArcGIS API for JavaScript的开发有一个基础的了解，从而在后期的学习和使用中能达到事半功倍的效果。

写在前面

这篇文章写在我用ArcGIS API for JavaScript(后面统称为”ArcGIS JS API”)开发了两年项目后的某一天夜里。写这篇文章主要是两个目的吧，第一个原因肯定是为后面越来越多的从事WebGIS开发的GISer提供一个学习路线，当然，我提供的这个学习路线仅仅是一个参考；第二个原因就是我想写文章了，八月份一直忙着做项目，忘记了更新博客。

什么时候适合读这篇文章呢

在校期间无聊想学WebGIS开发之前
当你参加Esri全国开发者大赛(目前最新的名称应该是”易智瑞全国开发者大赛”)时
工作中项目开发涉及到地图类功能模块的开发时
对高德地图、百度地图等的背后实现的技术原理感兴趣或者自己技术能力很强想动手实现一个类似的地图应用平台时

以上就是我想到的一些场景了，如果还有没列举出来的，欢迎大家在下方留言补充。接下来我们先来一些基础的介绍吧。

ArcGIS JS API介绍

说了那么多，今天的主角还没登场，那么我们接下来聊聊ArcGIS JS API到底是什么。

ArcGIS JS API全称为”ArcGIS API for JavaScript”，它目前为止有两个大版本：一个是3.X版本，另外一个是4.X版本，其中3.X版本是原来最早发布的版本，里面对二维地图的操控这些比较详细，4.X版本是后来发布的版本，主要是增加了三维地图场景这一块的内容，目前这两个版本同时更新，3.X版本目前最新版是3.33，4.X版本目前最新版是4.16，对于版本的介绍暂时就到这里，后面我们详细介绍。

ArcGIS JS API，我们通过对它的名称拆分一下的话，可以得到如下信息：

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

对以上的信息重新组合的话，我们不难得到如下定义：ArcGIS JS API是ArcGIS软件对外提供的一些通过JS编写的接口，我们按照ArcGIS JS API的官网文档要求去调用这些接口的话就会得到预期的返回值。

以上的文字如果不理解，没关系，我们继续看接下来的内容。

ArcGIS是什么

上述在介绍ArcGIS JS API的时候提到了ArcGIS这个单词，如果不是搞GIS的同学，或许对ArcGIS很陌生，所以我们还是要花点篇幅来介绍下ArcGIS。

ArcGIS是一款非常优秀的GIS数据处理软件，这就是它的本质。大家不要被百度百科和网上的各种言论搞的迷迷糊糊、晕头转向的，各位小伙伴只需要记住刚才这一句话即可。其实ArcGIS发展到今天，刚才的描述已经有些不太准确，更加准确的描述应该是：ArcGIS不是一个软件，而是一个平台，我们称之为”ArcGIS平台”。

作为一名GISer，在我们的工作和学习中，其实使用和接触到的软件更多的是ArcGIS Desktop、ArcGIS for Server、ArcGIS Pro这三个软件，这三个软件其实仅仅是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 JS API学习路线

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

WebGIS其实拆开来看的话就是由Web和GIS两大块组成。其中Web就是我们通过谈论的前端开发，也叫做Web开发，那既然涉及到前端开发，三大前端基础技术你是躲不过去了，HTML、CSS、JavaScript这三块的内容你必须学习和掌握，不然趁早放弃WebGIS的开发，更不要说做ArcGIS JS API的开发了。这三块的内容其实没有要求你掌握得多精通，如果大家能写一个html页面、能在前端正常显示，并且可以说清楚HTML、CSS、JS这三个技术是如何搭配使用的就可以的，至于后面的H5、CSS3、Vue、React这些，都是属于前端开发的进阶内容了，后期有精力的话大家再去学习吧。

在GIS这一块，我们可以大致分为GIS理论知识和GIS开发两块，GIS理论知识很多，也很复杂，属于大学期间GISer的必修课，在这里就不多做介绍，如果不是本专业的话，大家掌握了前端开发的知识后，GIS理论这块如果把GIS中的数据和坐标系搞清楚，就可以了；GIS开发这块我们只介绍B/S架构的开发，也就是WebGIS开发，C/S架构的桌面端开发目前市场上大家可以看招聘要求，需求量并不大，所以就不做过多介绍。B/S架构的开发这块，我们其实只需要掌握一个地图库即可，因为需要调用地图库里面的一些接口来实例化地图和图层，进而进行一些地图交互这些，所以大家可以知道，ArcGIS JS API其实是一个地图库，这个地图库是由JS编写的。除了ArcGIS的JS地图库之外，其实还有超图的JS地图库、百度地图的JS地图库、高德地图的JS地图库等，还有很多开源的地图库。

所以经过以上内容的介绍，大家应该对ArcGIS JS API的学习路线有一个基础的认识了：先学习HTML、CSS、JS的基础知识，去写一个简单的html页面并将它在前端浏览器中显示；然后再去学习ArcGIS JS API的基础知识，实例化一个地图并在前端浏览器展示；最后尝试着去学习ArcGIS JS API官网上更多的内容，去实现一个小型的demo系统，实现图层增删改查、渲染、空间分析等功能。如果大家有需要，我后期会抽时间整理一门ArcGIS JS API的项目实践课程，大家可以跟着视频课程动手学习。

ArcGIS JS API版本选择

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

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

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

ArcGIS JS API使用流程

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

如果你对上述地图的实现过程比较好奇的话，跟着文章我们一起来实现。

首先我们先在自己电脑上某一个文件目录下新建一个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 JS API的开发包和样式包，如下：

<!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>
  </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.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>
  </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 JS API使用的完整流程，我们来做一下梳理，让大家看的更加清晰。

1、新建一个HTML文件并初始化HTML页面结构
2、加载ArcGIS JS API的js开发包和css样式包
3、新建存放地图的DOM节点并设置样式
4、实例化地图的逻辑代码编写
    4.1、通过require函数加载所需要的API模块
    4.2、在require函数的回调函数中做参数映射
    4.3、在require函数的回调函数体中实例化各个API模块
5、将html文件移动到本地服务器目录，并通过localhost的方式访问

有了上面的梳理，大家对整个ArcGIS JS API的使用流程应该很清晰了，我们在后面做项目的时候，其实都是按照这个流程来做的，唯一不同的就是在第四步而已，这一步因为涉及到加载不同的模块，所以大家可能觉得比较困难的就是刚上手时并不知道自己要实现的功能需要加载哪些模块，解决这个方法最好的办法就是百度和查官网文档，如果实在不清楚，可以联系博主咨询，只要大家对ArcGIS JS API用的比较熟练了，那么后期要实现功能时就能很容易的找到自己需要的API模块了。

结尾

这篇文章就暂时介绍到这里了，后期如果有想起来的东西的话再来更新，大家在学习和工作中遇到什么问题的话可以联系博主咨询哦。文章最后给大家答疑几个问题，然后给一些相关的学习资源吧。

附：

ArcGIS JS API高频问题答疑（基础性知识，持续更新）：

A：ArcGIS JS API有没有中文文档，英文的官网文档看不懂？

Q：没有中文文档，如果实在看不懂英文，就借助谷歌浏览器自带的翻译功能学习吧。

A：ArcGIS JS API有没有国内部署的地址，官网的地址加载很慢？

Q：这个也没有，大家需要自己本地部署一套，详细操作文档请看博主的其他文章。

A：我在ArcGIS Server上发布了一些数据服务，应该用哪些API去实例化服务图层呢？

Q：实例化服务图层的时候，API的选用要看具体的服务类型，博主在这里列举了几个最常用的服务类型和实例化对应服务的API(4.X版本)，大家可以参考：

服务类型	服务说明	需要的API	备注
动态服务	一般我们不作处理直接发布的服务通常都是动态服务，服务地址以MapServer结尾，服务信息中没有切片信息	esri/layers/MapImageLayer	此处仅供参考，详细使用请看官网文档
切片服务	在发布服务的时候对服务做了切片，服务地址以MapServer结尾，服务信息中可以查看到切片信息	esri/layers/TileLayer或者esri/layers/WebTileLayer	此处仅供参考，详细使用请看官网文档
影像服务	对tif这些数据发布后的服务，服务地址以ImageServer结尾	esri/layers/ImageryLayer	此处仅供参考，详细使用请看官网文档
要素服务	发布服务的时候选择了服务类型为要素，可以实现对服务的数据要素进行编辑，服务地址以FeatureServer结尾	esri/layers/FeatureLayer	此处仅供参考，详细使用请看官网文档