ArcGIS for Javascript API

!注意！：ArcGIS JS API 3.x和4.x系列有很大区别。这里课本上的是3.x和之前的版本。4.x系列是模块化的，当然也会用到dojo控件，但是使用起来区别很大。dojo2.x之后是模块化框架，而ArcGIS4.x是模块化类库。可以说，ArcGIS4.x和DOJO5.0几乎是无法兼容的。因为dojo框架是无法与React结合的吧？

前言：

-什么是HTML5？HTML5具有哪些标签？:https://baike.baidu.com/item/html5/4234903?fr=aladdin

-什么是CSS3？CSS3具有哪些新功能？：

-JavaScript现状：JavaScript是一种基于对象（Object）和事件驱动（Event Driven）并具有安全性能的脚本语言，使用它的目的是与HTML超文本标记语言、Java脚本语言一起实现在一个Web页面中连接多个对象，与Web客户交互作用，从而可以开发客户端的应用程序等。

它的出现弥补了HTML语言的缺陷，它具有以下几个基本特点。

（1）脚本语言。

（2）基于对象的语言。

（3）简单性。

（4）安全性。它是一种安全性的语言，它不允许访问本地的磁盘，并不能将数据存入到服务器上，不允许对网络文档进行修改和删除，只能通过浏览器实现信息浏览或动态交互，从而有效地防止数据的丢失。

（5）动态性。它对用户的反映采取以事件驱动的方式进行响应，比如按下鼠标，被视为事件。当事件发生时，可能会引起相应的事件响应。

（6）跨平台性。

-AJAX

-Dojo

ArcGIS API for Javascript概述

通过ArcGIS API for Javascript可以将ArcGIS Server提供的地图资源或在线资源嵌入到Web应用中。

（1）快速创建交互式的地图应用。

（2）提供功能强大的组件，帮助开发者完成基本的空间数据操作、地图操作以及一些基本浏览功能。

（3）提供对地图和数据进行基于空间的查询、编辑和分析等功能。

（4）调用ArcGIS Server的GP功能，执行空间分析、地理处理或其他需要服务器端执行的工具、模型、运算，并展示专业的分析结果。

ArcGIS API for Javascript根据具体的功能可以更详细地划分为以下几个的功能点。

（1）空间数据展示：

（2）客户端Mashup：

（3）图形绘制：

（4）符号渲染：

（5）查询检索：

（6）地理处理：

（7）网络分析：

（8）在线编辑：

（9）时态感知：

（10）影像处理：

（11）地图输出：

ArcGIS API for Javascript具有很强的扩展性，开发者在掌握了API的原理和设计后，可以根据自己的业务需求自由地扩展API中的功能类、图层、工具，方便在开发过程中使用。

ArcGIS API for Javascript开发原理解析

本节将对ArcGIS API for Javascript的开发原理进行介绍，主要包括：API的运行流程——介绍从用户在应用中操作到应用给用户响应反馈之间，API和ArcGIS Server都做了哪些工作；重点对象——介绍API中常用的JavaScript类以及其结构和属性含义；控件——在API中提供了很多功能强大且易用的控件，主要介绍其使用方法和功能；事件——事件是JavaScript开发中一个很重要的部分，本节也会介绍在ArcGIS API for Javascript中提供了哪些自定义的事件及其触发条件和使用方法。

4.4.1 运行流程

用户操作Web应用或移动应用时，ArcGIS API for Javascript会监控用户行为，并相应地将用户的操作按照ArcGIS for Server提供的REST API的格式转化为HTTP请求，设置请求的地址、参数并提交给ArcGIS for Server，ArcGIS for Server收到REST请求后根据参数进行处理，得到结果，将结果转化为JSON数据，将数据作为REST请求的响应返回给ArcGIS API for JavaScript，由ArcGIS API for JavaScript对数据进行解析转化为API中的对象，方便应用将结果可视化地展示在应用中。

还有一种是，ArcGIS API for Javascript本身也提供了一些不需要与ArcGIS Server进行通信即可完成的功能，例如Graphic添加和绘制，ArcGIS API for JavaScript只需在客户端生成图形，完成绘制。

所以，ArcGIS API for JavaScript的运行流程有两种：一种是用户通过应用界面进行操作，ArcGIS API for JavaScript利用本身的功能予以响应。第二种是ArcGIS API for JavaScript将用户的操作转化为REST API提交给ArcGIS Server，等待返回结果并将结果展示在应用中。

4.4.2 重点对象

-地图（Map）

