ArcGIS API for JavaScript

1.获取API

开发人员可以通过多种方式使用ArcGIS API for JavaScript。最常见的方法是使用CDN版本。请参阅下面的更多信息和替代方法。注意：无法修改ArcGIS API for JavaScript的代码。
CDN（托管版本）
推荐的访问API的方法是使用托管版本。从CDN 中引用API ，就可以开始了。

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

2.地图 Map

require(["esri/Map"], function(Map) { /* code goes here */ });

Map类包含用于存储，管理和覆盖2D和3D查看共同的图层的属性和方法。可以在地图上添加或删除图层，但可以通过MapView（用于以2D方式查看数据）或SceneView（用于以3D方式查看数据）进行渲染。因此，地图实例是保存图层的简单容器，而视图是显示地图的图层和底图并与之交互的方法。
单个地图可能被多个视图引用。例如，此示例包含一个Map，该Map在两个单独的视图中可见-一个在2D中，另一个在3D中。由于同一应用程序中的多个视图可以访问一个地图，因此所有与地图图层的用户交互都在View而不是Map上进行。
Map的实例是MapView和SceneView的基本组成部分。应该在视图之前创建Map对象，以便可以将其传递到该map视图的属性中（例如MapView.map，SceneView.map）。

例子：

•	// 加载Map和MapView模块
require(["esri/Map", "esri/views/MapView"], function(Map, MapView) {// 创建映射实例var myMap = new Map({basemap: 'streets'//底图});// 创建一个MapView实例(用于2D查看)并引用映射实例var view = new MapView({map: myMap});
});

（1）basemap 底图

指定地图的底图。底图是一组平铺图层，这些图层将地理上下文提供给MapView或SceneView以及地图中的其他操作图层。
该值可以是底图的实例，也可以是下表中列出的字符串之一。
底图类型：topo，streets，satellite，hybrid，dark-gray，gray，national-geographic，oceans，osm，terrain，dark-gray-vector，gray-vector，streets-vector，streets-night-vector，streets-navigation-vector，topo-vector，streets-relief-vector

（2）layers 图层

操作层的集合。此属性仅包含交互式操作层，如FeatureLayers、WebTileLayers和GraphicsLayers，这些层可以查询、分配不同的呈现程序、分析等等。它不包括basemap底图。
层是一个或多个代表真实世界现象的特性或图形的集合。每个特性都包含一个符号和地理数据，允许在地图上以带有空间上下文的图形的形式呈现。层内的特性还可以包含数据属性，这些属性提供了可以在弹出窗口中查看并用于呈现层的附加信息。

可以使用add()或addMany()方法在构造函数中添加层，也可以直接使用add()或addMany()将层添加到Layers集合中。
一个层只能被添加到一个父层。不可能将同一层添加到多个地图或grouplayer中。如果您尝试这样做，该层将自动从其当前父层中删除并放置到新父层中。
例子：

var layer = new GraphicsLayer();
// 该层属于map1
map1.layers.add(layer);
// 该层现在属于map2
// 而隐式地做到了:map1.layers.remove(layer)
map2.layers.add(layer);

// 使用数组在Map的构造函数中添加层
var fl = new FeatureLayer(url);
var gl = new GraphicsLayer();
var map = new Map({layers: [fl, gl]
});// 使用Add()添加层
map.addMany([fl, gl]);// 使用图层集合添加图层
map.layers.addMany([fl, gl]);// //使用图层集合的push方法添加图层
map.layers.push(fl, gl);

移除图层方法
remove()，removeAll()，removeMany([]),用法同add

3.视图MapView

require(["esri/views/MapView"], function(MapView) { /* code goes here */ });

MapView显示Map实例的2D视图。必须创建一个MapView实例才能以2D 渲染地图（连同其操作层和基础层）。要以3D形式渲染地图及其图层，请参见SceneView的文档。有关视图的一般概述，请参见View。
为了使地图在DOM中对用户可见，必须创建MapView并至少引用两个对象：Map实例和DOM元素。分别在map和container属性中设置。

例子：

// 创建一个MapView实例(用于2D查看)
var view = new MapView({map: myMap,  //指向创建的Map实例container: "viewDiv",  // 元素idcenter: [118.829248, 32.026729],//地图中心点zoom: 14,//地图缩放constraints: {//设置约束条件maxZoom: 22//最大缩放},
});

.when() 可以调用MapView实例上的方法来执行仅在加载地图后才能运行的过程。

