arcgis-api-for-js-之创建图层和添加图层（1）

1.引用资源

1.1引用ArcGIS API for JavaScript

首先引用ArcGIS API for JavaScript，采用script标签，注：里面的数字为版本号，可以等到版本更新时，更换对应的版本号即可。代码如下：

1.2引用样式

标签引用main.css样式表，其中包含特定于Esri窗口小部件和组件的样式。代码如下：

2.加载模块

2.1require()函数

在创建地图对象之前，必须首先通过使用require（）的函数来完成对地图资源的使用。arcgis api for js提供了很多资源，包括esri/map(创建地图使用)，Geometry、Graphic、和Symbols等等，
一旦提供了资源，就可以使用Map()构造函数来创建地图。

2.2确保DOM可用

为了避免Javascript代码访问一个还没有加载完成的网页的报错，dojo提供了两种方法
1>一个是ready函数，可以将其包括在require()函数中，它会在HTML元素和任何模块加载之后才执行。
2>另一个是可以在require()函数中使用dojo/domReady!（感叹号表示domReady是AMD加载器插件）插件。
esri/Map - 加载特定于创建地图的代码
esri/views/MapView - 加载允许以2D查看地图的代码
dojo/domReady! - 确保在执行代码之前DOM可用。代码如下：

3.创建一个2D视图

创建一个新的Map地图是通过我们先前在require()函数中引用的esri/Map资源来实现的，在require()函数内部，使用构造函数来创建一个新的Map对象，Map对象的构造函数中接收两个参数，第一个是页面中用于加载
地图的div标签的id，还有一个为可选参数，定义一些地图的加载选项（比如，可以控制加载地图显示的图层啊，地图的显示中心，显示的级数等等），这个可选项是定义成一系列的键：值对的JSON对象。

1>最常见的选项有：basemap，他就是一个预先定义的底图，包括：satellite，hybrid，topo，gray，dark-gray，oceans，osm，national-geographic等等。
2>zoom：定义地图初试缩放级别。
3>minZoom,maxZoom:定义地图最小和最大范围缩放级别。
4>center:定义初始显示地图时的中心点，这个点就是一个Point对象，包括经度/纬度
代码如下：

require([
  "esri/Map",
  "esri/views/MapView",
  "dojo/domReady!"
], function(Map, MapView) {
  var map = new Map({
    basemap: "streets"
  });

  var view = new MapView({
    container: "viewDiv",  // container为容器的意思，这里对将包含视图的DOM节点的引用，就是承载地图的div容器的id。
    map: map               // 引用我们在上一步中创建的地图对象。
  });
});

其中，MapView通过传递一个对象给它的构造函数来设置它的属性。我们将container属性设置为将保存地图的DOM节点的名称。该map属性引用我们在上一步中创建的地图对象。

这里有两种可用的视图：MapView（用于查看2D地图）和SceneView（用于查看3D地图）。

4.定义页面内容

最后一个步骤就是创建一个用来承载地图容器的HTML标签div，我们需要给这个div给一个id，这样，Javascript代码可以访问到它。代码如下：

创建完成后，在container中引用。

5.样式页面

使用style标签中的标签来设置页面的内容head。要使地图填充浏览器窗口，在页面中添加以下CSS代码：

最终，小伙伴们，我们成功利用ArcGIS API for JavaScript 4.6,构建了第一个Web应用程序，效果请戳下面链接http://jiegiser.win/arcgisAPI/creat2Dmap.html

最后整体代码如下：

原创作品，请勿转载。违权必追究。