地图是承载图层的容器，主要用于呈现地图服务、影像服务，此外还可以展示WMS服务等。Map对象需要依托于HTML页面中的一个DIV容器作为根节点，所有地图中的子元素都作为DIV容器的子节点存在。地图中可以包含若干个图层，一个图层只有被添加到Map中才能显示出来。Map对象初始化后就包含了一个默认的Graphics图层，可以通过map.graphics获得，用户可以通过这个接口绘制自定义图形。此外，Map对象还包含了一个方便显示要素属性信息的弹出框InfoWindow，可以按照用户的定制来显示某一个要素的属性信息，甚至是图片和外部链接。

除了上述几个重要的组成部分以外，Map对象中还记录了很多统一的属性信息，例如地图的空间参考、当前地图的比例尺、当前地图的显示范围以及地图是否加载完毕等。表4.5列出了Map对象的一些重要属性。

basemapLayerIds:组成底图的图层id数组

extent:当前的显示范围

graphics:通过这个对象可以操作地图自带的GraphicsLayer

graphicsLayerIds:地图中包含的所有GraphicsLayer的id数组

height:

id:

infoWindow:

layerIds:

loaded:

spatialReference:

visible:

-图层（Layer）

图层是承载服务的载体（GraphicsLayer除外），ArcGIS Server将GIS资源作为服务发布出来，要想在浏览器端看到这些服务中的内容，就必须将这些服务和图层进行关联并加入到地图中作为一个可视的图层才可以被客户端使用。不同的服务对应不同的图层类型。下表列出了这些服务和ArcGIS API for Javascript中图层的对应关系。

图层名称	对应服务
ArcGISDynamicMapServiceLayer	ArcGIS Server发布的2D动态地图服务
ArcGISTiledMapServiceLayer	ArcGIS Server发布的2D缓存地图服务
ArcGISImageServiceLayer	ArcGIS Server发布的影像地图服务
GraphicsLayer	客户端图层不对应ArcGIS Server发布的服务
FeatureLayer	ArcGIS Server发布的要素服务或者地图服务中的图层
WMSLayer	调用OGC(Open Geospatial Consortium)矢量地图服务
WMTSLayer	OGC地图切片服务
KMLLayer	Keyhole Markup Language描述和保存地理信息文件
VETiledLayer	微软的Bing地图服务

不同的图层对象在JavaScript API中的依赖继承关系以图层结构存在，在API中，所有的图层都继承了Layer对象，在Layer对象中包含所有图层公用的属性和一些基础的操作方法。而动态地图服务图层、Graphics以及切片图层又扩展出相应的子类，在API中所有的图层的继承关系如图4.7所示。

-几何（Geometry）

在ArcGIS API for JavaScript中Geometry大致上可以分为以下几类：点、多点、线、矩形、多边和屏幕点（ScreenPoint）。其中ScreenPoint对象是以像素的方式表示的点，而点、多点、线、矩形、多边形都继承自Geometry，圆面（Circle）是一种特殊的多边形，所以它继承了Polygon对象。在Geometry对象中，包含了一个公用的属性（空间参考），也就是说，所有的几何体都需要记录其空间参考信息。所有的几何体对象的继承关系如图4.8所示。

-符号（Symbol）

-图形（Graphic）

Geometry定义了对象的形状，Symbol定义了图形是如何显示的，Graphic可以包含一些属性信息，并且在JavaScript中还可以使用InfoTemplate（一个InfoTemplate包含标题和内容模板字符串，该内容模板字符串用于将Graphic的属性转换成HTML的表达式）定义如何对属性信息进行显示，最终的Graphic则被添加到GraphicsLayer中，GraphicsLayer允许对Graphics进行事件监听，一个图形由一个几何、若干个属性、一个符号和一个属性显示模板组成。

-渲染器（Render）

渲染器是以一个图层为单位来改变其符号的工具。通常，Symbol对象改变符号是需要逐个设置的，渲染器是为了方便对图层进行有规律的渲染而提供给开发者使用的，例如按照图形的某个属性值进行分类渲染等。渲染器定义了一种或多种符号以应用于一个GraphicsLayer或FeatureLayer。每个Graphic的符号所使用的符号取决于该Graphic的属性值。渲染器指定了属性值与符号之间的对应关系。API中提供了6种渲染器，它们都继承了Renderer的抽象类。

-要素集合（FeatureSet）