var view = new MapView({map: myMap,  container: "viewDiv"
});view.when(function(){
}

4.引入其他地图图层

由于有时候我们需要使用高德，谷歌，百度等地图的图层，需要引用这些地图的图层。在这里要用到BaseTileLayer，config，request，Color这几个模块。

（1）BaseTileLayer

require(["esri/layers/BaseTileLayer"], function(BaseTileLayer) { /* code goes here */ });

这个类可以被扩展来创建一个自定义的TileLayer。平铺层由图像组成，例如卫星图像，这些图像由列和行拼接在一起的正方形平铺层组成，使该层具有连续图像的外观。这些层具有多个级别的细节(LOD)，允许用户放大地图的任何区域，并加载在更大的地图比例尺上以更高分辨率描述功能的附加块。
平铺层通常为其他层(如FeatureLayer)提供地理环境，并且比其他层(如MapImageLayer和ImageryLayer)的性能更好，后者为每个视图请求和显示一个图像。
您可以通过在BaseTileLayer类上调用createSubclass()来创建一个定制的平铺层。你可以创建一个自定义平铺层的原因如下:
ArcGIS JavaScript API并不明确支持图像的来源
图像需要在显示在视图之前进行预处理

（2）request请求

require(["esri/request"], function(esriRequest) { /* code goes here */ });

从远程服务器检索数据或上传文件。
例子：

// 从USGS远程服务器请求GeoJson数据
var url = "https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/all_hour.geojson";esriRequest(url, {responseType: "json"
}).then(function(response){// 被请求的数据var geoJson = response.data;
});

（3）config配置

require(["esri/config"], function(esriConfig) { /* code goes here */ });

配置库的全局属性。
此模块的值是一个具有以下属性的对象。您还可以使用全局esriConfig变量来初始化esri/config模块。
例子：

require(["esri/config"], function(esriConfig) {esriConfig.portalUrl = "https://myHostName.esri.com/arcgis";
});

<script>
// 使用全局esriConfig变量初始化属性
var esriConfig = {portalUrl: "https://myHostName.esri.com/arcgis"
};
</script>

request
具有控制库和Web服务器之间通信的各个方面的属性的对象。

（4）Color颜色

require(["esri/Color"], function(Color) { /* code goes here */ });

通过传递十六进制，rgb（a），hsl（a）或命名的color值来创建新的颜色对象。十六进制，hsl（a）和命名的颜色值可以作为字符串传递：

var color = new Color("green");
var color = new Color("00FF00");
var color = new Color([125, 255, 13]);
var color = new Color([125, 255, 13, 0.5]);
var color = new Color({r: 125,g: 255,b: 13,a: 0.3  // Optional
});

（5）引入其他图层

require(["esri/config","esri/request","esri/Color","esri/layers/BaseTileLayer",]).then(([esriConfig, esriRequest, Color, BaseTileLayer]) => {let TintLayer = BaseTileLayer.createSubclass({properties: {urlTemplate: null,tint: {value: null,type: Color,},},getTileUrl: function(level, row, col) {return this.urlTemplate.replace("{z}", level).replace("{x}", col).replace("{y}", row);},fetchTile: function(level, row, col) {var url = this.getTileUrl(level, row, col);return esriRequest(url, {responseType: "image",allowImageDataAccess: true,}).then(function(response) {var image = response.data;var width = this.tileInfo.size[0];var height = this.tileInfo.size[0];var canvas = document.createElement("canvas");var context = canvas.getContext("2d");canvas.width = width;canvas.height = height;context.drawImage(image, 0, 0, width, height);return canvas;}.bind(this));},});//解决跨域问题esriConfig.request.corsEnabledServers.push("webst01.is.autonavi.com");//调用上方定义好的方法创建图层this.gaoDeLayer = new TintLayer({//此处的url，需要去对应的地图网站查询urlTemplate:"http://webst01.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}",tint: new Color("#004FBB"),title: "高德",//图层});this.map.add(this.gaoDeLayer);//添加地图至图层});

此处若想使用其他地图，只需添加对应的地图域名

//解决跨域问题，再获取该地图对应的图层
esriConfig.request.corsEnabledServers.push("http://www.google.cn/");
//再获取该地图对应的图层的url，调用以上创建好的BaseTileLayer实例即可。
let googleTileLayer = new TintLayer({urlTemplate:"http://www.google.cn/maps/vt/lyrs=m@226000000&hl=zh-CN&gl=cn&x={x}&y={y}&z={z}&s=Galil",tint: new Color("#004FBB"),title: "谷歌",});
this.map.addMany([googleTileLayer]);//最后添加图层至地图

5.FeatureLayer

require(["esri/layers/FeatureLayer"], function(FeatureLayer) { /* code goes here */ });

FeatureLayer是一个可以从地图服务或功能服务创建的单层;ArcGIS在线或ArcGIS企业门户项目;或者来自客户端特性的数组。该层可以是空间层(具有地理特性)，也可以是非空间层(表)。
空间层由离散的特征组成，每个特征都有一个几何图形，可以在2D MapView或3D SceneView中呈现为带有空间上下文的图形。特性还包含数据属性，提供关于它所代表的实际特性的附加信息;属性可以在弹出窗口中查看，并用于渲染层。可以查询、分析和呈现特征层，以便在空间上下文中可视化数据。
非空间层是一个没有表示地理特征的空间列的表。

（1）创建一个FeatureLayer

FeatureLayers可以通过以下三种方式之一创建:从服务URL创建、从ArcGIS门户项目ID创建，或者从客户端特性数组创建。
引用服务URL
要从服务创建FeatureLayer实例，必须将url属性设置为特性服务或映射服务中的层的REST端点。要使层在视图中可见，必须将其添加到视图引用的映射中。有关向映射添加层的信息，请参见map. add()。

require(["esri/layers/FeatureLayer"], function(FeatureLayer){const fl = new FeatureLayer({url: "https://sampleserver6.arcgisonline.com/arcgis/rest/services/Census/MapServer/3"});map.add(fl);  // 将图层添加到地图中
});

可以从服务中的表url创建非空间表实例，并且必须通过调用load()方法加载表。

// 添加一个非空间表。
require(["esri/layers/FeatureLayer"], function(FeatureLayer){const table = new FeatureLayer({url: "https://sampleserver6.arcgisonline.com/arcgis/rest/services/SF311/FeatureServer/1"});table.load().then(function() {// 表加载。准备在服务器上查询。});
});

如果从不同的域请求服务，则需要启用CORS的服务器或代理。
引用ArcGIS门户项目ID
如果它在ArcGIS Online或ArcGIS Enterprise中以项的形式存在，你还可以用它的ID创建一个FeatureLayer。例如，下面的代码片段展示了如何使用portalItem属性向映射添加一个新的FeatureLayer实例。

const fl = new FeatureLayer({portalItem: {  id: "8444e275037549c1acab02d2626daaee"}
});
map.add(fl); 

Add an array of client-side features
客户端特性也可以用来创建特性层。因为FeatureLayer需要一个模式，所以在从特性数组创建一个层时需要设置几个属性。必须使用geometryType属性和一个有效的空间引用来指定特性的几何类型(因为每个层只允许一个几何类型)。objectId字段必须与字段对象数组一起指示，提供每个字段的模式。一旦指定了这些属性，就必须将特性数组设置为source属性。请查看使用客户端图形示例创建一个FeatureLayer，以查看实际情况。
如果在层初始化时缺少任何所需的参数，API将尝试从提供的参数中确定所需的参数。例如，可以根据提供给源属性的特性来确定spatialReference、geometryType、hasZ和hasM属性。但是，如果源属性在初始化时是一个空数组，则无法确定geometryType，该层将被拒绝。
如果特性是在运行时添加、删除或更新的，那么使用applye()来更新特性，然后使用queryFeatures()来返回更新的特性。请从FeatureLayer示例中查看添加或删除图形，以了解实际情况。属性值用于针对客户端特性层执行的属性查询，并且层视图区分大小写。

const layer = new FeatureLayer({// 为每个字段对象创建一个esri/layers/support/Field的实例objectfields: [{name: "ObjectID",alias: "ObjectID",type: "oid"}, {name: "type",alias: "Type",type: "string"}, {name: "place",alias: "Place",type: "string"}],objectIdField: "ObjectID", geometryType: "point", spatialReference: { wkid: 4326 },source: graphics,  popupTemplate: pTemplate,renderer: uvRenderer  attribute
});
map.add(layer);

（2）查询方式

FeatureLayer中的特性在LayerView中以图形的形式呈现。因此，视图中可见的特性是通过LayerView访问的，而不是通过FeatureLayer访问的。要访问视图中可见的特性，请使用FeatureLayerView中的查询方法。

// 从层视图返回所有图形
view.whenLayerView(layer).then(function(layerView){layerView.watch("updating", function(val){if(!val){  // 等待层视图完成更新layerView.queryFeatures().then(function(results){console.log(results);  // 将所有客户端特性打印到控制台});}});
});

当从FeatureLayerView上的查询中访问特性时，请注意，特性在视图中显示时就会返回，包括应用于特性以提高性能的任何泛化。要获得完全分辨率的特性几何图形，请在FeatureLayer上使用queryFeatures()方法。
FeatureLayer类中的查询方法直接来自服务。例如，下面的代码片段返回来自服务的所有特性，而不仅仅是在FeatureLayerView中绘制的特性。

// 查询服务中的所有特性(而不是视图中的图形)
layer.queryFeatures().then(function(results){// 将服务中的所有功能的数组打印到控制台console.log(results.features);
});

有关如何为特定层创建LayerView的信息，请参见View.whenLayerView()。