FeatureSet是要素类的轻量级表示，相当于地理数据库中的一个要素类，是Feature（要素）的集合，FeatureSet中的每个Feature可能包含Geometry、属性、符号和一个InfoTemplate。如果FeatureSet不包含Geometry，只包含属性，那么FeatureSet可以看作一个表，其中每个Feature是一个行对象。FeatureSet是我们在利用ArcGIS API for Javascript和ArcGIS Server进行数据通信时的一个非常重要的对象，当使用查询、地理处理和路径分析功能的时候，FeatureSet常常作为这些分析功能的输入和输出参数。

 https://pro.arcgis.com/zh-cn/pro-app/arcpy/classes/featureset.htm

https://desktop.arcgis.com/zh-cn/arcmap/10.3/analyze/arcpy-classes/featureset.htm

4.4.3 事件

ArcGIS API for Javascript是一种事件驱动的开发包，也就意味着用户和一个JavaScript应用系统进行交互的过程就是不停地触发事件并对事件产生响应的过程。在ArcGIS API for JavaScript中的事件机制是按照Dojo框架中的事件管理机制实现的，API中针对Esri自定义的对象，控件提供了自定义的事件对象以及一套触发、回调的方法。

在API中有多种实现使用事件监听的方法：dojo/aspect、dojo/_base/connect、on。其中推荐的方式是使用Dojo的on函数，不过Dojo3.6以前版本都使用的是Dojo的connect方法。下面简单介绍一下如何控制ArcGIS API for JavaScript中的事件。

-增加、删除事件响应

都可以通过on和connect方式实现。分别给出示例代码。

通过on方式实现增加事件响应的代码：

var myUnload = map.on("unload", unloadHandler);

通过on方式实现删除事件响应的代码：

myUnload.remove();

通过connect方法实现增加事件响应的代码：

var myUnload_connect = connect.connect(map, "onUnload", unloadHandler_connect);

通过connect方法实现删除事件响应的代码：

connect.disconnect(myUnload_connect);

我们可以对同一个对象定义多个事件触发回调函数，所有的回调函数会保存在一个堆栈的结构中，当事件触发，会逐个调用回调函数。

require(["esri/map","dojo/domReady!"], function(Map){
  map = new Map("map", {
    basemap:"topo",
    center:[-122.45, 37.75],
    zoom:13
  }
  );
  map.on("load",callback1);//绑定第一个回调
  map.on("load",callback2);//绑定第二个回调
  function callback1(evt){
    console.log("callback1");
  }
  function callback2(evt){
    console.log("callback2");
  }
})

我们为map对象的load事件同时绑定两个回调函数callback1和callback2，我们运行应用，当地图加载完毕后，在控制台上会打出如图所示的结果。

4.4.4 控件

在使用ArcGIS API for Javascript开发的过程中会和各种各样的控件打交道。API提供了很多用来帮助我们快速开发的控件或者小部件，这些控件除了工具条以外，其余都位于esri.dijit中，而工具条位于esri.toolbars中。API中的所有组件都按照Dojo的标准注册成了Dijit，在Dijit一系列生命周期中，每个Dijit都可以通过startup启动，通过Destroy方法销毁。下面对常用控件进行介绍。

-鹰眼图（Overview）

鹰眼图控件用于在当地图显示的比例尺比较大时，方便用户了解当前的可视范围在全幅地图内的位置。鹰眼图示例：

function OverviewMap(){
  var over = 
  {
    map:Map,
    attachTo:"bottom-right",
    color:"#D84E13",
    expandFactor:2,
    baseLayer:new esri.layers.ArcGISTiledMapServiceLayer(MapServer)
  };
  var MapViewer = new esri.dijit.OverviewMap(over, dojo,byId("OverViewDiv"));
  MapViewer.startup();
}

ArcGIS API for JavaScript开发环境搭建

4.5.1 IDE环境设置

-Visual Studio 2012

只要把下载下来的jsapi_vsdoc12_v38.js加入到项目中，即可。https://developers.arcgis.com/javascript/3/jsapi/#api_codeassist

4.5.2  ArcGIS API for Javascript开发环境部署

-在线版

-离线版

http://appsforms.esri.com/products/download/index.cfm?fuseaction=download.all#ArcGIS_API_for_JavaScript

https://developers.arcgis.com/downloads/apis-and-sdks?product=javascript

第一步，解压zip包。

第二步，将标准版API或压缩版API部署到一个Web服务器的发布目录中，例如Tomcat下面的webapps目录；

第三步，替换init.js和jsdojodojo目录下的dojo.js中的[HOSTNAME_AND_PATH_TO_JSAPI]为部署API的绝对路径，注意这里的路径不包含协议名，例如：localhost:8080/arcgis_js_v310_api/arcgis_js_api/library/3.10/3.10/。

完成上述步骤后，就可以在代码中加入引入本地API的语句来获得API的功能了：

  <script src="http://localhost:8080/arcgis_js_api/library/3.9/3.9/init.js"></script>

典型案例解析以及代码分析

本节将通过多个示例代码来介绍ArcGIS API for Javascript的开发方式，并讲解一些使用API开发过程中应用较多的独立功能，以此来加深开发者对API的理解，并且在项目开发时可以借鉴。

4.6.1 Hello World

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="http://localhost:8080/arcgis_js_api/library/3.9/3.9/esri/css/esri.css">
    <script src="http://localhost:8080/arcgis_js_api/library/3.9/3.9/init.js"></script>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>ArcGIS API for JavaScript Tutorials: Create a JavaScript starter app</title>
    <style>
      html, body, #map {
        padding: 0;
        margin: 0;
        height: 100%;
         100%;
      }
      body{
        background-color:#FFF;
        overflow:hidden;
        font-family:"Trebuchet MS"
      }
    </style>
    <script>
      var map;
      require(["esri/map", "dojo/domReady!"], function (Map) {
        map = new Map("map",{
          basemap: "topo",
          center:[116.45, 40.75],
          zoom:3
        });
      });
    </script>
  </head>
  <body>
    <div id="map"></div>
  </body>
</html>

4.6.2 一个基础地图应用

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport">
  <title>Intro to MapView - Create a 2D map - 4.8</title>
  //设置显示区域的样式，地图全页面展示
  <style>     
    html,
    body,
    #viewDiv {
      padding: 0;
      margin: 0;
      height: 100%;
       100%;
    }
  </style>
  //引入js文件和css样式表
  <link rel="stylesheet" href="https://js.arcgis.com/4.9/esri/css/main.css">
  <script src="https://js.arcgis.com/4.9/"></script>
  //开始使用编辑js，实现加载地图效果
  <script>
  // 这是，使用的方法，先将你需要的模块导入，这里使用了Map和MapView。函数调用了导入模块的参数。
    require([
      "esri/Map",
      "esri/views/MapView"
    ], function(Map, MapView) {
      //这里是新建一个地图，设置一些地图属性
      var map = new Map({
        //设置基地图，可以换，这是官方的地图，自己的项目，需要加载自己的地图服务。
        basemap: "streets"
        //还有其他，属性，如layer，ground，用到会再说明
      });
     //新建视图，用的是MapView，是2D的，3D的要用SceneView模块，SceneView方法创建。
      var view = new MapView({
       //显示在HTML上的区域，也就是哪个div里
        container: "viewDiv",
         //将地图服务加载到视图上，这是4.x版本设定，3.x版本可直接创建map时设定，不需要view模块。
        map: map,
       //设置加载地图的缩放等级和中心位置。
        zoom: 11,
        center: [114.332, 30.547] // longitude, latitude
      });
    });
  </script>
</head>
<body>
  <div id="viewDiv"></div>
</body>
</html>

https://developers.arcgis.com/labs/javascript/style-feature-layers/

4.6.3 GraphicLayer

在GIS应用中，绘制图形是非常广泛的功能需求。用户可能为了标记、查看、编辑、显示趋势或其他目的向地图中加入自定义或标准的图片、符号、手绘图形。

ArcGIS API for JavaScript中的GraphicsLayer是为用户提供的装载图形的图层容器。在生成Map对象后，开发者可以在Map中加入多个GraphicsLayer。

-绘制符号（textsymbol）

https://developers.arcgis.com/javascript/3/jssamples/

>>IdentifyTask：参数和返回的结果。

ArcGIS Server for Javascript：https://developers.arcgis.com/javascript/     https://developers.arcgis.com/documentation/core-concepts/apis-sdks-apps/

https://www.jianshu.com/p/be6df07cbf73

ArcGIS Applications and APIs:https://developers.arcgis.com/documentation/core-concepts/apis-sdks-apps/

ArcGIS Viewer:http://www.arcgis.com/home/webmap/viewer.html

https://developers.arcgis.com/javascript/latest/guide/

https://developers.arcgis.com/dashboard?message=sign-up-success

https://developers.arcgis.com/labs/javascript/create-a-starter-app/

https://developers.arcgis.com/labs/javascript/display-point-line-and-polygon-graphics/